Lesson 4 / 25
Email/Password and Email Link Sign-in
The most common starting point.
Two email flows
With email/password, createUserWithEmailAndPassword registers a user and signInWithEmailAndPassword signs them in; Firebase stores password hashes for you. sendEmailVerification and sendPasswordResetEmail handle the usual follow-ups. Email link (passwordless) sign-in sends a one-time link with sendSignInLinkToEmail; when the user opens it, isSignInWithEmailLink checks the URL and signInWithEmailLink completes sign-in. Each provider must be enabled in the console first. Error codes such as auth/wrong-password vary with settings like email enumeration protection, so show generic messages.
Who is the user?
Firebase Authentication signs users in with many providers and gives each a stable uid and a signed ID token.
Register, sign in and passwordless
TypeScript, modular SDK.
import {
getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword,
sendEmailVerification, sendSignInLinkToEmail,
isSignInWithEmailLink, signInWithEmailLink,
} from "firebase/auth";
const auth = getAuth(app);
export async function register(email: string, password: string) {
const cred = await createUserWithEmailAndPassword(auth, email, password);
await sendEmailVerification(cred.user);
}
export const login = (email: string, password: string) =>
signInWithEmailAndPassword(auth, email, password);
export async function sendMagicLink(email: string) {
await sendSignInLinkToEmail(auth, email, {
url: "https://my-app.example.com/finish-sign-in",
handleCodeInApp: true,
});
localStorage.setItem("emailForSignIn", email);
}
export async function finishMagicLink() {
const email = localStorage.getItem("emailForSignIn");
if (email && isSignInWithEmailLink(auth, window.location.href)) {
await signInWithEmailLink(auth, email, window.location.href);
localStorage.removeItem("emailForSignIn");
}
}Do not reveal which emails exist
Show the same message for "wrong password" and "no such user", and keep email enumeration protection enabled in the console.
Quick check: Which function completes passwordless sign-in after the user opens the emailed link?
- createUserWithEmailAndPassword
- signInWithEmailLink
- sendPasswordResetEmail
- signInAnonymously
Answer
signInWithEmailLink — The link carries a one-time code in the URL.