Authentication

Auth is managed by Firebase Auth system

Sign up

Using the firebase createUserWithEmailAndPassword built in method to Sign up a user.
We also update the user displayName after registering the user.

import { createUserWithEmailAndPassword, updateProfile } from "firebase/auth";
const authFB = getAuth();

  const handleSignUp = async () => {
    let currentUser;
    try {
      const result = await createUserWithEmailAndPassword(
        authFB,
        email,
        password
      );
      currentUser = result;
      await updateProfile(currentUser.user, { displayName: username});
    } catch (error) {
      const err = error as FirebaseError;
      if (currentUser) {
        toast({
          description: "The Account was created but the username was not set",
          status: "warning",
          duration: 9000,
          isClosable: true,
        });
      } else {
       // set error
      }
    }
  };

Sign in

Using the firebase signInWithEmailAndPassword built in method to Sign in the user

import { signInWithEmailAndPassword } from "firebase/auth";

const handleSignIn = async () => {
  setStatus({ hasError: false, isLoading: true, statusText: "" });
  try {
    const result = await signInWithEmailAndPassword(authFB, formik.values.SignInEmail, formik.values.SignInPassword);
    toast({
      description: "Login Successful",
      status: "success",
      duration: 2000,
      isClosable: true,
    });
    if (result) setStatus({ hasError: false, isLoading: false, statusText: "Logged In!" });
  } catch (error) {
    setStatus({ hasError: true, isLoading: false, statusText: "Invalid Credentials" });
  }
};

Sign out

Using the firebase signOut built in method to Sign out the user

import { signOut } from "firebase/auth";

const signOutHandler = () => {
  toggleSignin(false);
  signOut(authFB);
  toast({
    description: "Logged Out",
    status: "error",
    duration: 2000,
    isClosable: true,
  });
  navigate("/"); //Go back to landing page
};

Auth State

The Auth State is managed by React Context API and we are exporting a custom hook to get the current Auth State.

import { User } from "firebase/auth";
import { createContext, useState, useEffect, useContext } from "react";
import { authFB } from "../firebase";

const AuthContext = createContext<User | null>(null);
export const useAuth = () => useContext(AuthContext);

export const AuthProvider = ({ children }: { children: JSX.Element | JSX.Element[] }) => {
  const [loading, setLoading] = useState<boolean>(false);
  const [user, setUser] = useState<User | null>(null!);
  useEffect(() => {
    authFB.onAuthStateChanged((user) => {
      if (user) {
        setUser(user);
        return;
      }
      setUser(user);
      setLoading(false);
    });
  }, [user]);

  return <AuthContext.Provider value={user}>{!loading && children}</AuthContext.Provider>;
};