Firebase Authentication

Setting Up Authentication in Sign Up + Log In Screens

For user registration, login, and sign out, the team decided to use Authentication from Firebase to authenticate the users using email and password. We configured our Firebase Auth set up along with our Firestore in our config.firebase.ts file/ as follow:

      import firebase from "firebase/compat/app"
      import "firebase/compat/auth"
      
      const firebaseConfig: Config = {
          apiKey: ...,
          authDomain: ...,
          projectId: ...,
          storageBucket: ...,
          messagingSenderId: ...,
          appId: ...,
          measurementId: ...,
      }

      export const auth = firebase.auth();

Sign Up

• Creating a User on SignUpScreen.tsx by using { auth, db, doc, setDoc } imported from our firebase config file.

      import db, { auth } from "../../config/firebase";
      import { doc, setDoc } from "firebase/firestore";
  

  • Our async handleSignUp function, it uses Firebase Auth's built-in "createUserWithEmailAndPassword()" method that takes the user-supplied email and password as parameters that have been stored in state, and then creates a user inside Firebase Authorization with the given email and password.

      const userCredential = await auth.createUserWithEmailAndPassword(
            email,
            password
      );
    

  • Once the user has been created, a "user" variable is returned from Firebase Auth and declared with userCredentials.user.

  • This Firebase Auth user is then linked to our Firestore database with the Firestore { doc, setDoc } methods as follows:

      await setDoc(doc(db, "users", user.uid), {email: email, password: password});
    

  This creates a new document out of the email and password object, named with the "user.id" from Firebase Auth, and inserts it into the "users" collection, where the rest of the user's account data can be kept as it gets filled out.

UID: auto populated User ID by Firestore Authentication.

• Once a User has signed up, the useEffect hook will check for the user's credentials with auth.onAuthStateChanged() to validate that if User has been authenticated through Firebase Auth, then will navigate to the next screen, which in this case is the "HomePage".

      useEffect(() => {
        const unsubscribe = auth.onAuthStateChanged((user) => {
          if (user) {
            navigation.replace("HomePage");
          }
        });
        return unsubscribe;
      }, []);
  

Log In

• Logging In as a User on LogInScreen.tsx by using {auth} imported from our firebase config file.

      import { auth } from "../../config/firebase";
  

  • Our async handleLogin function uses Firebase Auth's built-in "signInWithEmailAndPassword()" method that takes the user-supplied email and password as parameters for validation.

    const userCredential = await auth.signInWithEmailAndPassword(
      email,
      password
    );
    const user = userCredential.user;
    

• Once a User has signed in, the useEffect hook will check for the User's credentials with auth.onAuthStateChanged() to validate that if User has been authenticated through Firebase Auth, then the User will be sent to the next screen, which will be the "HomePage".

     useEffect(() => {
       const unsubscribe = auth.onAuthStateChanged((user) => {
         if (user) {
           navigation.replace("HomePage");
         }
       });
       return unsubscribe;
     }, []);
  

Sign Out

• Signing out as a User on UserProfileScreen.tsx by using {auth} imported from our firebase config file.

  • Our async handleSignOut function uses Firebase Auth's built-in "signOut()" method.

    const user = await auth.signOut();
    

• Once a User has signed out, the User will be sent to the "LogInScreen".

Sources

Firebase | Authentication