Skip to content
Related Articles

Related Articles

Improve Article
How to send email verification link with firebase using ReactJS?
  • Difficulty Level : Medium
  • Last Updated : 12 Apr, 2021

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.

firebase.js






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. 

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;

Output : 

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

Here is the verification mail. 

My Personal Notes arrow_drop_up
Recommended Articles
Page :