Facebook Authentication using Firebase
Authenticating your users using Facebook via Firebase
Thanks for reading this article, 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 Facebook developer application and enable web Facebook login
- Enter the Facebook App ID and App Secret in Firebase Authentication sign-in-method
- Enter OAuth callback URL from firebase authentication to Facebook Login settings page.
- Add Facebook login method provided by Firebase on Frontend.
Creating Facebook Developers App
Go to this link(https://developers.facebook.com/), click on My Apps on the top right corner. Go ahead and create a new app and you will be redirected to the dashboard page. On the dashboard page enable Facebook login for the web. Now is the time to get your App ID and App Secret. I will add all the images one step by step to make it easier for you.
The left image is the apps you already have created on the Facebook developers portal. The right image is of modal open when you click in green colour button with “Create App” text. Go ahead and choose the category your application belongs to and click “Continue”.
After creating an app you will be redirected to the dashboard as shown in the above image. Go ahead and click on the Facebook login setup button. Then on the Left-hand sidebar after enabling the Facebook login you can see Facebook Login under the Products section.
The next step is to get App ID and App Secret from the Facebook developer portal.
Copy-paste your App ID and App Secret from that page for further use.
Go to your Firebase Console and inside Authentication -> Sign-in-method tab enable the Facebook login. You will see the small box appear as shown in the below image. Add your above App ID and App Secret and copy-paste the callback URL for further use and click on the “Save” button.
The next and last step is to add that callback URL shown in the above image and enter that to Facebook developers dashboard -> Products -> Facebook Login -> Settings as shown in the image below.
Writing Code
Pardon if the process seems too long. Let jump to the code part directly now. We will use the same repository we have used for other Firebase authentication articles.
https://github.com/shreyvijayvargiya/iHateReadingLogs/tree/main/TechLogs/PhoneNumberAuthenticationInside the login page, we will create a new button for Facebook login and add Firebase provided method for Facebook login. The steps are as follows -
- Create a provider for Facebook using Firebase auth provider
- Create Firebase sign-in method which accepts the above provider
- After everything works as accepted get the Facebook sign-in token and user credentials.
Provider
We will use the Firebase Github auth provider method to create a provider.
const provider = new firebase.auth.FacebookAuthProvider;Next part to just use the “signInWithPopup” method which accepts the provider as an argument and returns Promise. We will get user credentials in the resolve of promise.
Our handleFacebookLogin method simply defines the provider and then use the Firebase signInWithPopup method. After resolving the promise inside .then we will get user credentials, I have logged our credentials after login via Facebook in the console.
Conclusion
Facebook login is also simple, if you have read all my Firebase authentication sign-in-methods articles then you have can easily find that all approach almost follows the same pattern. Firebase also every time give the same data type of credentials for every sign-in-methods.
Until next time, Have a good day, People.
Code repository => https://github.com/shreyvijayvargiya/iHateReadingLogs/tree/main/TechLogs/FacebookAuthentication
