Firebase logins

Play this lesson

Which save is yours?

Imagine a giant wall of lockers, one for every player. The server must open the right one for you, and never someone else's. Proving who you are is called authentication. Firebase does it for us with Firebase Authentication, which can log players in with Google, Apple, email and more.

But a first screen saying "Email. Password. Confirm password." makes lots of players quit. So we start with anonymous sign-in: the moment the game opens, Firebase quietly makes a new account. No forms, no names.

Quick check

What does anonymous sign-in do?

  1. Makes an account automatically, with no form to fill in
  2. Lets players use someone else's account
  3. Asks for the player's name and address
Show the answer

Makes an account automatically, with no form to fill in

Anonymous sign-in creates an account the moment the game starts. Players get straight to the fun, and the server can still keep their save.

The real code

First, we switch on Anonymous in the Firebase console, under Authentication and Sign-in method. If we forget, the sign-in call fails with an error. Then the game runs:

import { getAuth, signInAnonymously }
  from "firebase/auth";
const auth = getAuth(app);
const cred = await signInAnonymously(auth);
console.log(cred.user.uid);

await waits for Firebase's servers to answer without freezing the game. The answer holds the new user.

Your UID and your login pass

Every account gets a user ID, or UID: a long random code like k3P9xQ2mVbT8... It's your locker number. It says nothing about who you are.

Firebase also gives the game an ID token: a digitally signed pass that proves "this request comes from UID k3P9...". The SDK attaches it to every request. A token lasts one hour, and the SDK quietly swaps it for a fresh one, so players never notice.

Bolt says: Anonymous means "without a name". The server knows it's the same player each time, but not who they are in real life.

Bug hunt

start.js
const auth = getAuth(app);signInAnonymously(auth);const uid = auth.currentUser.uid;loadSave(uid);

Sometimes Garden Defense crashes at start with "Cannot read properties of null". Which line causes it?

  1. Line 1
  2. Line 3
  3. Line 4
Show the answer

Line 3

Line 2 starts signing in but does not wait. On line 3 the answer hasn't arrived, so currentUser is still null. The fix is await signInAnonymously(auth), or onAuthStateChanged, which runs once Firebase knows who is logged in.

Linking a real account later

Anonymous accounts have a weak spot. The login lives on that one device, so if a player deletes the game or clears the browser, the account is lost, and so is the progress.

The fix is linking. Later, the player connects a real account:

linkWithPopup(auth.currentUser,
  new GoogleAuthProvider());

Firebase keeps the same UID, so every wave, seed and high score stays exactly where it was. Now they can log in on any device.

Quick check

When a player links a real account, they have to start the game over from the beginning.

Show the answer

False

Linking keeps the same UID, so all the progress stays. The player simply gains a way to log in again on any device.

Logins and young players

Form check

welcome-screen.js
const askNewPlayer = [  "nickname",  "favouriteColour",  "schoolName",  "sprigHatStyle",];

Remy asked Claude to draft the first screen of Garden Defense. Which line should we remove?

  1. Line 2
  2. Line 3
  3. Line 4
  4. Line 5
Show the answer

Line 4

A school name helps a stranger find a real child, and the game doesn't need it to run. A nickname, a colour and a hat style are fun and say nothing about who you are.

Now the server knows you

Each player now has a UID, and every request carries a pass that proves it. That's the key to the next big step: giving every player a save that lives in the cloud, filed under their UID.

Bolt says: Anonymous first, link later. Players start in one tap and still keep their progress.

Fact-checked 9 October 2026