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. In this article, we will explore how to implement email verification using Firebase with ReactJS.

In this article we are going to see how to send an email verification link with firebase using React.js.

For Setup a firebase (Setup a Firebase for your React Project).

Creating React Application And Installing Module.

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

Project structure: The project structure will look like this.

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

npm install firebase@8.3.1 --save

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: Initialize the firebase into your project by creating firebase.js file with the following code.

Javascript

import firebase from 'firebase';
 
const firebaseConfig = {
    // Your credentials
};
 
firebase.initializeApp(firebaseConfig);
var auth = firebase.auth();
export default auth;

Now write some code into your App.js file.

Javascript

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;