How to build a custom logout hook in React.js (Firebase auth)

This article shows how to code a custom hook for loggin out a user in Firebase with React.js. Code is found on GitHub for reference.

Click here to get to final solution

You need to configure your Firebase `config.js` file before you can procced with this article, How to setup authentication in Firebase if that's the case.

How to build custom logout hook

First of start by adding a new file to the `/hook` directory called `useLogout.js`. Add the following code for a code template and the imports.

// import the firebase functions
import { auth } from '../Firebase/config'
import { signOut } from "firebase/auth";

export const useLogout = () => {
    // rest of logic for hook
}

`auth` in this context is a token that every logged in user gets. When we want to do something to their session/token we call the auth object.

`signOut` takes one argument, the `auth` object. It has all the necessary information that Firebase needs to `logout` the user from their session.

As you can image this custom hook is nothing complicated.

Finished code

// import the firebase functions
import { auth } from '../Firebase/config'
import { signOut } from "firebase/auth";

export const useLogout = () => {

    const logout = () => {
        signOut(auth)
            .then(() => {
                console.log('User signed out')
            })
            .catch((err) => {
                console.log(err.message)
            })
    }

    return { logout }
}

We just call the `signOut` function from Firebase and send thru the `auth` object and it's finished.

Well done, this article wasn't to much text as the one before. If you want to continue to How to build a custom Login hook in React.js (Firebase auth) ←😁.