How to Set Up Firebase Authentication with React

I noticed quite a few popular tutorials on how to set up with React web applications are a bit outdated...and sometimes a bit hard to follow. Firebase Authentication In this guide, I wanted to offer what I hope will be an easy-to-follow tutorial on how to get started using Firebase Authentication with a modern . In an effort to keep things simple, the guide only implements Firebase Authentication's authentication service. React application Email/Password As you may know, Firebase offers many authentication providers beyond basic Email/Password authentication. However, to reiterate, my goal here is to offer an easy-to-follow guide for you, especially if you may be just getting started with Firebase Authentication. So, an implementation of Email/Password authentication is a good place to begin. In particular, this guide describes the steps to set up Firebase's Email/Password authentication service with a basic Login/Signup/Profile/Logout workflow on the front end. After completing the guide, you will be in a position to enhance the workflow with additional functionality such as allowing the user to reset his/her password. Prerequisites To complete this guide, you will need to have: An existing . If you don't have an existing Firebase account, you need to create one. Firebase account Installed Node.js v13.x or higher. Installed Node Package Manager, . npm An understanding of how to create a new React project using React v16.8 or higher. Basic knowledge of . React Hooks Basic knowledge of . React Router v6.x or higher Basic knowledge of styles. Bootstrap Step 1 - Setting Up a New Firebase Project A Firebase project acts as a container for the Firebase services that you will use with your React web application. So, in this step, you will create a new Firebase project. To start, login to your Firebase account and click on . Next, click on . This will kick off a simple workflow to add the new project. Go to Console Add Project In the first step of the workflow, enter a new name for your project. This guide uses the name . my-auth-test The second step of the workflow offers you the option to enable Google Analytics for the project. Since Google Analytics are not necessary to implement the authentication service, you can turn this option off. Click on to create the new project. Create Project You will need to wait for a few seconds as Firebase creates and provisions resources for the new project. When the project is ready, click . Continue Step 2 - Configuring the New Firebase Project After clicking in Step 1, you should have been redirected to the Project Overview page for the new project. You now need to configure the new project to use Firebase and Firebase's Email/Password authentication service. Click on the circular button with the icon to configure your Firebase project for a web application. Continue Step 2a - Adding Firebase Enter a nickname for your application in the field. This guide uses the nickname . Register app my-react-app-with-auth Click on . Register App Firebase will generate a set of configuration keys for your Firebase project under the header . You will also see 2 options to display instructions on how to add the Firebase SDK using or using a tag. Since you are building a React application via this guide, keep the default option selected. Add Firebase SDK npm Use npm In the second text box under the header, you will see the configuration code that you will need when you configure Firebase services in your React web application. It will be to: Add Firebase SDK similar // Import the functions you need from the SDKs you need import { initializeApp } from "firebase/app"; // TODO: Add SDKs for Firebase products that you want to use // https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration const firebaseConfig = { apiKey: "AIzaSyDiUlY68W9Li_0EIkmdGdzD7nvqCT9kHnY", authDomain: "my-auth-test-fbd48.firebaseapp.com", projectId: "my-auth-test-fbd48", storageBucket: "my-auth-test-fbd48.appspot.com", messagingSenderId: "1078604952662", appId: "1:1078604952662:web:5d0b908439cfb5684ab7f7" };

// Initialize Firebase const app = initializeApp(firebaseConfig); Copy the code block displaying application configuration and save it since you will use it later when building the React application. your To reiterate, your Firebase Project configuration keys will be from the keys shown in the code block above. Ensure that you copy Firebase Project configuration keys. different your Step 2b - Adding Authentication After you have copied the configuration code block in Step 2a, close the screen and you will be routed back to the Project Overview page. Add Firebase to your web app At the top of the page, you should now see displayed under your project name indicating that you have registered a new application with the project. Below that, you will see the header . Click on . 1 app Choose a product to add to your app Authentication When the Authentication Overview page loads, click on . You will be routed to the actual Authentication setup page for your project where you can choose which authentication services you would like to add. The tab should already be selected with a table of available authentication services. Get Started Sign-in method Since this guide describes the steps to configure your React web application for Firebase's Email/Password authentication service, click on as displayed on the tab panel. Email/Password Sign-in method On the next screen, click the toggle switch to the right of to enable the Email/Password authentication service. Do enable the option. This authentication option requires a different implementation in React than the Email/Password authentication service and its implementation is not covered in this guide. Email/Password not Email link (passwordless sign-in) Click . You will be routed back to the main tab panel. As you have now enabled an authentication service, the table of available authentication services will be replaced by a new table with two headers: and . You should see listed under and under . Save Sign-in method Provider Status Email/Provider Provider Enabled Status You've successfully configured your new Firebase project with the Firebase Email/Password authentication service. Next, you will build the React application. Step 3 - Creating a New React Project and Installing Packages Step 3a - Creating a New React Project Create a new React project using your desired application name. This guide uses . my-react-app-with-auth npx create-react-app my-react-app-with-auth Step 3b - Installing Packages This guide requires the installation of 3 Node.js packages: : The Firebase SDK. Firebase : For routing. React Router DOM : For styling. Bootstrap Install each of the 3 packages above via : npm npm install firebase npm install react-router-dom npm install bootstrap Step 4 - Creating an Instance of the Firebase Authentication Service You will use the Firebase Authentication configuration keys that you copied in Step 2a to initialize an instance of the Firebase Authentication service in the React application. Create an empty file in the directory of the React application. firebase.js src Insert the following code using configuration key values: your import { initializeApp } from "firebase/app"; import { getAuth } from "firebase/auth";

const firebaseConfig = { apiKey: "AIzaSyDiUlY68W9Li_0EIkmdGdzD7nvqCT9kHnY", authDomain: "my-auth-test-fbd48.firebaseapp.com", projectId: "my-auth-test-fbd48", storageBucket: "my-auth-test-fbd48.appspot.com", messagingSenderId: "1078604952662", appId: "1:1078604952662:web:5d0b908439cfb5684ab7f7" }

const app = initializeApp(firebaseConfig); const auth = getAuth(app);

export { auth } Save . firebase.js This file initializes the Firebase Authentication service using your application configuration and provides an object that will be used when calling Firebase Authentication services from the React application. auth As this guide is meant as more of a "just getting started" tutorial, and I am trying to keep things simple, I have elected to hardcode configuration key values in the file above. However, this is ideal - particularly for a production application. A better solution would be to create an and put the actual configuration key values there. firebase.js not environment variables file Step 5 - Building the React Application Step 5a - Overview of React Application Components The React application will consist of components that offer a simple Login/Signup/Profile/Logout workflow as mentioned in the Introduction: Login The user's entry point into the application is the login form - i.e. it is the home route of the application. The user can login using the form and get routed to his/her profile. Alternatively, the user can click a signup link below the login form and get routed to the signup form. Signup The signup form is used to create a new account for the user. Alternatively, the user can cancel the sign up and get routed back to the login form. and Profile Logout The user is routed to his/her profile when the login is successful. The user can click a logout button on his/her profile to logout of his/her account. Accordingly, you will need to build the appropriate components to support this workflow. The final directory will contain the following files: src src |__ index.js |__ firebase.js // Created in Step 4. |__ App.js |__ Layout.jsx |__ Login.jsx |__ Profile.jsx |__ Signup.jsx You will build each of the required components in Step 5c through Step 5g. However, you first need to do a little "housecleaning" with the project template as described in the next step. Step 5b - Cleaning Up the React Project Template To begin, you need to clean up the React project template. Delete the following files from your React project as this guide does not use them: reportWebVitals.js setupTests.js logo.svg index.css App.css App.test.js Clean up the template code in so it reflects the following: index.js // index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import "bootstrap/dist/css/bootstrap.min.css";

const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); You will not need to make any further edits to . index.js Finally, you will be replacing most of the code in . So, you can clean up the existing code to reflect an empty component skeleton that you will "fill in" shortly. App.js // App.js const App = () => { }

export default App Step 5c - Building App.js The component will hold the JSX markup defining the overall structure of the application along with the application routes. App.js Add the following code to the existing file: App.js import Layout from "./Layout"; import Login from "./Login"; import Signup from "./Signup"; import Profile from "./Profile"; import { BrowserRouter, Routes, Route } from "react-router-dom";

const App = () => { return ( }> }> } > }> ) }

export default App Save . App.js Note that the component, which you will build in a moment, is specified as the home route of the application just as we want it to be per the workflow definition outlined in Step 5a. Login Step 5d - Building Layout.jsx The component specifies the application markup that remains consistent across all routes. This guide uses a simple header message: . A "real" application might use branding and/or navigation bar markup in its specification, for example. The component also includes an tag for rendering the markup specified by the different routes. Layout.jsx React With Firebase Authentication Layout Create a new file in the directory. Layout.jsx src Add the following code: import { Outlet } from "react-router-dom";

const Layout = () => { return( React With Firebase Authentication

) }

export default Layout Save the file. Layout.jsx Step 5e - Building Login.jsx To reiterate, the component is the home route for the application - i.e. this is the route that will display when navigating to . The component includes the form where the user can enter his/her e-mail and password to login to the application. If he/she doesn't have an existing account, he/she can click on a link below the form to get routed to the component which will be built in the next step. Login.jsx localhost:3000 Signup Create a new file in the directory. Login.jsx src Add the following code: import { useState } from "react"; import { auth } from "./firebase"; import { signInWithEmailAndPassword } from "firebase/auth"; import { Link, useNavigate } from "react-router-dom";

const Login = () => { const navigate = useNavigate(); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [notice, setNotice] = useState("");

const loginWithUsernameAndPassword = async (e) => { e.preventDefault();

try { await signInWithEmailAndPassword(auth, email, password); navigate("./profile"); } catch { setNotice("You entered a wrong username or password."); } }

return( { "" !== notice && { notice } } setEmail(e.target.value) }> Email address setPassword(e.target.value) }> Password loginWithUsernameAndPassword(e)}>Submit Need to sign up for an account? Click here. ) }

export default Login Save . Login.jsx Note that imports the Firebase authentication service object from . The object is passed, along with the user's and input values, to the Firebase SDK's method to login the user. If the login fails, a notice is displayed to the user. React's hook is used to keep track of the user's e-mail and password input. Additionally, the hook is used to programatically route the user to the component if login is successful. Also, as seen in the last child block within the element, the user can click on a link to get routed to the component to create an account if he/she does not have an existing account. Login.jsx auth firebase.js auth email password signInWithEmailAndPassword useState react-router-dom useNavigate Profile Signup Step 5f - Building Signup.jsx The component presents the user with a form where he/she can sign up for a new application account. Signup.jsx Create a new file in the directory. Signup.jsx src Add the following code: import React, { useState } from "react"; import { auth } from "./firebase"; import { createUserWithEmailAndPassword } from "firebase/auth"; import { Link, useNavigate } from "react-router-dom";

const Signup = () => { const navigate = useNavigate(); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [confirmPassword, setConfirmPassword] = useState(""); const [notice, setNotice] = useState("");

const signupWithUsernameAndPassword = async (e) => { e.preventDefault();

if (password === confirmPassword) { try { await createUserWithEmailAndPassword(auth, email, password); navigate("/"); } catch { setNotice("Sorry, something went wrong. Please try again."); } } else { setNotice("Passwords don't match. Please try again."); } };

return( { "" !== notice && { notice } } setEmail(e.target.value) }> Enter an email address for your username setPassword(e.target.value) }> Password setConfirmPassword(e.target.value) }> Confirm Password signupWithUsernameAndPassword(e)}>Signup Go back to login? Click here. ) }

export default Signup Save . Signup.jsx As with , imports the Firebase authentication service object from . The object is passed, along with the user's and input values, to the Firebase SDK's method to create a new account for the user. If the sign up process fails, or if the user's and values do not match, a notice is displayed to the user. Again, React's hook is used to keep track of user input, namely , , and input. And, the hook is used again to programatically route the user to the component if the sign up process is successful. Also, as seen in the last child block within the element, the user can click on a link to get routed back to the component if he/she wants to cancel the sign up process. Login.jsx Signup.jsx auth firebase.js auth email password createUserWithEmailAndPassword password confirmPassword useState email password confirmPassword react-router-dom useNavigate Login Login Note that if the sign up process is successful, you can see the new user entry in your Firebase database by clicking on the tab under the section of your . Users Authentication Firebase project Step 5g - Building Profile.jsx The final component that you will build is . Users are routed to this component upon successful login. The route welcomes the user with their login name (i.e. e-mail address) and provides a button to logout. Upon logout, the user is routed back to the component. Profile.jsx Login Create a new file in the directory. Profile.jsx src Add the following code: import { useNavigate } from "react-router-dom"; import { auth } from "./firebase"; import { signOut } from "firebase/auth";

const Profile = () => { const navigate = useNavigate(); const user = auth.currentUser;

const logoutUser = async (e) => { e.preventDefault();

await signOut(auth); navigate("/"); }

return( Welcome { user.email } . You are logged in!

logoutUser(e)}>Logout ) }

export default Profile Save . Profile.jsx Note that can access the user's details via the object. You can inspect the object to view the other user properties that are available, such as the user's . If the user elects to logout, the object is passed to the Firebase SDK's method to sign out the user. At that point, the user is routed programatically back to the component using the hook. Profile.jsx auth currentUser UID auth signOut Login react-router-dom useNavigate Step 6 - Testing the Application Start the React application: npm start Navigate to in your browser if your browser does not launch automatically. You should see the form. localhost:3000 Login Click on the link to navigate to the route. You should see the form. Click here Signup Signup Create a new user and click the button. If the sign up is successful, you will be routed back to the form. Signup Login Enter the new user's credentials in the form and click the button. If the login is successful, you will be routed to the user's . Login Submit Profile Click the button on the user's to sign out. If the sign out is successful, you will be routed back to the form. Logout Profile Login The steps above capture the workflow for the application. Conclusion and Next Steps I hope this tutorial has provided you with a good start on how you can add Firebase Authentication to your React applications. As mentioned earlier, you may wish to enhance the application workflow with additional functionality such as allowing the user to update his/her password. The Firebase SDK offers many methods to manage user accounts which you can use to extend the functionality described in this guide. You can learn more about Firebase and Firebase Authentication via the . official documentation