Utilizing Firebase for Microsoft authentication

Currently, I am working on integrating Microsoft authentication with Firebase for a web project built in Vue.js 2. I have meticulously followed the steps outlined in the Firebase documentation and also referred to the Azure portal documentation for creating an account. Despite following these guidelines, I encountered the following error:

Error FirebaseError: Firebase: Error getting verification code from microsoft.com response: error=invalid_request&error_description=Proof%20Key%20for%20Code%20Exchange%20is%20required%20for%20cross-origin%20authorization%20code%20redemption.&state=AMbdmDnE2TjhyB-T1hIHqYTh73Za9GIrASM-9NFz4trUb4QSLmP6W_qIFNCSl...
(auth/invalid-credential).
at _errorWithCustomMessage (vendors~app~._node_modules_@firebase_auth_dist_esm2017_index-1679a2b2.js~8334e211.js:568:20)
at _performFetchWithErrorHandling (vendors~app~._node_modules_@firebase_auth_dist_esm2017_index-1679a2b2.js~8334e211.js:1085:23)
at async _performSignInRequest (vendors~app~._node_modules_@firebase_auth_dist_esm2017_index-1679a2b2.js~8334e211.js:1100:29)
at async _signInWithCredential (vendors~app~._node_modules_@firebase_auth_dist_esm2017_index-1679a2b2.js~8334e211.js:4706:22)
at async PopupOperation.onAuthEvent (vendors~app~._node_modules_@firebase_auth_dist_esm2017_index-1679a2b2.js~8334e211.js:7965:26)

I am seeking suggestions on how to resolve the issue mentioned above.

firebasevue.jsauthenticationvuejs2firebase-authentication

Answer №1

By following two simple steps, I was able to resolve the issue at hand.

Step 1: Initially, I mistakenly created an SPA platform on the Azure portal instead of a web platform. To rectify this, I deleted the SPA and replaced it with a web platform.

To adjust application settings based on the targeted platform or device, adhere to these instructions:

  • Within the Azure portal, navigate to App registrations, then select your application.
  • Under Manage, click on Authentication.
  • In Platform configurations, choose to Add a platform. Then specify the settings for your application type by selecting the corresponding tile. https://i.stack.imgur.com/pVYLa.png

Step 2: The next task involved copying the Application secret from the Firebase console accurately, as per the details provided in the Azure portal. Here are the fundamental steps to generate and incorporate a client secret:

  • In the Azure portal, within App registrations, locate and select your application.
  • Navigate to Certificates & secrets > Client secrets > New client secret.
  • Add a brief description for the client secret.
  • Select an expiry date for the secret or indicate a custom lifespan.
  • Click on Add.
  • Remember to store the value of the secret securely for usage in your client application code. Please note that this value is no longer visible once you exit the page. https://i.stack.imgur.com/ryo8h.png

It is crucial to pay attention to the final step which emphasizes the importance of preserving the key value. In case the value is obscured (displayed as ***), simply delete the existing key and generate a new client key before copying the actual value ("Value" field, not "Secret ID" field).

https://i.stack.imgur.com/uZF4l.png

Subsequently, insert this key into the application secret field within the Firebase console. https://i.stack.imgur.com/TovzI.png

Note: It is highly recommended to thoroughly review the respective documentations from both Firebase and Microsoft Azure for accurate guidance.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Learn the technique in Vue to separate a string using commas and store the values in an array

As a Ruby enthusiast, I am delving into the world of Vue. In my project, users can input multiple styleCodes separated by commas. I aim to store these styleCodes in an array for flexible length calculations. See my code snippet below: <template> &l ...

javascriptvue.js

Which specific files do I have to edit in order for Laravel to acknowledge a new data type?

Currently, I am honing my skills in Laravel by working on a Laravel Breeze application. One task that I have set for myself is to incorporate a postal code field into the existing User model, including the registration form. To tackle this challenge, I dec ...

typescriptlaravelvue.jslaravel-breeze

Challenge arises when implementing conditional styling in Vuejs

I want to include a style that works in HTML: <div style="text-decoration: line-through"> Now I am attempting this in Vue.js 2: <div :style="{'text-decoration: line-through':true}"> However, the above code is not functioning corre ...

vue.jsvuejs2

Unexpected behavior: Vue toast from Bootstrap disappears instantly

My attempt to show a toast message has been unsuccessful. Despite trying all the example codes provided on https://getbootstrap.com/docs/5.1/components/toasts/, when I click the button to display the toast, it appears briefly and then disappears immediatel ...

vue.jstoastbootstrap-vue

Using Vue.js to pass a variable from a parent component to a child component

Parent component: ShowComment Child component: EditComment I'm attempting to pass the value stored in this.CommentRecID to the child component. In the template of ShowComment, I have included: <EditComment CommentRecID="this.CommentRecID" v-if= ...

javascriptjqueryvue.jsvue-props

Utilizing a checkbox within a select dropdown component in Vue

Has anyone come across a checkbox dropdown feature in Vue? I have been searching online but couldn't find any examples or resources related to this. If someone has a working skeleton for it, please share! ...

javascriptvue.js

Learn how to reference a parameter within the meta title of a route in Vue.js

I'm encountering an issue when attempting to call a parameter in the meta title route, I've already attempted this method but it's still not working { path: '/test/blog/:slug', name: 'Surah', component: Surah ...

vue.jsvue-router

Fix Vue by deleting "public" from the file path

After removing the "public" from the URL path following this guide Laravel 5 – Remove Public from URL, I have encountered an issue with Vue scripts not working properly. Interestingly, if you add "public" back to the path, the script works fine (http:// ...

phplaravel-5vue.jslaravel-5.7

After refreshing the page, vuex is encountering null values when using firebase.auth().onAuthStateChanged

Encountering an issue with Vuex and Firebase Authentication integration. When reloading the page, there is a delay in response from firebase.auth().onAuthStateChanged. I require an immediate response upon page reload without using router guards as seen in ...

javascriptvue.jsfirebase-authenticationvuex

Ensure that the modal remains open in the event of a triggered keydown action, preventing it from automatically closing

I am currently toggling the visibility of some modals by adjusting their CSS properties. I would like them to remain displayed until there is no user interaction for a period of 3 seconds. Is there a way to achieve this using JavaScript? Preferably with Vu ...

javascriptcssvue.js

Enhance your HTML rendering with Vue.js directives

Check out this cool code example I created. It's a simple tabs system built using Vue.js. Every tab pulls its content from an array like this: var tabs = [ { title: "Pictures", content: "Pictures content" }, { title: "Music", c ...

javascripthtmlvue.jsvuejs2

Creating an HTML list based on a hierarchical MySQL table structure

I have retrieved a hierarchical table showing different elements and their parent-child relationships as follows: id| name | parent_id | header 1 | Assets | 0 | Y 2 | Fixed Assets | 1 | Y 3 | Asset One | 2 | N 4 | ...

javascripthtmlvue.js

Something seems to be amiss with the Vue.js eslint configuration. Can you help

I am just starting out with vueJs. I attempted to use this basic code in my vue project to update the data of a component: <template> <div> <h1> {{ message }} <h2> Hello {{ firstname }} {{ lastna ...

vue.jseslint

Sending notifications from a PHP server to an Android application using Firebase Cloud Messaging (FCM)

As a novice in PHP, I am attempting to create a program that can send a basic notification (consisting of a title and message) from a localhost using PHP to an Android application through Firebase. While I have successfully sent notifications from FCM to A ...

phpandroidfirebasepush-notificationlocalhost

Unlocking fashion with $refs: A step-by-step guide

After using console.log(this.$refs['block' + row + column]);, I confirmed that I can successfully access the HTML element it refers to. https://i.stack.imgur.com/7KYqB.png However, when attempting to access the element's style using variou ...

htmlvue.jsvuejs2

A guide to efficiently passing props in Quasar 2 Vue 3 Composition API for tables

I am encountering an issue while attempting to create a custom child component with props as row data. The error message "rows.slice is not a function" keeps appearing, and upon inspecting the parent data, I found that it is an Object. However, the props r ...

javascriptvue.jsvue-composition-apiquasarvue-props

Tips for creating a script that compiles all SCSS files into CSS within a Vue 3 project

Within my project, there exists a file named index.scss located in the src/assets/styles directory. Adjacent to this file are multiple folders housing SCSS files that are ultimately imported into index.scss. My objective is to devise a script within the pa ...

cssvue.jssass

Firebase Promise not running as expected

Here is a method that I am having trouble with: async signinUser(email: string, password: string) { return firebase.auth().signInWithEmailAndPassword(email, password) .then( response => { console.log(response); ...

angulartypescriptfirebasepromisefirebase-authentication

Tips for choosing text within an input field upon mounting (Vue3)

I have created a form that generates a new input with a random value every time I click on the ADD_INPUT button. My goal is to have the value of the newly created input automatically selected. Apologies for any language issues in my explanation. I attempt ...

vue.jsvuejs3

Navigating through the layout in Vue.js2: routing behavior

I am in the process of designing a layout that includes: +-------------------------------------------------+ | HEADER (STATIC) | +-------------------------------------------------+ | FOREWORD (just homepage; dynamic ...

vue.jsvuejs2vue-router