Routing and Authentication

This page explains how Angular routing, route guards, and the auth flow work together in the game application.

For auth service methods and API payloads, see Reference.

Route Structure

app.routes.ts defines three independent top-level route groups. All three are lazy-loaded:

authGuard

The guard checks authService.isLoggedIn(). If the signal is false, it calls checkSession() once to handle cold starts where the Better Auth client has not yet resolved the session cookie.

If the session is still invalid after the check, the guard redirects to /auth/login with a returnUrl query param so the user lands back on the requested route after login.

Guest Play

/play-solo has no authGuard. Any visitor can play without creating an account.

AuthService — Session Signals

AuthService exposes two Angular signals:

• isLoggedIn: Signal<boolean> — true when a valid session exists
• user: Signal<User | null> — the authenticated user object

checkSession(forceFresh?) calls the Better Auth client. Pass true to bypass the cookie cache after a sensitive account change.

Common Mistake

INCORRECT: Reading user() immediately after a profile change without refreshing.
CORRECT: Call await authService.checkSession(true) before reading user() to get updated data from the database.

Auth Page Flows

Register

1. User submits name, nickname, email, password
2. authService.register() calls Better Auth sign-up
3. Better Auth sends a verification email
4. User lands on /auth/verify-email

Login

1. User submits email, password
2. authService.login() calls Better Auth sign-in
3. On success, checkSession() refreshes the signals
4. Guard passes and the user reaches /

Forgot / Reset Password

1. User submits email on /auth/forgot-password
2. authService.forgotPassword() triggers a Better Auth password-reset email
3. The email link opens /auth/reset-password?token=...
4. authService.resetPassword(newPassword, token) completes the reset

Confirm Account Change

The /auth/confirm-account-change page handles all three confirmed-change flows (profile, email, password). It reads the token query param and calls authService.confirmAccountChange(token).

After a password confirmation, requiresLogin is true. The page redirects to /auth/login.

Profile Page

ProfileComponent (at /profile) provides three independent forms:

Form	API call	Result
Name / Nickname	requestProfileChange(name, nickname)	Confirmation email sent
New Email	requestEmailChange(newEmail)	Two-step email flow starts
Password	requestPasswordChange(current, new)	Confirmation email sent

Each form shows a MatSnackBar confirmation and resets on success. Errors appear inline below the form field.

The callbackURL for all three flows defaults to window.location.origin + '/auth/confirm-account-change'.