docs(auth): rewrite the server-side rendering section - #3740
Open
armando-navarro wants to merge 1 commit into
Open
docs(auth): rewrite the server-side rendering section#3740armando-navarro wants to merge 1 commit into
armando-navarro wants to merge 1 commit into
Conversation
The old section documented a setup that no longer works. It described reading the ID token from an Authorization header via REQUEST, whose headers it accessed with Node property syntax even though REQUEST is a standard Request, and its snippet had a typo in an import, a missing paren, two identifiers used without importing them, and a bare placeholder that does not parse. The new section documents the path that works today, verified end to end against a brand new Angular 21 SSR app that added AngularFire with ng add. A signed-in user now provably gets a signed-in server render. Four things the old section omitted, each of which silently produced a signed-out page with no error to debug against: - The CLI scaffolds every route as RenderMode.Prerender, and Angular supplies REQUEST and REQUEST_CONTEXT only on RenderMode.Server routes, so the token never reaches the render. - The generated server.ts already has a handler that renders the app. Adding a second one rather than replacing it means the original wins and the token is never passed in. - ng add writes provideAuth and provideFirestore with no argument, which resolves the default app. On a signed-in request the factory builds a server app instead, so those providers fail on a freshly started server. - Registering more than one Firebase app makes AngularFire fall back to the default app, which discards the server app entirely. beforeAuthStateChanged is imported from firebase/auth rather than @angular/fire/auth, and the section says why. The AngularFire wrapper marks the app busy until the callback first runs, and that callback only runs on a sign-in or sign-out, so importing it from AngularFire makes ng build hang during route extraction and fail with a timeout. Also corrects the emulator example further down the file, which used the no-argument getAuth that the new section warns against.
armando-navarro
added
comp: auth
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Checklist
yarn install,yarn testrun successfully?: not applicable, no source changedDescription
Rewrites the Server-side Rendering section of
docs/auth.md, which documented a setup that does not work.Defects in the old section:
inject(REQUEST)andrequest.headers.authorization, butREQUESTis a standardRequest, so headers come fromheaders.get(...).initializeServeAppin the import list is a typo.provideAuthis missing its closing paren.REQUESTandFirebaseAppare used without being imported. Documentation issue in Authentication with SSR #3585 is a reader hitting this one....placeholder inside the providers array does not parse.The new section documents the path that works, as four steps, each with the reason it is needed:
RenderMode.Serveron any route that has to render as the signed-in user.ng new --ssrscaffolds every route asRenderMode.Prerender, and Angular suppliesREQUESTandREQUEST_CONTEXTonly on server-rendered routes.__sessioncookie kept in sync with the ID token, withsecureandsameSiteset, and why that cookie name matters behind Firebase Hosting.server.tsrather than adding a second one.inject(FirebaseApp)to every provider, not onlyprovideAuth, becauseng addwrites them with no argument.Leaving out any one of the four still renders the page, signed out, with no error anywhere. That silence is what made the old section expensive to debug, so each step states what breaks without it.
The section was written against a new
ng new --ssrAngular 21 app set up withng add @angular/fire@next, where a signed-in user's first request to a freshly started server returns signed-in HTML.One import is deliberately inconsistent, and the section explains it:
beforeAuthStateChangedcomes fromfirebase/auth, not@angular/fire/auth.ng buildhang during route extraction and fail with a timeout.Also corrects the emulator example further down the same file, which used the no-argument
getAuththat the new section warns against.Documentation only, no source or API changes.
Fixes #3585