firebase / firebase/firebase-tools
`__firebaseAppName` not available in search params with Next.js App Router
- 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
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