React Native Login Screen Template

React Native login screen template with Firebase

Latest version

1.1.0

Last updated on

React Native, Expo & Tailwind template with Firebase Authentication

Portal is a free React Native & Expo template that’s integrated with Firebase Authentication out of the box. There’s no need to go through the process of setting up an authentication flow - simply add your firebase details and away you go.

I decided to build Portal because there were few out of the box authentication solutions with Firebase for React Native like there were for React - Portal allows you to jumpstart your project with working signup and signin without reinventing the wheel.

All you need to do to setup Portal is download the project files, setup your firebase project (instructions below) and create a .env file with your firebase project details using the provided template.

Features

iOS, Android & Web support

Portal uses Expo and supports iOS, Android and the Web out of the box.

Email, Google and Apple sign in supported

Portal supports signin with email, Apple and Google.

Built with Tailwind CSS

Portal is built using Tailwind CSS using the tailwind-rn package, making it easy to customise the style of your app with a wide range of handy utility classes.

Dark mode support

Portal supports dark mode out of the box on all three platforms.

React Navigation support

Portal is based on the official Expo template which includes React Navigation support out of the box - there’s no need to set this up separately.

How to setup Portal

Portal uses environment variables for easy setup and integration with your Firebase project. Simply create a .env file with the provided template, enter your Firebase details, enable email and password authentication and your signin and login forms should be up and running!

Create a firebase account

If you haven’t already, you’ll need to go to firebase.google.com and create a Firebase account using your Google account.

Create a firebase project

Go to the Firebase console, click on Add Project and follow the steps to create a new Firebase project.

Get your project details

On your Firebase project page, click on the web icon to create your credentials:

Give your app a nickname and click Register app. You will then be presented with your project credentials - in the next step we will use these to integrate Firebase with our React Native app.

Create a .env file

In the root folder of Portal you will find a file called .env.example, with the following contents:

FIREBASE_API_KEY=
FIREBASE_AUTH_DOMAIN=
FIREBASE_DATABASE_URL=
FIREBASE_PROJECT_ID=
FIREBASE_STORAGE_BUCKET=
FIREBASE_MESSAGING_SENDER_ID=
FIREBASE_APP_ID=
FIREBASE_MEASUREMENT_ID=

USES_EMAIL_SIGN_IN=
USES_APPLE_SIGN_IN=

USES_GOOGLE_SIGN_IN=
GOOGLE_EXPO_CLIENT_ID=
GOOGLE_WEB_CLIENT_ID=

Copy the contents of that file into a new file called .env, and add the credentials you received from Firebase, like so (you can ignore the other values for now):

FIREBASE_API_KEY=WjjFzQeCTIBaLmSfPXIkAokDeeQsMebSTQB_bgc
FIREBASE_AUTH_DOMAIN=test-app-41h9a.firebaseapp.com
FIREBASE_DATABASE_URL=https://test-app-41h9a.firebaseio.com
FIREBASE_PROJECT_ID=test-app-41h9a
FIREBASE_STORAGE_BUCKET=test-app-41h9a.appspot.com
FIREBASE_MESSAGING_SENDER_ID=438733730185
FIREBASE_APP_ID=1:696434365911:web:eadc2b402454fa4a2be792
FIREBASE_MEASUREMENT_ID=

Setting up Email Authentication

Email authentication is very easy to setup. Simply go to the Firebase Authentication dashboard, click “Add new Provider” and enable Email/Password.

In your .env file, make sure you set USES_EMAIL_SIGNIN to true.

USES_EMAIL_SIGN_IN=true

You should now be able to create an account and login via the app.

Note that Portal does not support passwordless signin (email link) as of yet.

Setting up Apple Authentication

Note: you need an Apple Developer account to use Sign In with Apple.

There are a few things we need in order to set up Apple authentication:

  • An apple developer account
  • An App ID
  • A Service ID
  • A private key with Sign In with Apple enabled

I’ll walk you through creating each one below.

Creating an Apple Developer account

If you don’t have an apple developer account, you can sign up at developer.apple.com. Note that it isn’t free - but it’s required to use Sign In with Apple.

Creating an App ID

In your Apple developer console, go to the Identifiers and click the plus icon in the top left - select App ID and continue. Select type App and continue. Give it a name and a bundle ID and continue, and your App ID will be ready to use.

Creating a Service ID

In your Apple developer console, go to the Identifiers and click the plus icon in the top left - select Services ID and continue. Select type App and continue. Give it a name and a bundle ID (not the same as your app ID - use something like com.domain.appid-service). Under the capabilities section enable Sign In with Apple and continue.

You should now see the service ID you created in the list - click on it and you should see a checkbox to enable Sign In with Apple. Enable it and click on the configure button - select the App ID you created above for the Primary App ID, then in your domains and subdomains box add your domain.

For the Return URLs section you need to add your Firebase return URL - to create this go to your Firebase dashboard, go to the Authentication section and go to the Sign in methods tab. Click on Add new provider, and select Apple.

You don’t need to anything for now other than copy the authorisation callback URL at the bottom of the screen. Now go back to your Apple Developer console and paste that value into the return URL box. You can now click next and save your changes to your Service ID.

Creating a Private Key

Go to the keys section of your Apple developer console and click the plus icon - give your key a name and enable Sign In with Apple. Click the configure button and for primary app ID select the app id you created above and click save.

You should now see a screen with an option to download your key - which you should do so as you won’t be able to download it once you leave this screen. You should also see your Key ID - make a note of this as we’re going to need it later.

Enable Sign In with Apple on Firebase

Now that we have our Services ID and our private key, we can go ahead and enable Apple authentication in our Firebase project.

Go to your firebase project and in the Build menu, select Authentication. In the tabs at the top of the page, select Sign-in method and click Add New Provider. Under Additional providers, select Apple.

Click the enable toggle and you should then be presented with two sections - a Services ID input and a set of fields called OAuth code flow configuration.

In the Services ID field, enter the Services ID you created earlier.

Under OAuth code flow, you’ll see three fields - Apple team ID, key ID and Private Key.

For Apple team ID, you need to enter your apple team ID, which you can find in the top right hand corner when you log in to your apple developer account.

For the key ID, enter the ID of the private key you created earlier.

For the private key, open the .p8 file you downloaded and open it in your text editor, and you should see some text in the following format:

-----BEGIN PRIVATE KEY-----
your key here
-----END PRIVATE KEY-----

Copy and paste that into the private key field.

Save your settings and then add the following line to your .env file:

USES_APPLE_SIGN_IN=true

If you reload your app you should now see the Sign In with Apple button, and you should be able to sign in with your Apple ID on all three platforms.

Note: When developing locally using Expo Go, you’ll find that Apple Authentication won’t work on iOS and Android. You can fix this by changing the services ID in your firebase project to:

host.exp.Exponent

Remember to change this back to your service ID before you go live! Ideally I recommend having two separate firebase projects - one for development and one for production - to save having to change this value back and forth and risking issues in production.

Setting up Google Authentication

Portal uses Expo’s AuthSession package to enable Sign in with Google. During development, if you’re using the managed Expo workflow, you’ll need to use the web version of the Google login - however it is possible to use the native Google login using the standalone or bare workflows.

In order to use Google Authentication with Portal, we’ll need to create two OAuth client IDs - one for web, and one for Android and iOS.

To create both simply go to cloud.google.com, go to your project which should have been automatically created by Firebase and have the same name and ID, and select APIs and Services.

Creating your Expo Client IDs

Once you’ve selected your project, click on the credentials section in the sidebar. You should then see a section titled OAuth 2.0 Client IDs - there will already be an ID there that Firebase has automatically created for you.

Click credentials at the top of the screen and in the flyout menu select OAuth Client ID. You can then create your credential with the following details:

Create your OAuth ID and then repeat the steps above to create a second one for our web version (if you want to support the web):

Now go to your Firebase console, and in the Authentication section enable Google sign in (you can ignore the options).

Now you just need to add the following to your .env file:

  • Set USES_GOOGLE_SIGN_IN to true
  • Set GOOGLE_EXPO_CLIENT_ID to the first OAuth client ID you created above
  • Set GOOGLE_WEB_CLIENT_ID to the second OAuth client ID you created above
USES_GOOGLE_SIGN_IN=true

GOOGLE_WEB_CLIENT_ID=384261027492-sxIFJjQdPfzYoTXzXvEwAMYFqdgzIIRL.apps.googleusercontent.com
GOOGLE_EXPO_CLIENT_ID=499102477022-YKFZqHfmVzgavobtIShDLMzZyPAbamIX.apps.googleusercontent.com

You should now be able to login with your Google account on all three platforms!

Note: you’ll notice that logging in with Google uses Expo’s proxy service - if you’d prefer not to use this it’s possible but the setup is more complex - read Expo’s guide for more information.

Copyright 2022 - Atom Lab | Privacy Policy | Terms and Conditions