angularfire icon indicating copy to clipboard operation
angularfire copied to clipboard

Documentation issue in Authentication with SSR

Open perissf1 opened this issue 1 year ago • 3 comments

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?

perissf1 avatar Dec 06 '24 13:12 perissf1

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

google-oss-bot avatar Dec 06 '24 13:12 google-oss-bot

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 avatar Dec 12 '24 21:12 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. https://github.com/angular/angularfire/blob/bc926a84d5877eb470055a61c731005b51a1b6d4/sample/src/app/auth/auth.component.ts#L68-L93
  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 https://github.com/angular/angularfire/blob/bc926a84d5877eb470055a61c731005b51a1b6d4/sample/src/server.ts#L30
  3. Inject the request context into the FirebaseApp provider on the server, pass the idToken to initializeServerApp https://github.com/angular/angularfire/blob/bc926a84d5877eb470055a61c731005b51a1b6d4/sample/src/app/app.config.server.ts#L14-L21
  4. Make sure to pass FirebaseServerApp to your SDK instance providers, as FirebaseServerApp is not picked up by default https://github.com/angular/angularfire/blob/bc926a84d5877eb470055a61c731005b51a1b6d4/sample/src/app/app.config.ts#L16
  5. Auth.currentUser will now be immutably locked to that user on a server render pass

jamesdaniels avatar Dec 14 '24 03:12 jamesdaniels