Documentation issue in Authentication with SSR

[perissf1]

Angularfire Authentication guide shows how to support Auth context in server-side rendering. In the code sample, this line doesn't compile:

  const request = inject(REQUEST, { optional: true });

Because the compiler Cannot find name 'REQUEST'.

What's the correct import to add?

[google-oss-bot]

This issue does not seem to follow the issue template. Make sure you provide all the required information.

[jamesdaniels]

Angular no longer includes that injection token by default, you need to add it to your server.ts manually. I'll work on documentation here

[jamesdaniels]

Still need to document, so I'll keep this issue open but I've added SSR authentication in the new ng19 based sample application in the root of this repo.

1. Persist the user's idToken in a Cookie while on the browser—to combat race conditions use both onIdTokenChanged and beforeAuthStateChanged. We're working to make a better API here in the future.

   angularfire/sample/src/app/auth/auth.component.ts

   Lines 68 to 93 in bc926a8

   	this.unsubscribeFromOnIdTokenChanged = onIdTokenChanged(this.auth, async (user) => {
   	if (user) {
   	const idToken = await user.getIdToken();
   	cookies.set("__session", idToken);
   	} else {
   	cookies.remove("__session");
   	}
   	});
   	let priorCookieValue: string|undefined;
   	this.unsubscribeFromBeforeAuthStateChanged = beforeAuthStateChanged(this.auth, async (user) => {
   	priorCookieValue = cookies.get("__session");
   	const idToken = await user?.getIdToken();
   	if (idToken) {
   	cookies.set("__session", idToken);
   	} else {
   	cookies.remove("__session");
   	}
   	}, async () => {
   	// If another beforeAuthStateChanged rejects, revert the cookie (best-effort)
   	if (priorCookieValue) {
   	cookies.set("__session", priorCookieValue);
   	} else {
   	cookies.remove("__session");
   	}
   	});

2. Now that the idToken is stored in a cookie, we should parse it out in Express. REQUEST is back but is appears to be blank, so let's pass it into our application's render via request context

   angularfire/sample/src/server.ts

   Line 30 in bc926a8

   .handle(req, { authIdToken: req.cookies?.__session })

3. Inject the request context into the FirebaseApp provider on the server, pass the idToken to initializeServerApp

   angularfire/sample/src/app/app.config.server.ts

   Lines 14 to 21 in bc926a8

   	provideFirebaseApp(() => {
   	// TODO migrate to REQUEST once that's working
   	const requestContext = inject(REQUEST_CONTEXT, { optional: true }) as {
   	authIdToken: string,
   	} | undefined;
   	const authIdToken = requestContext?.authIdToken;
   	return initializeServerApp(environment.firebase, { authIdToken });
   	}),

4. Make sure to pass FirebaseServerApp to your SDK instance providers, as FirebaseServerApp is not picked up by default

   angularfire/sample/src/app/app.config.ts

   Line 16 in bc926a8

   const auth = getAuth(inject(FirebaseApp));

5. Auth.currentUser will now be immutably locked to that user on a server render pass