Introduction This guide is a supplement to . In the introduction of that guide, I noted that Firebase offers other authentication schemes beyond basic Email/Password authentication. One of those alternatives is . How to Set Up Firebase Authentication with a React Web Application Passwordless Authentication Passwordless authentication is an attractive option when building applications. It simplifies the user experience since your users have no need to remember their password(s) and thus never have to worry about losing them either. It also facilitates the development experience since there is no need to design any password capture or management logic. In this guide, you will build a simple Login/Confirm/Profile/Logout workflow that implements Firebase's passwordless authentication. Before You Begin Google sets various Firebase Authentication . If you are using the free plan, note that you will be to 5 sign-in link emails per day. While the Spark plan may be sufficient for testing purposes, you will need to upgrade to the pay-as-you-go plan to go above this limit. limits Spark limited Blaze Prerequisites Throughout this guide, I will refer to the guide as the and the associated project as the . How to Set Up Firebase Authentication with a React Web Application prerequisite guide prerequisite project To complete this guide, you will need to have: Completed the prerequisite guide, including all of its prerequisites. Step 1 - Enabling Passwordless Authentication With Your Firebase Project In the prerequisite guide, you created a new Firebase project for basic email/password authentication. Now, you will enable that same project for passwordless authentication.  Login to your and click on . Firebase account Go to Console Click on your authentication project listed on the Firebase projects dashboard. This guide uses the project name . my-auth-test Click on in the left panel menu. authentication Click on the tab in the main window. Sign-in method From your work in the prerequisite guide, the table should already display under the column with a status of . Click on the pencil icon to open the configuration panel for the provider. Sign-in Providers Email/Password Providers Enabled Email/Password Click on the toggle to enable the . Email link (passwordless sign-in) Click . Save Your Firebase project is now configured to support passwordless authentication. Step 2 - Creating a New React Project and Installing Packages Step 2a - Creating a New React Project Create a new React project using your desired application name. This guide uses . passwordless-auth npx create-react-app passwordless-auth Step 2b - 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 three packages above via : npm npm install firebase npm install react-router-dom npm install bootstrap Step 3 - Copy from the Prerequisite Project firebase.js In the prerequisite project, you created a file that uses your Firebase project configuration data to create an instance of the Firebase Authentication service. Your file should have the following structure with Firebase project configuration values: firebase.js firebase.js 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 } Copy to your new React project folder. firebase.js If you need to review your Firebase project configuration, click on the gear icon next to in the left panel menu. The tab should already be selected. Scroll down to the section containing the panel. The option within the panel should already be selected. Your project configuration values will be listed in the displayed code block. Project Overview General Your Apps Web Apps npm Web apps Step 4 - Building the React Application Step 4a - Overview of React Application Components The React application will consist of 5 components: , , , , and . App Layout Login Confirm Profile App The component defines the overall application structure, including routing. App Layout The component specifies the application markup that remains consistent across all routes. Layout Login The user's entry point into the application is the login form. When a user attempts to login via his email address, an email with a sign-in link is sent to his/her email address. Confirm The user is routed to the page when they click on a sign-in link. Confirm The page requests the user to confirm the email address used when they logged in. Profile The user is routed to the page after confirming their email address. Profile The user can click a logout button on the page to logout of his/her account. Profile The final directory will contain the following files: src src
|__ index.js
|__ firebase.js // Copied from prerequisite project in Step 3.
|__ App.js
|__ Layout.jsx
|__ Login.jsx
|__ Confirm.jsx
|__ Profile.jsx Step 4b - Cleaning Up the React Project Template and Copying Files from the Prerequisite Project You can delete the same files from the React project template as described in Step 5b.1 of the prerequisite guide. Delete the following files from your React project: reportWebVitals.js setupTests.js logo.svg index.css App.css App.test.js Copy from the prerequisite project to your new project folder. This guide uses the same file. If you need to rebuild , see Step 5b.2 of the prerequisite guide or copy the code block below. index.js index.js Copy from the prerequisite project to your new project folder. This guide uses the same file. If you need to rebuild , see Step 5d of the prerequisite guide or copy the code block below. Optionally, you may update the project text in the tag of to or whatever title you may prefer. Layout.jsx Layout.jsx <p> Layout.jsx React With Firebase Passwordless Authentication Your and files should be as follows: index.js Layout.jsx // 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(
  <React.StrictMode>
    <App />
  </React.StrictMode>
); // Layout.jsx
import { Outlet } from "react-router-dom";

const Layout = () => {
    return(
        <div className = "container-fluid">
            <div className = "row justify-content-center mt-3">
                <div className = "col-md-4 text-center">
                    <p className = "lead">React With Firebase Passwordless Authentication</p>
                </div>
                <Outlet />
            </div>
        </div>
    )
}

export default Layout Step 4c - Building App.js The file is largely the same as it is in the prerequisite project, with changes to only two lines. To facilitate building the file, copy from the prerequisite project to your new project folder. App.js App.js Delete the following line from the file and replace it as shown below: import // Delete this line:
import Signup from "./Signup"; // Replace it with:
import Confirm from "./Confirm"; Delete the following from the file and replace it as shown below: <Route> // Delete this line:
<Route path = "/signup" element = { <Signup></Signup> } ></Route> // Replace it with:
<Route path = "/confirm" element = { <Confirm></Confirm> } ></Route> Save . App.js The complete file should now be as follows: import Layout from "./Layout";
import Login from "./Login";
import Confirm from "./Confirm";
import Profile from "./Profile";
import { BrowserRouter, Routes, Route } from "react-router-dom";

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
          <Route path = "/" element = { <Layout></Layout> }>
            <Route index element = { <Login></Login> }></Route>
            <Route path = "/confirm" element = { <Confirm></Confirm> } ></Route>
            <Route path = "/profile" element = { <Profile></Profile> } ></Route>
          </Route>
      </Routes>
    </BrowserRouter>
  )
}

export default App Note that the component is once again the home route of the application as it was with the prerequisite project. Login Step 4d - Building Login.jsx In the case of passwordless authentication, you obviously don't need to include a password field, nor do you need to manage state for password input. So, the login form only needs to capture the user's email address. Create a new file in the directory. Login.jsx src Add the following code: import { useState } from "react";
import { auth } from "./firebase";
import { sendSignInLinkToEmail } from "firebase/auth";

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

    const actionCodeSettings = {
        url: "http://localhost:3000/confirm",
        handleCodeInApp: true
    }

    const callSendSignInLinkToEmail = (e) => {
        e.preventDefault();

        sendSignInLinkToEmail(auth, email, actionCodeSettings)
        .then(() => {
            setNotice("An email was sent to your email address. Click the link in the email to login.");
        })
        .catch((error) => {
            setNotice("An error occurred when sending a login link to your email address: ", error.name);
        })
    }

    return(
        <div className = "container">
            <div className = "row justify-content-center">
                <form className = "col-md-4 mt-3 pt-3 pb-3">
                    { "" !== notice &&
                        <div className = "alert alert-warning" role = "alert">
                            { notice }    
                        </div>
                    }                  
                    <div className = "form-floating mb-3">
                        <input type = "email" className = "form-control" id = "exampleInputEmail" placeholder = "name@example.com" value = { email } onChange = { (e) => setEmail(e.target.value) }></input>
                        <label htmlFor = "exampleInputEmail" className = "form-label">Email address</label>
                    </div>
                    <div className = "d-grid">
                        <button type = "submit" className = "btn btn-primary pt-3 pb-3" onClick = {(e) => callSendSignInLinkToEmail(e)}>Submit</button>
                    </div>
                </form>
            </div>
        </div>
    )
} Save . Login.jsx Upon capturing the user's email address, the form sends an email with a sign-in link to his/her address via Firebase's method. If successful, the user is notified that the email has been sent. Note that the object is passed as a parameter to the method and includes the URL that the user will be routed to when he/she clicks on the emailed sign-in link. In this case, the URL maps to the route specified in . Login.jsx sendSignInLinkToEmail actionCodeSettings sendSignInLinkToEmail /confirm App.js Step 4e - Building Confirm.jsx Firebase's method is used to sign in a user who has clicked on a sign-in link. As you will see in a moment, the method takes an parameter, and the value of must match the email address that the user used when logging in via the login form. presents the user with a form to confirm his/her email address and subsequently attempts to sign in the user. signInWithEmailLink email email Confirm.jsx Create a new file in the directory. Confirm.jsx src Add the following code: import { useState } from "react";
import { auth } from "./firebase";
import { isSignInWithEmailLink, signInWithEmailLink } from "firebase/auth";
import { useNavigate } from "react-router-dom";

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

    const callSignInWithEmailLink = (e) => {
        e.preventDefault();

        if (isSignInWithEmailLink(auth, window.location.href)) {
            signInWithEmailLink(auth, email, window.location.href)
            .then(() => {
                navigate("/profile");
            })
            .catch((error) => {
                setNotice("An occurred during sign in: ", error.name);
            })
        }
    }

    return(
        <div className = "container">
            <div className = "row justify-content-center">
                <form className = "col-md-4 mt-3 pt-3 pb-3">
                    { "" !== notice &&
                        <div className = "alert alert-warning" role = "alert">
                            { notice }    
                        </div>
                    }                  
                    <div className = "form-floating mb-3">
                        <input type = "email" className = "form-control" id = "exampleConfirmEmail" placeholder = "name@example.com" value = { email } onChange = { (e) => setEmail(e.target.value) }></input>
                        <label htmlFor = "exampleConfirmEmail" className = "form-label">Please confirm your email address</label>
                    </div>
                    <div className = "d-grid">
                        <button type = "submit" className = "btn btn-primary pt-3 pb-3" onClick = {(e) => callSignInWithEmailLink(e)}>Confirm</button>
                    </div>
                </form>
            </div>
        </div>
    )
}

export default Confirm Save . Confirm.jsx The method first checks if the sign-in link that the user is using is valid. If it is, the method is called to sign in the user. To reiterate, the value passed to the method must match the email address the user used with the login form. Note that if the user is a new user (i.e., it is his/her first time signing in), Firebase will automatically create the user in the Firebase Authentication store. This is another example of the simplified experience offered by passwordless authentication: account creation for new users is handled automatically. isSignInWithEmailLink signInWithEmailLink email signInWithEmailLink Step 4f - Building Profile.jsx The final component that you will build is . Users are routed to this component when they sign in successfully via . The route welcomes the user with their email address and provides a button to logout. Upon logout, the user is routed back to the component. Profile.jsx Confirm.jsx Login Create a new file in the directory. Profile.jsx src Add the following code: import { auth } from "./firebase";
import { signOut } from "firebase/auth";
import { useNavigate } from "react-router-dom";

const Profile = () => {
    const navigate = useNavigate();

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

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

    return(
        <div className = "container">
            <div className = "row justify-content-center">
                <div className = "col-md-4 text-center">
                    <p>Welcome <em className = "text-decoration-underline">{ auth.currentUser.email }</em>. You are logged in!</p>
                    <div className = "d-grid gap-2">
                        <button type = "submit" className = "btn btn-primary pt-3 pb-3" onClick = {(e) => logoutUser(e)}>Logout</button>
                    </div>                
                </div>
            </div>
        </div>       
    )    
}

export default Profile Save . Profile.jsx Step 5 - 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. locahost:3000 Login Enter the email you would like to use to sign in and click . If the submission is successful, a notification will be displayed that an email with a sign-in link was sent to your email address. Submit Login to your email account and look for the Firebase sign-in link email. It should have a subject line similar to where the 13-digit number sequence represents the of your Firebase project (see Step 3 of this guide). In the section below, I will explain how you can modify your Firebase project name to display a "user-friendly" name in sign-in link emails. For now, open the sign-in link email and click on the sign-in link. You will be routed to the form. Sign in to project-1078604952662 messagingSenderId Optional Confirm Enter the email address you used when signing in on the form. Click . If the confirmation is successful, you will be routed to the page. Confirm Confirm Profile Click the button on the page 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. Optional: Modifying Your Project Name You can change your project name so that sign-in link emails sent by Firebase display a "user-friendly" name instead of, for example, . Login to your and click on . project-1078604952662 Firebase account Go to Console Click on your authentication project listed on the Firebase projects dashboard. Click on the gear icon next to in the left panel menu. The tab should already be selected. Project Overview General Scroll down to the option in the section. Public-facing name Your Project Click on the pencil icon and modify your project name as desired. Click . Your sign-in link emails will now display the updated project name. Save Conclusion and Next Steps Passwordless authentication seems to be an increasingly popular choice among application developers, and understandably so. Beyond the obvious advantage of eliminating the need to manage passwords, there is also no need for email verification since the process of sending the sign-in link is a verification in and of itself. As with the prerequisite project, the implementation here is basic. You might consider simple enhancements such as: Blocking/blacklisting particular email address domains (i.e., common spam email domains). Locally storing the email address entered by the user on the page and checking for the existence of the email address on the page. With this approach, if the user clicks on a sign-in link on the same device where he/she accessed the page, he/she would not need to enter his/her email address again on the page as it would be recovered from local storage. This provides for an even more frictionless user experience. Login Confirm Login Confirm You can learn more about Firebase Passwordless Authentication via the . official documentation

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

How To Set Up Firebase Passwordless Authentication With A React Web Application

Too Long; Didn't Read

@pictureinthenoise

Credibility

RELATED STORIES