Expo Firebase Authentication & Cloud Firestore Using async/await & React Hooks

Kathryn
Kathryn
Oct 30, 2020 · 7 min read

Introduction

Let’s talk about setting up and authenticating a user in a relatively easy way, so as a developer, you can build the best application experience for users. As I am trying to implement the sign in and sign out features using Firebase Authentication, I find it difficult to pin down the steps. It turns out that some details are slightly different depending on what you are building. We will be walking through all the steps you needed to authenticate a user and save the user information with customized fields into Cloud Firestore using async/await syntax and React Hooks in Expo. The keyword here is Expo. Keep on reading if and only if you are developing a mobile application in Expo.

What is Firebase?

Firebase is a platform developed by Google for mobile and web application creation. It is a Back-end-as-a-Service (Baas), allowing developers to link their applications to backend cloud storage while providing additional features. The features of Firebase include authentication, cloud Firestore, real-time database, cloud functions, analytics, hosting, cloud storage, and Firebase machine learning.

What is Firebase Authentication?

Firebase Authentication is a super simple way to authenticate your user without writing much code. The built-in error message is a nice feature. It throws an easy-to-understand error message to the user. It supports various authentication methods, such as passwords, phone numbers, anonymous, popular federated identity providers like Google, Facebook, and Twitter.

What is Cloud Firestore?

Cloud Firestore is the latest real-time NoSQL database for mobile app development developed by Google. It stores data as collections of documents similar to JSON. It allows sub-collections within documents and provides various built-in query methods.

 $ expo init <YOUR_APP_NAME>
$ expo install firebase$ expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view $ expo install @react-navigation/native @react-navigation/stack 
Video instruction on creating a new project on Firebase
  • Sign up an account and create a new project
  • Put in your project name, click “Continue”.
  • Disable Google analytics as this is not the focus for now.
  • Click “Create Project” it is going to take a while before it says “Your new project is ready”, click “Continue.”
  • On the Project Overview, click on the “Web” icon since we are building on Expo, then give it a name, click “Register app”, it will show you the Firebase configuration, copy the SDK keys, we will use it in the next step.
  • Create a “keys.js” file under the “config” directory
  • Copy and paste the Firebase configuration to “key.js”, export it, we will import it later to initialize the Firebase connection in Step 6
  • Make sure you do not upload the “keys.js” file to GitHub for security reasons, instead place it on the “.gitignore” file
“YOUR_APP_NAME/config/keys.js”
“YOUR_APP_NAME/.gitignore”
Video instruction on sign-in method configuration
  • Click on the second tab where it said “Sign-In method”
  • Enable all the Sign-in method you would like to enable. For now, we will enable the “Email/Password” option.
  • We will then click the “Cloud Firestore” on the left to create a database.
  • Select the “Start in test mode” option, click “next.”
  • Select the “Cloud Firestore location”, click “Enable”
  • createUserWithEmailAndPassword()requires two arguments, email, and password, to create an account for the user on the “Authentication” of your Firebase Console. It automatically assigns a unique UID to identify each user.
  • firebase.firestore().collection('users')create a collection ( a.k.a. tables or models) called “users”
  • The .doc(uid)on line 12 create a document (a.k.a an entry or instance) that contains a unique ID(uid) from the “Authentication”
  • The .set() on line 13 represents the customized field (i.e., column name or attribute) for the collection. It can be any information that you wish to collect from your user. Note that this method takes in the field and its value as a key-value pair.
  • In this example, we collected the email, first name, and last name of the user.
  • The firebase.auth.signInWithEmailAndPassword()method validate a user through Firebase Authentication
  • Note that you can only get the user’s UID since it does not look up any information from the Cloud Firestore “users” collection.
  • If you would like to retrieve a customized field in the collection, please refer to the “Dashboard.js” on Step 8
  • For users that have not set up an account with the app, the “Sign Up” button will take them to the “Sign Up” screen. Once signed up, they will be diverted to the “Dashboard” screen.
  • Users that have an account but are not signed in can do so by clicking the “Sign In” button. They will be redirected to the “Dashboard”, where they will see their name and the “Sign out” button.

Conclusion

While I am reading through the documentation, the greatest challenge is which application I should follow as there are different libraries for different things. Just making sure you are using the libraries that are compatible with Expo. Not all the React Native libraries are supported in the Expo environment.

The Startup

Get smarter at building your thing. Join The Startup’s +745K followers.