firebase / firebase/firebase-tools

`__firebaseAppName` not available in search params with Next.js App Router

Open
#6,245 2 comments 1 reaction 0 assignees View on GitHub
integration: web frameworks type: bug
Dominant language
TypeScript
Stars
4.5k
Forks
1.3k
Avg merge
1d 12h
Merged PRs (30d)
84

Description

### [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](https://firebase.google.com/docs/hosting/frameworks/nextjs#optional_integrate_with_firebase_authentication).

### [REQUIRED] Steps to reproduce

1. `npx create-next-app@latest`
1. when asked _Would you like to use App Router? (recommended)_, answer "Yes"
1. `firebase init hosting`
2. Access `searchParams` either in a server component or client component:

server component:

```tsx
import { getApp } from "firebase/app";

export default async function Home({
searchParams,
}: {
searchParams: { [key: string]: string | string[] | undefined };
}) {
return (

searchParams: {JSON.stringify(searchParams ?? "not found", null, 2)}

);
}
```

or client component:

```tsx
"use client";

import { getApp } from "firebase/app";
import { useSearchParams } from "next/navigation";

export default function SignInButton() {
const firebaseApp = useSearchParams().get("__firebaseAppName");
return (
<>

Client component



authenticated Firebase App name (from{" "}
useSearchParams().get("__firebaseAppName"))


__firebaseAppName: {JSON.stringify(firebaseApp)}


);
}
```

### [REQUIRED] Expected behavior

`__firebaseAppName` is available, as documented: https://firebase.google.com/docs/hosting/frameworks/nextjs#optional_integrate_with_firebase_authentication

### [REQUIRED] Actual behavior

`__firebaseAppName` isn't available on the server or client

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the issue with `npx create-next-app@latest`, choosing App Router, then running `firebase init hosting` and checking `__firebaseAppName` through the documented server and client examples. Trace the Firebase Hosting Next.js integration used by that command; done means the documented parameter is available in both contexts or the documentation accurately reflects the supported behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
firebase, next.js, typescript
Domain
cloud, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.