How to build a custom logout hook in React.js (Firebase auth)
- #Firebase
- #Firestore
- #React.js
- #Auth
- #Custom-Hook
call-n
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) βπ.