The ability to identify users is vital for maintaining the security of any applications. Equally important is the code that\u2019s written to manage user identities, particularly when it comes to avoiding loopholes for unauthorized access to data held by an application. Writing authentication code without a framework or libraries available can take a ton of time to do right \u2014 not to mention the ongoing maintainance of that custom code.<\/p>\n\n\n\n

GitHub Repo<\/a><\/div>\n<\/div>\n\n\n\n

To follow along with this tutorial, you should be familiar with React, React hooks, and Firebase version 8. You should also have a Google account and Node installed on your machine.<\/p>\n\n\n

Table of Contents<\/h2>\n
\n
Setting up Firebase<\/a>\n\n<\/li>\n
Cloning and setting up the starter repo<\/a>\n\n<\/li>\n
Integrating Firebase into our React app<\/a>\n\n<\/li>\n
Creating User Registration functionality<\/a>\n\n<\/li>\n
Managing User State with React Context API<\/a>\n\n<\/li>\n
Send a verification email to a registered user<\/a>\n\n<\/li>\n
Working on the user profile page<\/a>\n\n<\/li>\n
Creating a Private Route for the Profile component<\/a>\n\n<\/li>\n
Creating login functionality<\/a>\n\n<\/li>\n
Conclusion<\/a>\n\n<\/li>\n
References<\/a>\n<\/li><\/ul>\n\n
Setting up Firebase<\/h3>\n\n\n
Before we start using Firebase for our registration and authentication requirements, we have to first set up our Firebase project and also the authentication method we\u2019re using.<\/p>\n\n\n\n
To add a project, make sure you are logged into your Google account, then navigate to the Firebase console<\/a> and click on Add project<\/strong>. From there, give the project a name (I\u2019m using \u201cFirebase-user-reg-auth\u201d) and we should be all set to continue.<\/p>\n\n\n\n
$\"\"$ <\/figure>\n\n\n\n
You may be prompted to enable Google Analytics at some point. There\u2019s no need for it for this tutorial, so feel free to skip that step.<\/p>\n\n\n\n
$\"\"$ <\/figure>\n\n\n\n
Firebase has various authentication methods for both mobile and web, but before we start using any of them, we have to first enable it on the Firebase Authentication page. From the sidebar menu, click on the Authentication<\/strong> icon, then, on the next page, click on Get started<\/strong>.<\/p>\n\n\n\n
$\"\"$ <\/figure>\n\n\n\n
We are going to use Email\/Password authentication. Click on it and we will be prompted with a screen to enable it, which is exactly what we want to do.<\/p>\n\n\n\n
$\"\"$ <\/figure>\n\n\n
Cloning and setting up the starter repo<\/h3>\n\n\n
I have already created a simple template we can use for this tutorial so that we can focus specifically on learning how to implement the functionalities. So what we need to do now is clone the GitHub repo.<\/p>\n\n\n\n
Fire up your terminal. Here\u2019s what we can run from the command line:<\/p>\n\n\n\n
`git clone -b starter https:\/\/github.com\/Tammibriggs\/Firebase_user_auth.git\n\ncd Firebase_user_auth\n\nnpm install<\/code><\/pre>\n\n\n\nI have also included Firebase version 9 in the dependency object of the package.json<\/code> file. So, by running the npm install<\/code> command, Firebase v9 \u2014 along with all other dependencies \u2014 will be installed.<\/p>\n\n\n\n With done that, let’s start the app with npm start<\/code>!<\/p>\n\n\n`
`Integrating Firebase into our React app<\/h3>\n\n\nTo integrate Firebase, we need to first get the web configuration object and then use it to initialize Firebase in our React app. Go over to the Firebase project page and we will see a set of options as icons like this:<\/p>\n\n\n\n`
$\"\"$ <\/figure>\n\n\n\n
Click on the web (`<\/><\/code>) icon to configure our Firebase project for the web, and we will see a page like this:<\/p>\n\n\n\n`
<\/figure>\n\n\n\nEnter firebase-user-auth<\/strong> as the name of the web app. After that, click on the Register app<\/strong> button, which takes us to the next step where our firebaseConfig<\/code> object is provided.<\/p>\n\n\n\n <\/figure>\n\n\n\nCopy the config to the clipboard as we will need it later on to initialize Firebase. Then click on the Continue to console<\/strong> button to complete the process.<\/p>\n\n\n\n Now, let’s initialize Firebase and Firebase Authentication so that we can start using them in our app. In the src<\/code> directory of our React app, create a firebase.js<\/code> file and add the following imports:<\/p>\n\n\n\n \/\/ src\/firebase.js\nimport { initializeApp } from 'firebase\/app'\nimport {getAuth} from 'firebase\/auth'<\/code><\/pre>\n\n\n\nNow, paste the config we copied earlier after the imports and add the following lines of code to initialize Firebase and Firebase Authentication.<\/p>\n\n\n\n \/\/ src\/firebase.js\nconst app = initializeApp(firebaseConfig)\nconst auth = getAuth(app)\n\nexport {auth}<\/code><\/pre>\n\n\n\nOur firebase.js<\/code> file should now look something like this:<\/p>\n\n\n\n \/\/ src.firebase.js\nimport { initializeApp } from \"firebase\/app\"\nimport { getAuth } from \"firebase\/auth\"\n\nconst firebaseConfig = {\n apiKey: \"API_KEY\",\n authDomain: \"AUTH_DOMAIN\",\n projectId: \"PROJECT_ID\",\n storageBucket: \"STORAGE_BUCKET\",\n messagingSenderId: \"MESSAGING_SENDER_ID\",\n appId: \"APP_ID\"\n}\n\n\/\/ Initialize Firebase and Firebase Authentication\nconst app = initializeApp(firebaseConfig)\nconst auth = getAuth(app)\nexport {auth}<\/code><\/pre>\n\n\n\nNext up, we\u2019re going to cover how to use the ready-to-use functions provided by Firebase to add registration, email verification, and login functionality to the template we cloned.<\/p>\n\n\n Creating User Registration functionality<\/h3>\n\n\nIn Firebase version 9, we can build functionality for user registration with the createUserWithEmailAndPassword<\/code> function. This function takes three arguments:<\/p>\n\n\n\n auth instance\/service<\/li> email<\/li> password<\/li><\/ul>\n\n\n\nServices are always passed as the first arguments in version 9. In our case, it’s the auth service.<\/p>\n\n\n\n To create this functionality, we will be working with the Register.js<\/code> file in the src<\/code> directory of our cloned template. What I did in this file is create three form fields \u2014 email, password, and confirm password \u2014 and input is controlled by the state. Now, let\u2019s get to business.<\/p>\n\n\n\n Let\u2019s start by adding a function that validates the password and confirm password inputs, checking if they are not empty and are the same: Add the following lines of code after the states in the Register<\/code> component:<\/p>\n\n\n\n \/\/ src\/Register.js\n\/\/ ...\n\nconst validatePassword = () => {\n let isValid = true\n if (password !== '' && confirmPassword !== ''){\n if (password !== confirmPassword) {\n isValid = false\n setError('Passwords does not match')\n }\n }\n return isValid\n}\n\n\/\/ ...<\/code><\/pre>\n\n\n\nIn the above function, we return an isValid<\/code> variable which can return either true<\/strong> or false<\/strong> based on the validity of the passwords. Later on, we will use the value of this variable to create a condition where the Firebase function responsible for registering users will only be invoked if isValid<\/code> is true.<\/p>\n\n\n\n To create the registration functionality, let’s start by making the necessary imports to the Register.js<\/code> file:<\/p>\n\n\n\n \/\/ src\/Register.js\nimport {auth} from '.\/firebase'\nimport {createUserWithEmailAndPassword} from 'firebase\/auth'<\/code><\/pre>\n\n\n\nNow, add the following lines of code after the validatePassword<\/code> password function:<\/p>\n\n\n\n \/\/ src\/Register.js\n\/\/ ...\n\nconst register = e => {\n e.preventDefault()\n setError('')\n if(validatePassword()) {\n \/\/ Create a new user with email and password using firebase\n createUserWithEmailAndPassword(auth, email, password)\n .then((res) => {\n console.log(res.user)\n })\n .catch(err => setError(err.message))\n }\n setEmail('')\n setPassword('')\n setConfirmPassword('')\n}\n\n\/\/ ...<\/code><\/pre>\n\n\n\nIn the above function, we set a condition to call the createUserWithEmailAndPassword<\/code> function only when the value returning from validatePassword<\/code> is true<\/strong>.<\/p>\n\n\n\n For this to start working, let’s call the register<\/code> function when the form is submitted. We can do this by adding an onSubmit<\/code> event to the form. Modify the opening tag of the registration_form<\/code> to look like this:<\/p>\n\n\n\n \/\/ src\/Register.js\n<form onSubmit={register} name='registration_form'><\/code><\/pre>\n\n\n\nWith this, we can now register a new user on our site. To test this by going over to http:\/\/localhost:3000\/register<\/code> in the browser, filling in the form, then clicking on the Register<\/strong> button.<\/p>\n\n\n\n <\/figure>\n\n\n\nAfter clicking the Register<\/strong> button, if we open the browser\u2019s console we will see details of the newly registered user.<\/p>\n\n\n Managing User State with React Context API<\/h3>\n\n\nContext API<\/a> is a way to share data with components at any level of the React component tree without having to pass it down as props<\/a>. Since a user might be required by a different component in the tree, using the Context API is great for managing the user state.<\/p>\n\n\n\n Before we start using the Context API, there are a few things we need to set up:<\/p>\n\n\n\n Create a context object using the createContext()<\/code> method<\/li> Pass the components we want to share the user state with as children of Context.Provider<\/a><\/li> Pass the value we want the children\/consuming component to access as props to Context.Provider<\/code><\/li><\/ul>\n\n\n\nLet\u2019s get to it. In the src<\/code> directory, create an AuthContext.js<\/code> file and add the following lines of code to it:<\/p>\n\n\n\n\/\/ src\/AuthContext.js\nimport React, {useContext} from 'react'\n\nconst AuthContext = React.createContext()\n\nexport function AuthProvider({children, value}) {\n return (\n <AuthContext.Provider value={value}>\n {children}\n <\/AuthContext.Provider>\n )\n}\n\nexport function useAuthValue(){\n return useContext(AuthContext)\n}<\/code><\/pre>\n\n\n\nIn the above code, we created a context called AuthContext<\/code> along with that we also created two other functions that will allow us to easily use the Context API which is AuthProvider<\/code> and useAuthValue<\/code>.<\/p>\n\n\n\n The AuthProvider<\/code> function allows us to share the value of the user\u2019s state to all the children of AuthContext.Provider<\/code> while useAuthValue<\/code> allows us to easily access the value passed to AuthContext.Provider<\/code>.<\/p>\n\n\n\n Now, to provide the children and value props to AuthProvider<\/code>, modify the App.js<\/code> file to look something like this:<\/p>\n\n\n\n\/\/ src\/App.js\n\/\/ ...\nimport {useState} from 'react'\nimport {AuthProvider} from '.\/AuthContext'\n\nfunction App() {\n const [currentUser, setCurrentUser] = useState(null)\n\n return (\n <Router>\n <AuthProvider value={{currentUser}}>\n <Switch>\n ...\n <\/Switch>\n <\/AuthProvider>\n <\/Router>\n );\n}\n\nexport default App;<\/code><\/pre>\n\n\n\nHere, we\u2019re wrapping AuthProvider<\/code> around the components rendered by App<\/code>. This way, the currentUser<\/code> value supplied to AuthProvider<\/code> will be available for use by all the components in our app except the App<\/code> component.<\/p>\n\n\n\n That\u2019s it as far as setting up the Context API! To use it, we have to import the useAuthValue<\/code> function and invoke it in any of the child components of AuthProvider<\/code>, like Login<\/code>. The code looks something like this:<\/p>\n\n\n\nimport { useAuthValue } from \".\/AuthContext\"\n\nfunction childOfAuthProvider(){\n const {currentUser} = useAuthValue()\n console.log(currentUser)\n\n return ...\n}<\/code><\/pre>\n\n\n\nRight now, currentUser<\/code> will always be null<\/code> because we are not setting its value to anything. To set its value, we need to first get the current user from Firebase which can be done either by using the auth instance that was initialized in our firebase.js<\/code> file (auth.currentUser<\/code>), or the onAuthStateChanged<\/code> function, which actually happens to be the recommended way to get the current user. That way, we ensure that the Auth object isn’t in an intermediate state \u2014 such as initialization \u2014 when we get the current user.<\/p>\n\n\n\n In the App.js<\/code> file, add a useEffect<\/code> import along with useState<\/code> and also add the following imports:<\/p>\n\n\n\n\/\/ src\/App.js\nimport {useState, useEffect} from 'react'\nimport {auth} from '.\/firebase'\nimport {onAuthStateChanged} from 'firebase\/auth'<\/code><\/pre>\n\n\n\nNow add the following line of code after the currentUser<\/code> state in the App component:<\/p>\n\n\n\n\/\/ src\/App.js\n\/\/ ...\n\nuseEffect(() => {\n onAuthStateChanged(auth, (user) => {\n setCurrentUser(user)\n })\n}, [])\n\n\/\/ ...<\/code><\/pre>\n\n\n\nIn the above code, we are getting the current user and setting it in the state when the component renders. Now when we register a user the currentUser<\/code> state will be set with an object containing the user\u2019s info.<\/p>\n\n\nSend a verification email to a registered user<\/h3>\n\n\nOnce a user is registered, we want them to verify their email address before being able to access the homepage of our site. We can use the sendEmailVerification<\/code> function for this. It takes only one argument which is the object of the currently registered user. When invoked, Firebase sends an email to the registered user’s email address with a link where the user can verify their email.<\/p>\n\n\n\n Let\u2019s head over to the Register.js<\/code> file and modify the Link<\/code> and createUserWithEmailAndPassword<\/code> import to look like this:<\/p>\n\n\n\n\/\/ src\/Register.js\nimport {useHistory, Link} from 'react-router-dom'\nimport {createUserWithEmailAndPassword, sendEmailVerification} from 'firebase\/auth'<\/code><\/pre>\n\n\n\nIn the above code, we have also imported the useHistory<\/code> hook. This will help us access and manipulate the browser’s history which, in short, means we can use it to switch between pages in our app. But before we can use it we need to call it, so let\u2019s add the following line of code after the error<\/code> state:<\/p>\n\n\n\n\/\/ src\/Register.js\n\/\/ ...\nconst history = useHistory()\n\n\/\/ ...<\/code><\/pre>\n\n\n\nNow, modify the .then<\/code> method of the createUserWithEmailAndPassword<\/code> function to look like this:<\/p>\n\n\n\n \/\/ src\/Register.js\n\/\/ ...\n.then(() => {\n sendEmailVerification(auth.currentUser)\n .then(() => {\n history.push('\/verify-email')\n }).catch((err) => alert(err.message))\n})\n\/\/ ...<\/code><\/pre>\n\n\n\nWhat\u2019s happening here is that when a user registers a valid email address, they will be sent a verification email, then taken to the verify-email<\/strong> page.<\/p>\n\n\n\n <\/figure>\n\n\n\nThere are several things we need to do on this page:<\/p>\n\n\n\n Display the user’s email after the part that says \u201cA verification email has been sent to:\u201d<\/strong><\/li> Make the Resend Email<\/strong> button work<\/li> Create functionality for disabling the Resend Email<\/strong> button for 60 seconds after it is clicked<\/li> Take the user to their profile page once the email has been verified<\/li><\/ul>\n\n\n\nWe will start by displaying the registered user\u2019s email. This calls for the use of the AuthContext<\/code> we created earlier. In the VerifyEmail.js<\/code> file, add the following import:<\/p>\n\n\n\n \/\/ src\/VerifyEmail.js\nimport {useAuthValue} from '.\/AuthContext'<\/code><\/pre>\n\n\n\nThen, add the following code before the return<\/code> statement in the VerifyEmail<\/code> component:<\/p>\n\n\n\n \/\/ src\/VerifyEmail.js\nconst {currentUser} = useAuthValue()<\/code><\/pre>\n\n\n\nNow, to display the email, add the following code after the <br\/><\/code> tag in the return<\/code> statement.<\/p>\n\n\n\n \/\/ src\/VerifyEmail.js\n\/\/ ...\n<span>{currentUser?.email}<\/span>\n\/\/ ...<\/code><\/pre>\n\n\n\nIn the above code, we are using optional chaining to get the user’s email so that when the email is null our code will throw no errors.<\/p>\n\n\n\n Now, when we refresh the verify-email<\/strong> page, we should see the email of the registered user.<\/p>\n\n\n\n Let\u2019s move to the next thing which is making the Resend Email<\/strong> button work. First, let’s make the necessary imports. Add the following imports to the VerifyEmail.js<\/code> file:<\/p>\n\n\n\n \/\/ src\/VerifyEmail.js\nimport {useState} from 'react'\nimport {auth} from '.\/firebase'\nimport {sendEmailVerification} from 'firebase\/auth'<\/code><\/pre>\n\n\n\nNow, let’s add a state that will be responsible for disabling and enabling the Resend Email<\/strong> button based on whether or not the verification email has been sent. This code goes after currentUser<\/code> in the VerifyEmail<\/code> component:<\/p>\n\n\n\n \/\/ src\/VerifyEmail.js\nconst [buttonDisabled, setButtonDisabled] = useState(false)<\/code><\/pre>\n\n\n\nFor the function that handles resending the verification email and disabling\/enabling the button, we need this after the buttonDisabled<\/code> state:<\/p>\n\n\n\n \/\/ src\/VerifyEmail.js\n\/\/ ...\n\nconst resendEmailVerification = () => {\n setButtonDisabled(true)\n sendEmailVerification(auth.currentUser)\n .then(() => {\n setButtonDisabled(false)\n }).catch((err) => {\n alert(err.message)\n setButtonDisabled(false)\n })\n}\n\n\/\/ ...<\/code><\/pre>\n\n\n\nNext, in the return<\/code> statement, modify the Resend Email<\/strong> button like this:<\/p>\n\n\n\n \/\/ ...\n<button \n onClick={resendEmailVerification}\n disabled={buttonDisabled}\n >Resend Email<\/button>\n\/\/ ...<\/code><\/pre>\n\n\n\nNow, if we go over to the verify-email page and click the button, another email will be sent to us. But there is a problem with how we created this functionality because if we try to click the button again in less than a minute, we get an error from Firebase saying we sent too many requests. This is because Firebase has a one minute interval before being able to send another email to the same address. That\u2019s the net thing we need to address.<\/p>\n\n\n\n What we need to do is make the button stay disabled for 60 seconds (or more) after a verification email is sent. We can enhance the user experience a bit by displaying a countdown timer in Resend Email<\/strong> button to let the user know the button is only temporarily disabled.<\/p>\n\n\n\n In the VerifyEmail.js<\/code> file, add a useEffect<\/code> import:<\/p>\n\n\n\n import {useState, useEffect} from 'react'<\/code><\/pre>\n\n\n\nNext, add the following after the buttonDisabled<\/code> state:<\/p>\n\n\n\n \/\/ src\/VerifyEmail.js\nconst [time, setTime] = useState(60)\nconst [timeActive, setTimeActive] = useState(false)<\/code><\/pre>\n\n\n\nIn the above code, we have created a time<\/code> state which will be used for the 60-second countdown and also a timeActive<\/code> state which will be used to control when the count down will start.<\/p>\n\n\n\n Add the following lines of code after the states we just created:<\/p>\n\n\n\n \/\/ src\/VerifyEmail.js\n\/\/ ...\n\nuseEffect(() => {\n let interval = null\n if(timeActive && time !== 0 ){\n interval = setInterval(() => {\n setTime((time) => time - 1)\n }, 1000)\n }else if(time === 0){\n setTimeActive(false)\n setTime(60)\n clearInterval(interval)\n }\n return () => clearInterval(interval);\n}, [timeActive, time])\n\n\/\/ ...<\/code><\/pre>\n\n\n\nIn the above code, we created a useEffect<\/code> hook that only runs when the timeActive<\/code> or time<\/code> state changes. In this hook, we are decreasing the previous value of the time<\/code> state by one every second using the setInterval<\/code> method, then we are stopping the decrementing of the time<\/code> state when its value equals zero.<\/p>\n\n\n\n Since the useEffect<\/code> hook is dependent on the timeActive<\/code> and time<\/code> state, one of these states has to change before the time count down can start. Changing the time<\/code> state is not an option because the countdown has to start only when a verification email has been sent. So, instead, we need to change the timeActive<\/code> state.<\/p>\n\n\n\n In the resendEmailVerification<\/code> function, modify the .then<\/code> method of sendEmailVerification<\/code> to look like this:<\/p>\n\n\n\n \/\/ src\/VerifyEmail.js\n\/\/ ...\n.then(() => {\n setButtonDisabled(false)\n setTimeActive(true)\n})\n\/\/ ...<\/code><\/pre>\n\n\n\nNow, when an email is sent, the timeActive<\/code> state will change to true<\/strong> and the count down will start. In the code above we need to change how we are disabling the button because, when the count down is active, we want the disabled button.<\/p>\n\n\n\n We will do that shortly, but right now, let’s make the countdown timer visible to the user. Modify the Resend Email<\/strong> button to look like this:<\/p>\n\n\n\n \/\/ src\/VerifyEmail.js\n<button \n onClick={resendEmailVerification}\n disabled={buttonDisabled}\n>Resend Email {timeActive && time}<\/button><\/code><\/pre>\n\n\n\nTo keep the button in a disabled state while the countdown is active, let\u2019s modify the disabled<\/code> attribute of the button to look like this:<\/p>\n\n\n\n disabled={timeActive}<\/code><\/pre>\n\n\n\nWith this, the button will be disabled for a minute when a verification email is sent. Now we can go ahead and remove the buttonDisabled<\/code> state from our code.<\/p>\n\n\n\n Although this functionality works, there is still one problem with how we implemented it: when a user registers and is taken to the verify-email<\/strong> page when they have not received an email yet, they may try to click the Resend Email<\/strong> button, and if they do that in less than a minute, Firebase will error out again because we\u2019ve made too many requests.<\/p>\n\n\n\n To fix this, we need to make the Resend Email<\/strong> button disabled for 60 seconds after<\/em> an email is sent to the newly registered user. This means we need a way to change the timeActive<\/code> state within the Register<\/code> component. We can also use the Context API for this. It will allow us to globally manipulate and access the timeActive<\/code> state.<\/p>\n\n\n\n Let\u2019s make a few modifications to our code to make things work properly. In the VerifyEmail<\/code> component, cut the timeActive<\/code> state and paste it into the App<\/code> component after the currentUser<\/code> state.<\/p>\n\n\n\n \/\/ src\/App.js\nfunction App() {\n \/\/ ...\n const [timeActive, setTimeActive] = useState(false)\n\n \/\/ ...<\/code><\/pre>\n\n\n\nNext, put timeActive<\/code> and setTimeActive<\/code> inside the object of AuthProvider<\/code> value prop. It should look like this:<\/p>\n\n\n\n \/\/ src\/App.js\n\/\/ ...\n<AuthProvider value={{currentUser, timeActive, setTimeActive}}>\n\/\/ ...\n<\/code><\/pre>\n\n\n\nNow we can access timeActive<\/code> and setTimeActive<\/code> within the children of AuthProvider<\/code>. To fix the error in our code, go to the VerifyEmail.js<\/code> file and de-structure both timeActive<\/code> and setTimeActive<\/code> from useAuthProvider<\/code>:<\/p>\n\n\n\n \/\/ src\/VerifyEmail.js\nconst {timeActive, setTimeActive} = useAuthValue()<\/code><\/pre>\n\n\n\nNow, to change the timeActive<\/code> state after a verification email has been sent to the registered user, add the following import in the Register.js<\/code> file:<\/p>\n\n\n\n \/\/ src\/Register.js\nimport {useAuthValue} from '.\/AuthContext'<\/code><\/pre>\n\n\n\nNext, de-structure setTimeActive<\/code> from useAuthValue<\/code> with this snippet among the other states in the Register<\/code> component:<\/p>\n\n\n\n \/\/ src\/Register.js\nconst {setTimeActive} = useAuthValue()<\/code><\/pre>\n\n\n\nFinally, in the register<\/code> function, set the timeActive<\/code> state with the .then<\/code> the method of sendEmailVerification<\/code>:<\/p>\n\n\n\n \/\/ src\/Register.js\n\/\/ ...\n.then(() => {\n setTimeActive(true)\n history.push('\/verify-email')\n})\n\/\/ ...<\/code><\/pre>\n\n\n\nWith this, a user will be able to send a verification email without getting any errors from Firebase.<\/p>\n\n\n\n The last thing to fix concerning user verification is to take the user to their profile page after they have verified their email. To do this, we will use a reload<\/code> function in the currentUser<\/code> object. It allows us to reload the user object coming from Firebase, that way we will know when something has changed.<\/p>\n\n\n\n First, let\u2019s make the needed imports. In the VerifyEmail.js<\/code> file, let\u2019s add this:<\/p>\n\n\n\n \/\/ src\/VerifyEmail.js\nimport {useHistory} from 'react-router-dom'<\/code><\/pre>\n\n\n\nWe are importing useHistory<\/code> so that we can use to navigate the user to the profile page. Next, add the following line of code after the states:<\/p>\n\n\n\n \/\/ src\/VerifyEmail.js\nconst history = useHistory()<\/code><\/pre>\n\n\n\nAnd, finally, add the following lines of code after the history<\/code> variable:<\/p>\n\n\n\n \/\/ src\/VerifyEmail.js\n\/\/ ...\n\nuseEffect(() => {\n const interval = setInterval(() => {\n currentUser?.reload()\n .then(() => {\n if(currentUser?.emailVerified){\n clearInterval(interval)\n history.push('\/')\n }\n })\n .catch((err) => {\n alert(err.message)\n })\n }, 1000)\n}, [history, currentUser])\n\n\/\/ ...<\/code><\/pre>\n\n\n\nIn the above code, we are running the reload<\/code> function every one second until the user\u2019s email has been verified, and, if it has, we are navigating the user to their profile page.<\/p>\n\n\n\n To test this, let\u2019s verify our email by following the instructions in the email sent from Firebase. If all is good, we will be automatically taken to our profile page.<\/p>\n\n\n\n <\/figure>\n\n\n\nRight now the profile page is showing no user data and he Sign Out<\/strong> link does not work. That\u2019s ur next task.<\/p>\n\n\n Working on the user profile page<\/h3>\n\n\nLet\u2019s start by displaying the Email<\/strong> and Email verified<\/strong> values. For this, we will make use of the currentUser<\/code> state in AuthContext<\/code>. What we need to do is import useAuthValue<\/code>, de-structure currentUser<\/code> from it, and then display the Email<\/strong> and Email verified<\/strong> value from the user object.<\/p>\n\n\n\n Here is what the Profile.js<\/code> file should look like:<\/p>\n\n\n\n \/\/ src\/Profile.js\nimport '.\/profile.css'\nimport {useAuthValue} from '.\/AuthContext'\n\nfunction Profile() {\n const {currentUser} = useAuthValue()\n\n return (\n <div className='center'>\n <div className='profile'>\n <h1>Profile<\/h1>\n <p><strong>Email: <\/strong>{currentUser?.email}<\/p>\n <p>\n <strong>Email verified: <\/strong>\n {`${currentUser?.emailVerified}`}\n <\/p>\n <span>Sign Out<\/span>\n <\/div>\n <\/div>\n )\n}\n\nexport default Profile<\/code><\/pre>\n\n\n\nWith this, the Email<\/strong> and Email verified<\/strong> value should now be displayed on our profile page.<\/p>\n\n\n\n To get the sign out<\/strong> functionality working, we will use the signOut<\/code> function. It takes only one argument, which is the auth<\/code> instance. So, in Profile.js<\/code>. let\u2019s add those imports.<\/p>\n\n\n\n \/\/ src\/Profile.js\nimport { signOut } from 'firebase\/auth' \nimport { auth } from '.\/firebase'<\/code><\/pre>\n\n\n\nNow, in the return<\/code> statement, modify the <span><\/code> that contains \u201cSign Out\u201d so that is calls the signOut<\/code> function when clicked:<\/p>\n\n\n\n \/\/ src\/Profile.js\n\/\/ ...\n<span onClick={() => signOut(auth)}>Sign Out<\/span>\n\/\/ ...<\/code><\/pre>\n\n\nCreating a Private Route for the Profile component<\/h3>\n\n\nRight now, even with an unverified email address, a user can access the profile page. We don\u2019t want that. Unverified users should be redirected to the login page when they try to access the profile. This is where private routes come in.<\/p>\n\n\n\n In the src<\/code> directory, let\u2019s create a new PrivateRoute.js<\/code> file and add the following code to it:<\/p>\n\n\n\n \/\/ src\/PrivateRoute.js\nimport {Route, Redirect} from 'react-router-dom'\nimport {useAuthValue} from '.\/AuthContext'\n\nexport default function PrivateRoute({component:Component, ...rest}) {\n const {currentUser} = useAuthValue()\n\n return (\n <Route\n {...rest}\n render={props => {\n return currentUser?.emailVerified ? <Component {...props} \/> : <Redirect to='\/login' \/>\n }}>\n <\/Route>\n )\n}<\/code><\/pre>\n\n\n\nThis PrivateRoute<\/code> is almost similar to using the Route<\/code>. The difference is that we are using a render<\/code> prop to redirect the user to the profile page if their email is unverified.<\/p>\n\n\n\n We want the profile page to be private, so well import PrivateRoute<\/code>:<\/p>\n\n\n\n \/\/ src\/App.js\nimport PrivateRoute from '.\/PrivateRoute'<\/code><\/pre>\n\n\n\nThen we can replace Route<\/code> with PrivateRoute<\/code> in the Profile<\/code> component. The Profile<\/code> route should now look like this:<\/p>\n\n\n\n \/\/ src\/App.js\n<PrivateRoute exact path=\"\/\" component={Profile} \/><\/code><\/pre>\n\n\n\nNice! We have made the profile page accessible only to users with verified emails.<\/p>\n\n\n Creating login functionality<\/h3>\n\n\nSince only users with verified emails can access their profile page when logged in with the signInWithEmailAndPassword<\/code> function, we also need to check if their email has been verified and, if it is unverified, the user should be redirected to the verify-email<\/strong> page where the sixty-second countdown should also start.<\/p>\n\n\n\n These are the imports we need to add to the Login.js<\/code> file:<\/p>\n\n\n\n import {signInWithEmailAndPassword, sendEmailVerification} from 'firebase\/auth'\nimport {auth} from '.\/firebase'\nimport {useHistory} from 'react-router-dom'\nimport {useAuthValue} from '.\/AuthContext'<\/code><\/pre>\n\n\n\nNext, add the following line of code among the states in the Login<\/code> component.<\/p>\n\n\n\n \/\/ src\/Login.js\nconst {setTimeActive} = useAuthValue()\nconst history = useHistory()<\/code><\/pre>\n\n\n\nThen add the following function after the history<\/code> variable:<\/p>\n\n\n\n \/\/ src\/Login.js\n\/\/ ...\n\nconst login = e => {\n e.preventDefault()\n signInWithEmailAndPassword(auth, email, password)\n .then(() => {\n if(!auth.currentUser.emailVerified) {\n sendEmailVerification(auth.currentUser)\n .then(() => {\n setTimeActive(true)\n history.push('\/verify-email')\n })\n .catch(err => alert(err.message))\n }else{\n history.push('\/')\n }\n })\n .catch(err => setError(err.message))\n}\n\n\/\/ ...<\/code><\/pre>\n\n\n\nThis logs in a user and then check if whether they are verified or not. If they are verified, we navigate them to their profile page. But if they are unverified, we send a verification email, then redirect them to the verify-email<\/strong> page.<\/p>\n\n\n\n All we need to do to make this work is call the login<\/code> function when the form is submitted. So, let\u2019s modify the opening tag of the login_form<\/code> to this:<\/p>\n\n\n\n \/\/ src\/Login.js\n<form onSubmit={login} name='login_form'><\/code><\/pre>\n\n\n\nAnd, hey, we\u2019re done!<\/p>\n\n\n Conclusion<\/h3>\n\n\nIn this tutorial, we have learned how to use version 9 of the Firebase Authentication to build a fully functioning user registration and authentication service in React. Is it super easy? No, there are a few thing we need to juggle. But is it a heck of a lot easier than building our own service from scratch? You bet it is! And that\u2019s what I hope you got from reading this.<\/p>\n\n\n References<\/h3>\n\n\nGet Started with Firebase Authentication on Websites<\/a> (Firebase documentation)<\/li> Manage Users in Firebase<\/a> (Firebase documentation)<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"The ability to identify users is vital for maintaining the security of any applications. Equally important is the code that\u2019s […]<\/p>\n","protected":false},"author":288336,"featured_media":255597,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"User Registration and Auth Using Firebase and React by @Tammibr25891504","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"categories":[4],"tags":[2232,575,557],"class_list":["post-362521","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles","tag-authentication","tag-firebase","tag-react"],"acf":{"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/06\/reactfirebase.png?fit=1528%2C824&ssl=1","jetpack-related-posts":[{"id":305248,"url":"https:\/\/css-tricks.com\/building-a-real-time-chat-app-with-react-and-firebase\/","url_meta":{"origin":362521,"position":0},"title":"Building a Real-Time Chat App with React and Firebase","author":"Deven Rathore","date":"March 23, 2020","format":false,"excerpt":"In this article, we\u2019ll cover key concepts for authenticating a user with Firebase in a real-time chat application. We\u2019ll integrate third-party auth providers (e.g. Google, Twitter and GitHub) and, once users are signed in, we\u2019ll learn how to store user chat data in the Firebase Realtime Database, where we can\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/react-firebase-chat.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/react-firebase-chat.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/react-firebase-chat.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/react-firebase-chat.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/react-firebase-chat.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":335185,"url":"https:\/\/css-tricks.com\/firebase-crash-course\/","url_meta":{"origin":362521,"position":1},"title":"Firebase Crash Course","author":"David East","date":"March 9, 2021","format":false,"excerpt":"This article is going to help you, dear front-end developer, understand all that is Firebase. We\u2019re going to cover lots of details about what Firebase is, why it can be useful to you, and show examples of how. But first, I think you\u2019ll enjoy a little story about how Firebase\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/firebase-logo-icon.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/firebase-logo-icon.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/firebase-logo-icon.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/firebase-logo-icon.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/firebase-logo-icon.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":256347,"url":"https:\/\/css-tricks.com\/firebase-react-part-2-user-authentication\/","url_meta":{"origin":362521,"position":2},"title":"Firebase & React Part 2: User Authentication","author":"Simon Bloom","date":"July 7, 2017","format":false,"excerpt":"Today we'll be adding authentication (via Google Authentication and Firebase) to our Fun Food Friends app, so that only users that are signed in can view who is bringing what to the potluck, as well as be able to contribute their own items. When users are not signed in, they\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":308304,"url":"https:\/\/css-tricks.com\/tackling-authentication-with-vue-using-restful-apis\/","url_meta":{"origin":362521,"position":3},"title":"Tackling Authentication With Vue Using RESTful APIs","author":"David Atanda","date":"May 18, 2020","format":false,"excerpt":"Authentication (logging in!) is a crucial part of many websites. Let\u2019s look at how to go about it on a site using Vue, in the same way it can be done with any custom back end. Vue can\u2019t actually do authentication all by itself, \u2014we\u2019ll need another service for that,\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/vue-logo-lock.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/vue-logo-lock.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/vue-logo-lock.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/vue-logo-lock.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/vue-logo-lock.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":255231,"url":"https:\/\/css-tricks.com\/intro-firebase-react\/","url_meta":{"origin":362521,"position":4},"title":"Intro to Firebase and React","author":"Simon Bloom","date":"June 2, 2017","format":false,"excerpt":"Let's take a look at building something using Firebase and React. We'll be building something called Fun Food Friends, a web application for planning your next potluck, which hopefully feels like something rather \"real world\", in that you can imagine using these technologies in your own production projects. The big\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/06\/reactfirebase.png?fit=1200%2C647&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/06\/reactfirebase.png?fit=1200%2C647&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/06\/reactfirebase.png?fit=1200%2C647&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/06\/reactfirebase.png?fit=1200%2C647&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/06\/reactfirebase.png?fit=1200%2C647&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":259352,"url":"https:\/\/css-tricks.com\/implementing-push-notifications-back-end\/","url_meta":{"origin":362521,"position":5},"title":"Implementing Push Notifications: The Back End","author":"Pascal Klau (@pascalaoms)","date":"August 23, 2017","format":false,"excerpt":"In the first part of this series we set up the front end with a Service Worker, a `manifest.json` file, and initialized Firebase. Now we need to create our database and watcher functions. Article Series: Setting Up & Firebase The Back End (You are here) Creating a Database Log into\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/362521","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/288336"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=362521"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/362521\/revisions"}],"predecessor-version":[{"id":363076,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/362521\/revisions\/363076"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/255597"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=362521"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=362521"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=362521"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Setting up Firebase<\/h3>\n\n\nBefore we start using Firebase for our registration and authentication requirements, we have to first set up our Firebase project and also the authentication method we\u2019re using.<\/p>\n\n\n\n