Auth

interact with authentication servers from the client

Google manages the authentication servers. As developers we focus on interacting with those servers from the client.

auth object

We get and keep a reference to the auth object as we use it in various methods and it holds the currentUser.

const auth = getAuth(app)

currentUser is null when the client SDK is initializing, or when the user is signed-out.

auth.currentUser // User | null

User type

uid is the most important property of currentUser. Other properties are optional.

uid
email
phoneNumber
displayName

register, login, logout, reset password

register

createUserWithEmailAndPassword(auth, email, password)

sign-in

signInWithEmailAndPassword(auth, email, password)

sign-out

signOut(auth)

send password reset email

sendPasswordResetEmail(auth, email)

patterns

async wrapper function

async function signIn() {
    try {
        const userCredential = await createUserWithEmailAndPassword(auth, email, password)
        console.log("userCredential:", userCredential)
        console.log("user ID:", userCredential.user.uid)
    } catch (error) {
        console.log(error)
    }
}

then catch finally version

createUserWithEmailAndPassword(auth, email, password)
    .catch((error) => alert(error.message))
    .finally(() => setIsLoading(false))

react to authentication state changes

We call onAuthStateChanged to register a callback. Each time firebase runs our callback, it provides us with the user object.

The state changes when:

• the user registers (sign-up)

• the user logs in (sign-in)

• the user logs out (sign-out)

the login may occur in two ways:

• the user fills the login form and submits it successfully
• the user is recognized by the SDK and is logged in automatically

onAuthStateChanged(auth, (user) => {
    const isAuthenticated = Boolean(user)
    // setIsAuthenticated(isAuthenticated)
    // setIsLoading(false)
    // const userID = user.uid
})

In a React app, we may store such state in a state variable such as isAuthenticated.

We only display the authenticated area when isAuthenticated is true.

At page launch, the state is not determined. As such, we may have a distinct state variable such as isLoading that tracks this indetermination. It defaults to true and we set it to false on the first authentication event.

start:

• isLoading -> true
• isAuthenticated -> false

first auth event:

• isLoading -> false
• isAuthenticated -> true or false