React native Firebase native authentication new version
What we will do:
React native app with Firebase authentication ( sign in and sign up). We will be using expo to build the app. We will be using the Firebase JS SDK ( Although we can eject the expo app to use the native Firebase SDK ). Also will try to give a brief steps on how to setup Firebase.
Requirement:
node: > 6.14.x.
expo:> 4.0.x
Firebase Setup:
- Go to Firebase console and create a new project. Now click on create a new app and select web app. Provide the name as authentication and register the app. You should be seeing something like this below. Keep this handy we will be using this in the later steps.
- Go to Authentication tab and enable sign in methods like show below.
React native app creation:
I am using expo to create the app.
expo init auth
Choose the option you want, depending on which the your app will be created. I choose blank ( typescript).
React native authentication flow:
Once the user sign in or sign up with our app, when they close it and open it back they should be still signed in.
In order to achieve this we will be usingReact.useReducer and React.useContext.
Creating context:
Create a context file containing the following. We are creating the context in separate file so that we can access it from anywhere.
Authentication flow:
We will import the context we have created. When the app is opened we will call bootstrapAsync function on our service. which will check if the user is logged in or not. If the user is not logged in we will display sign in screen. ( We can create a sign up screen or welcome screen here)
I have separated out the logic into service class as show below. We will be using Async storage to store whether the user is logged in or not.
Firebase Authentication:
We can install the firebase using npm as show below. When creating the user we can also update their name and other information for later access as shown below.
npm install firebase
Use your Firebase configuration in the placeholder. This is the code you got when you created the web app in the Firebase console.
Firebase JS SDK supports Authentication, Firestore & Realtime databases, Storage, and Functions on React Native. Other modules like Analytics are not supported through the Firebase JS SDK. We can easily eject the application and use the native Firebase.
Finally — Simple Sign in:
Import the context we created in separate file. We can call sign-in on the context value. Which will call our Firebase with the email and password. If the user is successfully logged in, the app.tsx will update the current screen to be home screen. Since we update the async storage after login, the user will be landed directly in Homescreen when he opens the app next time.
Conclusion:
Using JS SDK in react native is very easy. Since all the complexity will be handled by expo.
