Contents
Published: May 2, 2022
9 min read
In this article, you'll learn:
1
Step # 1: Environment Setup
2
Step # 2: Project Setup
3
Step # 3: Basic UI
4
Step # 4: Basic Navigation Implementation
5
Step # 5: Adding fancy UI
6
Step # 6: Adding Firebase
7
Step # 7: Adding Firebase Auth
8
Step # 8: Authenticating the User
9
Step # 9: Troubleshooting
Before we start explaining this step, let us make a little sidenote. In case you already have the project installed, feel free to skip steps 1-3.
First things first, make sure you have the [node] (https://nodejs.org/en/](https://nodejs.org/en/){target=_blank rel="nofollow noopener"} installed. We recommend installing the LTS version to avoid all the problems.
For a way we suggest in our article, you’ll need a packet manager. In Stormotion, we prefer to stick with yarn, however, you can pick npm if you wish.
After completing step 1, you should set up a brand new react-native project. We recommend using TypeScript because it allows you to write type-safe code.
Before moving on, spend some time and check if you can debug it and know the app won’t crash because one of the values is null:
npx react-native init firebaseAuthTest --template react-native-template-typescript
Once you’ve created a project and performed pre-testing, you can set react-navigation up to make sure we can guide the user to the required screen. Here’s how you can do it:
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view @react-navigation/stack @react-navigation/native
Don’t forget to run install the pods to make sure the dependencies are installed for iOS:
cd ios && pod install
To finalize installation of react-native-gesture-handler, add the following at the top:
import 'react-native-gesture-handler';
Pay extra attention to the place of it — it’s essential that it's at the top of your entry file, such as App.tsx, with nothing else before it.
You can skip steps 4 and 5 if you already have the navigation and screens set up.
The next step would be to init navigation and add the basic first screens.
In src/navigation/MainNavigator.tsx:
The next step is dedicated to adding some styles to that foundation we made in the step 4.
We also added the react-native-iphone-x-helper library to correctly style on iPhones and app-logo.png to src/images to add our logo to the login page.
In src/screens/Login.tsx:
This is what it looks like after all style changes. Better, right? To be honest, there’s still much more we could do in our code to make it look better & more user-friendly: regexp to verify email, improve UI, improve performance by using useMemo/useCallback/memo, etc. However, it’s perfectly enough for the testing purposes.
The next step is integrating it with Firebase, which you can skip if you already have the firebase set right in place.
For this step, you should install react-native-firebase. In the next sections, we’ll talk about how to set react-native-firebase up for Android and iOS.
Here, we are going to install the auth module by typing the following:
yarn add @react-native-firebase/auth.
Additionally, we need to install dynamic links to handle passwordless login:
_yarn add @react-native-firebase/dynamic-links. _
It’s important to remember to install pods afterwards. Unfortunately, it’s not enough to install the auth module to make passwordless login work. You need to make some steps to make it always work. Be careful because if you don’t follow the guide, you might have a hard time finding a mistake!
Step # 7.1: Enable passwordless login inside firebase
Step # 7.2: Enable Dynamic Links: iOS, Android
Once you’ve finished setting up the dynamic links for iOS or Android, it’s time to start writing the code.
In case you face any issues with this step, please take a look at the troubleshoot (step # 9) below and make sure you’ve done everything correctly.
Whenever we send a passwordless login link, we need to save the email between the log-ins, because Firebase doesn’t allow us to make it via the link without the email specified.
For our case, we’ll use AsyncStorage, however, for the real app you can use Redux+AsyncStorage, Apollo+AsyncStorage or Mobx+AsyncStorage — it depends on your use case. We need to add the library for that:
yarn add @react-native-async-storage/async-storage
Step # 8.1
You should update your Login.tsx to send the email with the passwordless link as well as your onSubmit function to send the sign-in link.
After that, proceed to replace placeholder strings with your relevant data and import auth from @react-native-firebase/auth
URL in our case is https://stormotiontest.page.link
Please check the source code and let us know if you have any troubles.
1 - Make sure you have the dynamic link created
Was it helpful?
Read also
How to Make your React Native Application Accessible to ALL, not just to MANY
Which Payment Providers should I use for my SaaS Product?
What makes React the best option for SaaS Apps?
Our clients say
When I was working with Stormotion, I forgot they were an external agency. They put such effort into my product it might as well have been their own. I’ve never worked with such a client-focused company before.
Alexander Wolff, CPO
Sjut