Logo for the site

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

  • #Firebase
  • #Firestore
  • #React.js
  • #Auth
  • #Custom-Hook
call-n

call-n

1 min read
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

/src/hooks/useLogout.js
// 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) β†πŸ˜.


call-n

Written by call-n

An engineer with a some years of experience, specializing in frontend systems like React.js and Next.js. Very intrested in the backend too ☺️

call-n

Passionate software engineer trying to learn as much about code and design

Links

All rights reserved Β© calo.dev 2022