Authenticate User Using Email Link (Passwordless)
You have one way to authenticate user using Email and Password(that is set by user) and also have other way to Sign-Up and Log-In user using Email Link(Passwordless) method.
In this method, user receive an mail that contain a authentication link. User is verified and redirected to your site with an token by clicking on that link. Token is presented as query parameter in the URL. User is authenticated and able to Sign-up and Log-in without any password by using token that is provided by Firebase's Email Link Authentication method.
Follow the steps to implement Passwordless authentication method.
Step 1. Enable Email Link sign-in method
- Open your project console and navigate to
Build>Authenticationdashboard in that open Sign-in method tab. - Click on
Email/Passwordthat is in Native Provider column. - Now enable Email/Password and Email link(Passwordless) provider and hit Save button.
- If you haven't setup firebase SDK and initialize authentication then do it first.
Step 2. Send an authentication link to the user's email address
url:Provide URL address where user is redirected back by clicking email authentication link with token. Domain name must be added in authorized to firebase console. If you are using custom domain then need to add that domain to Authorised Domains list by following this thatAuthentication>Setting tab>Authorised domainsand hit theAdd Domainbutton.
handleCodeInApp:Set to true. It is expected that the user will be signed in and that the app will remember their Auth status.
import { auth } from "<YOUR_FIREBASE_CONFIG_FILE_PATH>"; //see setup and initialize authentication if you have any doubt
import { sendSignInLinkToEmail } from "firebase/auth";
const email = "user@gmail.com";
sendSignInLinkToEmail(auth, email, {
url: "https://www.example.com/dashboard", // Put Url where you want to redirect user
handleCodeInApp: true, // This must be true .
})
.then(() => {
// The link was successfully sent. Inform the user.
// Save the email locally so you don't need to ask the user for it again
// if they open the link on the same device.
window.localStorage.setItem("emailForLogIn", email);
// ...
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
// ...
});
Set email address to local storage that will help in sign-in process by not asking user to enter email address again.
Call this sendSignInLinkToEmail() function to send the email to user.
Step 3. Sign-In user
User is redirected to that
url with authentication token. Using that token user is able to sign in. You need to call some functions on that page where you redirected user to verify that token and log-in the user.import { auth } from "<YOUR_FIREBASE_CONFIG_FILE_PATH>"; //see setup and initialize authentication if you have any doubt
import { isSignInWithEmailLink, signInWithEmailLink } from "firebase/auth";
if (isSignInWithEmailLink(auth, window.location.href)) {
let email = window.localStorage.getItem("emailForLogIn");
// If user is authenticated using different device
// then take email address by prompt method.
if (!email) {
email = window.prompt("Please provide your email for confirmation");
}
// Sign-In the user
signInWithEmailLink(auth, email, window.location.href)
.then((result) => {
window.localStorage.removeItem("emailForSignIn"); // Clear email from storage.
const user = result.user;
// write code to perform intended task
// like redirect user somewhere else after sign-in
// ...
})
.catch((error) => {
const errorCode = error.code;
});
}
Log-out User :
- signOut(auth) :
import { auth } from '<YOUR_FIREBASE_CONFIG_FILE_PATH>';
import { signOut } from 'firebase/auth';
signOut(auth);
This method also return 'Promise' so you run functionality like redirecting user to log-in page after log-out using '.then()' or 'async/await'.
signOut(auth)
.then(() => {
// code for redirect user to Log-in page
// ...
})
.catch((error) => {
console.log(error);
});
Related Post
Email link (Passwordless)
Phone number
Google OAuth
Setup and Initialize
Explore
Copyright © 2024, All rights reserved by Firebase Master