Adding Microsoft Authentication using Firebase
Authenticating your users via Microsoft using Firebase
I have written a whole bunch of articles on how to authenticate users using Google, Twitter, Github, Email & Password and Phone number via Firebase. You can read those articles on the below link.
http://i-hate-reading-logs.vercel.app/Overview
- Create Microsoft Azure directory on the Azure portal.
- Create a new registration on azure and get the applicationID and applicationSecret.
- Copy-paste the applicationID and applicationSecret on the Firebase console.
- Add Microsoft login method & collect user credentials.
Microsoft Azure directory
Go to the Azure portal if you have an account you can directly sign-in or else you can create a new account using Github on the Azure portal(https://portal.azure.com/).
The next step is to click on “Manage Azure Active Directory”. It will take you to the active directory dashboard.
In the active directory dashboard, go to “App Registration” under the Manage section on the left sidebar.
In the app registration, click on the New registration button on the top tab bar. It will display the application name and redirect URI form.
Go ahead and enter only the display name of your application.
NOTE -> multiple application can have multiple accounts.
After clicking “Register”, you will be redirected back to the App registration page where you can find your applicationID.
For applicationSecret you have to do one more step, Go to the “Certificates & secrets” section under Manage and create a new token, that token will be your applicationSecret.
Enabling Microsoft authentication in Firebase
Go to Firebase -> Console -> Authentication -> Sign-in-method Tab. Enable the Microsoft section from the list of methods and add your Microsoft account ID and secret over here.
Once ID and Secret are added, copy-paste your redirect URI and add that to the Microsoft application redirect URI section. After authenticating Microsoft will redirect the user to this URL.
Writing Code
The most typical part is done now. Next is to add a button for Microsoft login and add authentication method provided by Firebase. We will start by creating a provider using the firebase auth method for MicrosoftAuthProvider followed by creating a firebase auth method using signInWithPopup which accepts the provider as an argument and handle the authentication part for us. The signInWithPopup method returns a promise and we can finally get all the user credentials after handling our promise using .then and .catch methods.
const provider = new firebase.auth.OAuthProvider(‘microsoft.com’);
After resolving the promise return by signInWithPopup method we can log the data in the console to credentials return by Microsoft.
Conclusion
Adding Microsoft login methods are not difficult, but creating an azure account then grabbing client ID and the secret is a task. You can add this method using a passport.js also in the backend to store the credentials in the database, I will cover an article on that too.
Until, next time, Have a good day, People.
Code repository => https://github.com/shreyvijayvargiya/iHateReadingLogs/tree/main/TechLogs/MicrosoftAuthentication
