Passwordless Authentication with Firebase Email Links

Passwordless authentication improves user experience by removing the need to remember passwords.

While logging into a website, I noticed an option called “Email via Link” instead of the usual Google or GitHub sign-in.
After entering my email, a link was sent to my inbox. Clicking it logged me in instantly.

I decided to implement the same flow using Firebase, React, and TypeScript.

Step 1: Enable Email Authentication

Create a Firebase project and enable Email Authentication from the Authentication section in the Firebase console.

Step 2: Install Firebase and Configure the App

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID",
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

Step 3: Send the Magic Login Link

Use Firebase’s sendSignInLinkToEmail method to send a secure login link to the user.

import { useState } from "react";
import { sendSignInLinkToEmail } from "firebase/auth";
import { auth } from "./firebaseConfig";

export default function Login() {
  const [email, setEmail] = useState("");

  const sendLink = async (e: React.FormEvent) => {
    e.preventDefault();

    const actionCodeSettings: ActionCodeSettings = {
      url: "http://localhost:5173/",
      handleCodeInApp: true,
    };

    await sendSignInLinkToEmail(auth, email, actionCodeSettings);
    localStorage.setItem("emailForSignIn", email);
  };

  return (
    <form onSubmit={sendLink}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Enter your email"
      />
      <button type="submit">Send Login Link</button>
    </form>
  );
}

Step 4: Verify the Link and Complete Login

import { useEffect } from "react";
import {
  isSignInWithEmailLink,
  signInWithEmailLink,
} from "firebase/auth";
import { auth } from "./firebaseConfig";

function App() {
  useEffect(() => {
    if (isSignInWithEmailLink(auth, window.location.href)) {
      let email = localStorage.getItem("emailForSignIn");

      if (!email) {
        email = window.prompt("Please confirm your email");
      }

      if (!email) return;

      signInWithEmailLink(auth, email, window.location.href).then(() =>
        localStorage.removeItem("emailForSignIn")
      );
    }
  }, []);

  return null;
}

export default App;

That’s it.
Users can now sign in securely using only their email address.
You can extend this setup by adding OAuth providers like Google or GitHub.