`__FIREBASE_DEFAULTS__` cookie not set in NextJS App Router app

[jhuleatt]

[REQUIRED] Environment info

firebase-tools: 12.4.7

Platform: macOS

[REQUIRED] Test case

When using Firebase Auth with a Next.js App Router (now the recommended router over Page Router), can't access the name of the initialized Firebase app as recommended in the docs.

[REQUIRED] Steps to reproduce

1. npx create-next-app@latest

   1. when asked Would you like to use App Router? (recommended), answer "Yes"

2. firebase init hosting

3. Access cookies in a server component:

   server component:

   import { cookies } from "next/headers";
   
   export default async function Home() {
     const allCookies = cookies().getAll();
   
     return (
       <main>
         <h1>
           Server component (<code>app/page.tsx</code>)
         </h1>
         <h3>All cookies on the server</h3>
         <pre>{JSON.stringify(allCookies, null, 2)}</pre>
       </main>
     );
   }
   

4. Try to auto-init FirebaseApp in a client component:

   "use client";
   
   import { initializeApp } from "firebase/app";
   
   // Calling with no arguments triggers auto-init
   const app = initializeApp();
   
   export default function SignInButton() {
   
     return (
       <>
         <h1>Client component</h1>
         <h3>Cookies available to the client:</h3>
         <pre>{JSON.stringify(document.cookie, null, 2)}</pre>
         <h3>
           Firebase App name from <code>initializeApp().name</code>
         </h3>
         <pre>{app.name}</pre>
       </>
     );
   }
   

[REQUIRED] Expected behavior

auto-init works on a deployed app

[REQUIRED] Actual behavior

auto-init works with firebase emulators:init, but doesn't work on a deployed app. Instead, the __FIREBASE_DEFAULTS__ cookie is not available, and the JS SDK errors with the following error:

FirebaseError: Firebase: Need to provide options, when not being deployed to hosting via source. (app/no-options).

[qwezey]

i am facing the same issue. @jhuleatt did you find a solution?

[WillZhao2021]

Facing same issue. Any resolution??

[WillZhao2021]

Think I figured out the root cause.

• This line adds the _autoTokenSyncUrl to __FIREBASE_DEFAULTS__ https://github.com/firebase/firebase-tools/blob/cf9379f89b20e8ea0cc36a485488399442155e4c/src/frameworks/index.ts#L330
• This line adds the __FIREBASE_DEFAULTS__ to the hosting config https://github.com/firebase/firebase-tools/blob/cf9379f89b20e8ea0cc36a485488399442155e4c/src/frameworks/index.ts#L552
• I checked my hosting config with https://firebase.google.com/docs/reference/hosting/rest/v1beta1/sites.releases/list, and the header is indeed there
• But the header is not on the actual responses. I think this is due to the fact that the cache-control header needs to be set to private, but app router does not do that for deployed next.js apps. ref- https://stackoverflow.com/questions/49716396/firebase-hosting-with-rewrite-to-function-doesnt-set-session-cookie

[deltaepsilon]

The only cookie that Firebase Functions will forward is __session. You have to name your cookie __session and it just works 🤦