How to add Facebook Login to a React-Native app with Expo, Firebase and Typescript
In this article I will show you how easy it is, to add a Facebook login to a Expo React-Native app by using Firebase. Expo allows us to do common things more easily. If you combine Expo with Firebase you will develop mobile apps faster then deploying it to the app store ;)
If you do not want to use Typescript you can still read this article and use code snippets by simply removing any type syntax.
1. Prepare a project
In addition to the basic setup the boilerplate also contains react-native-dotenv to load .env files. We will use that to store our important api secrets for Firebase and Facebook. A entry in .gitignore ensures that the .env will not be committed to git.
yarn to install all dependencies.
Create .env file
cp .env.example .env to create a .env file.
2. Setup Firebase Account
Now go to https://console.firebase.google.com and sign up. After you should see a page showing your recent projects.
Click on ‘Add project”, choose the name of your project and click on ‘create Project’.
Copy credentials from Firebase to your .env
Click on the button for Web App Integration to view the Firebase Api Credentials.
And copy the values into your .env file:
3. Setup Facebook App
Go to https://developers.facebook.com/apps/ and sign up if you have not yet done so.
Create a new App
Click on ‘Add a New App’ and fill out the required information and submit.
Copy credentials of this Facebook app to your .env file
Click on ‘Settings’, on the left navigation menu.
And then on the right, at ‘App Secret’ click on ‘show’ to be able to see your App Secret. Now copy ‘App ID’ and ‘App Secret’ into your .env file.
Connect Facebook and Firebase
To make Firebase know about the Facebook login, we have to set up the Sign in method ‘Facebook Login’ at Firebase using the credentials of the Facebook app we just created.
Go to https://console.firebase.google.com and click on ‘Authentication’
Click on ‘Set up sign-in method’
Click on ‘Facebook’.
And fill in ‘App ID’ and ‘App Secret’ and click on save!
Now we are ready to use Firebase and Facebook API´s!
4. Implement Facebook Button
Install Firebase API SDK
yarn add firebase to install the SDK.
Create a config file for Firebase
Create a new file in /src/config/firebase.ts and copy&paste the following code:
Note: A config file for Facebook is already there from the boilerplate!
And add a export to /src/config/index.ts
This allows us to start writing
config in any file and it will auto-import the ‘config/index.ts’ and show us with auto-complete all available options.
Configure a Firebase API instance
Create a new file in /src/integrations/firebase.ts
In ES6+ and Typescript, modules are Singletons. In this case we use that to our advantage. Firebase will only be initialized when the module is actually imported and every following import will reuse the same instance.
Create a Authentication Service Class
To keep logic like authentication out of the view I like to create classes called ‘Services’ which handle any business logic in my apps. So go ahead and create a new file in /src/services/Auth.ts
Add the Login Button to the App.tsx
Now modify your /src/App.tsx by copy&paste the below snippet:
The changes are:
- Add a button which onPress will trigger the AuthService.loginWithFacebook
- Create a state variable to store the current user
- Show a different view if the current user is logged in, to let you know that the login is working
5. Implement Logout Button
Add a Logout method to your /src/services/Auth.ts
Add a button to the authenticated view, calling the AuthService.logout() method onPress of the button
Try it out!
yarn start and open the app with your phone or by using a simulator.
You should see the Login button now. If you click it and sign in with Facebook you should see the Logout button. Which you can click to get back to the first screen.
6. Store Avatar, E-Mail and Name in Firebase
Oops, thats done automatically by Firebase. So nothing to do here :)
Lets display the profile avatar above the logout button. The App.tsx will then look like this:
This user object gives you access to the generic profile stored in Firebase but also the data for each authentication provider. Firebase is so smart and filles the generic profile automatically when a auth provider is used for the first time by the user.
Try it out
Now you should see your Facebook avatar after you login!
Thats it! You can find the full source code here.
Please feel free to leave feedback. I’m keen to write more in the future, if you want me to write about any topic let me know in the comments!