How to send email verification link with firebase using ReactJS?

Email verification is a crucial step in user authentication and account security. It ensures that users provide a valid email address and allows you to verify their identity before granting them access to certain features or functionalities. Firebase, a powerful platform for building web and mobile applications, provides a simple and effective way to send email verification links.

Prerequisites

• React JS
• Firebase

Approach

To send email verification links with Firebase using React JS we will install the npm Firebase module and configure it with the React project. Add the configuration details like API key, domain, project ID, etc in the auth method inside the Firebase configuration file and start the project.

Steps to Set Up firebase with react.

Creating React Application

Step 1: Create a React myapp using the following command.

npx create-react-app myapp

Step 2: After creating your project folder i.e. myapp, move to it using the following command.

cd myapp

Step 3: After creating the ReactJS application, Install the firebase module using the following command.

npm install [email protected] --save

Project structure

The project structure will look like this.

Dependencies list after installing libraries.

{
    "dependencies": {
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "firebase": "^8.3.1",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-scripts": "5.0.1",
        "web-vitals": "^2.1.4"
    }
}

Step 4: Go to your firebase dashboard and create a new project and copy your credentials.

const firebaseConfig = {
    apiKey: "your api key",
    authDomain: "your credentials",
    projectId: "your credentials",
    storageBucket: "your credentials",
    messagingSenderId: "your credentials",
    appId: "your credentials"
};

Step 5: Now Enable the sign in with email and password from your sign-in method.

Example: This example involves a basic react form and firebase configuration to send the verification link with firebase in react.

// Filename - App.js
import auth from "./firebase";
import "./App.css";
import { useState } from "react";

function App() {
    const [email, setemail] = useState("");
    const [password, setpassword] = useState("");
    const signup = () => {
        auth.createUserWithEmailAndPassword(email, password)
            .then((userCredential) => {
                // send verification mail.
                userCredential.user.sendEmailVerification();
                auth.signOut();
                alert("Email sent");
            })
            .catch(alert);
    };

    return (
        <div className="App">
            <br />
            <br />
            <input
                type="email"
                placeholder="Email"
                onChange={(e) => {
                    setemail(e.target.value);
                }}
            ></input>
            <br />
            <br />
            <input
                type="password"
                placeholder="password"
                onChange={(e) => {
                    setpassword(e.target.value);
                }}
            ></input>
            <br />
            <br />
            <button onClick={signup}>Sign-up</button>
        </div>
    );
}

export default App;

// Filename - firebase.js

import firebase from "firebase";

const firebaseConfig = {
    // Your credentials
};

firebase.initializeApp(firebaseConfig);
var auth = firebase.auth();
export default auth;

Steps to run the application: Run this command in the terminal in Project directory.

npm start

Output: Here, When you click on sign-up button the verification email is sent to the provided email address.

Here is the verification mail.