1. Prepare a project

For this article we will need a app created by expo with typescript support. You can view my article about how to set it up or clone my boilerplate.

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.

Install dependencies

Run yarn to install all dependencies.

Create .env file

Run cp .env.example .env to create a .env file.

2. Setup Firebase Account

Sign Up

Now go to https://console.firebase.google.com and sign up. After you should see a page showing your recent projects.

Create project

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

Sign up

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

Run 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!

Run 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!