Firebase Social Login With React Native
Firebase social logins have worked wonders when it’s built for a browser environment. But where do we look to enable the same social logins and build it for a mobile environment? Well, look no further than this article!
Subscribe to our awesome Newsletter.
Firebase is known for it’s simple setup to enable social logins, but when it comes to building an app with React Native and Firebase, setting up the social login is such a pain. This is mainly because we’ve got to use the JS SDK which is built for the web environment. But the problem is that you can use the social login functions as it won’t work outside the browser environment. In such cases, we’ll be following a different strategy which I’ll be explaining in this article.
- React Native Project with Firebase Setup - Check this
- Social Login Keys
Here since the Firebase web SDK’s functions for social login doesn’t work outside the browser environment, we’ll be using third-party libraries to first authenticate the social accounts and to get an access token for each of the corresponding networks.
Once we get the access token to a platform, we’ll then pass it to the Firebase library function.
How it works
For setting up the authentication part we’ll be needing three React Native Libraries that help you get the access token of the user for each corresponding platform. I’ve used the following libraries and they worked pretty well for me.
Once you install these libraries it injects the native code that triggers the social logins either directly from the install apps or from the browser.
Setting Up Twitter Login
For configuring the Twitter login you need the keys which I hope you already have. Now import the library like below.
And once you import you can access the login function and get the access token like below.
handleFirebaseLogin is the function that we’ll be using to login to Firebase with the obtained access token.
Setting Up Facebook Login
Very similar to Facebook, let’s import the library and access the login function to get the access token.
And the login function looks like below.
Setting Up Google Sign in
Like the previous platforms, Google sign in also follows the same steps.
Handling Firebase Login
Once you get the access token of the user, you can use the below function to authenticate him with Firebase. But you should also map the social credentials with the Firebase in the console.
Once everything is setup, things will be smooth.
Also look at our previous articles if you’re getting started with Firestore,