Stop 12 · AuthenticationTopics · 5/10

Firebase Auth

In short

Want login working tonight without writing a backend? Firebase Auth gives you email, phone OTP and Google sign-in from the browser, and stores the users for you.

Google Firebase's managed authentication service — handles email/password, social logins, and session management with minimal backend code required.

The jaadu waves from a society gate while a security guard writes in a visitor register.

Think of it like this

Your society's security guard agency

Your housing society doesn't train its own guards. It hires an agency that handles the register, the visitor passes and the night shift. Firebase Auth is that agency for your app's front gate.

Watch it happen

Google sign-in with Firebase

User

Your page

Firebase Auth

Your API

click Login

1/6Your button calls signInWithPopup with a GoogleAuthProvider.

The big ideas

What you need to know

Many sign-in methods

Email and password, phone OTP, Google, GitHub and more. Turn each one on in the Firebase console.

Listen for the user

onAuthStateChanged tells you when someone logs in or out, including after a page refresh.

ID tokens for your backend

Call user.getIdToken() and send it to your server. Verify it there with the Firebase Admin SDK.

The config is public

The firebaseConfig object isn't a secret. Your data is protected by Security Rules, so write them properly.

See it in code

Walk through the code

1import { initializeApp } from "firebase/app";2import {3  getAuth, GoogleAuthProvider, signInWithPopup, onAuthStateChanged, signOut,4} from "firebase/auth";5 6const app = initializeApp(firebaseConfig);7const auth = getAuth(app);8 9export const login = () => signInWithPopup(auth, new GoogleAuthProvider());10export const logout = () => signOut(auth);11 12onAuthStateChanged(auth, (user) => {13  if (user) console.log("Logged in as", user.email);14  else console.log("Logged out");15});

1/4Import only the Firebase functions you need from the modular SDK.

This is the modular Firebase SDK, so you import only the functions you use. onAuthStateChanged fires once on load too, so use it to hide or show the login button.

Save yourself the pain

Common mistakes

Oops

Reading auth.currentUser right on page load and getting null.

Do this instead

Firebase restores the session asynchronously. Wait for onAuthStateChanged before deciding the user is logged out.

Oops

Leaving Firestore rules as 'allow read, write: if true'.

Do this instead

Check request.auth in your rules so each user can only touch their own data.

Your mission

A login page in one sitting

~30 min

Quick check

You find your firebaseConfig (with apiKey) in your public JS bundle. What should you do?

Go deeper

1Set up a Firebase project and add email/password sign-up and login.
2Add a social provider (Google) alongside email/password.
3Learn how Firebase Auth's client SDK keeps the user's session in sync automatically.