\n
![\"Firefuse\"](\"https://firefuse.io/_static/icons/firefuse.svg\"){kind=icon}
\n\n\n Installation •\n Contributing •\n Credits •\n Security •\n
\n\n---\n\n## Installation\n\n### Add Firefuse to your project\n\n```sh\nnpm install @firefuse/nextjs\n```\n\n## Usage in the application\n\n### Configure Firefuse\n\nCreate firefuse.config.ts file and set following content.\n\n```ts\nimport Firefuse from '@firefuse/nextjs';\n\nconst baseUrl = process.env[]\n\nFirefuse.init({\n // this is url used by you app\n baseUrl: 'https://your-url.com',\n // Keep it false for your production, it can display some additional information if you notice any errros with authentication flow\n debug: true|false,\n // Firebase api key, you can find it in the firebase config\n apiKey: Env.getOrThrow('FIREFUSE_APP_API_KEY'),\n // This is firefuse application subdomain ex. your-app.firefuse.io, you should set just your-app\n applicationDomain: Env.getOrThrow('FIREFUSE_APP_APPLICATION_DOMAIN'),\n // These are necessary service account fields, you can find it in service account json\n serviceAccount: {\n project_id: Env.getOrThrow('APP_FIREBASE_PROJECT_ID'),\n private_key: Env.getOrThrow('APP_FIREBASE_ADMIN_PRIVATE_KEY').replace(\n /\\\\n/g,\n '\\n'\n ),\n client_email: Env.getOrThrow('APP_FIREBASE_ADMIN_CLIENT_EMAIL'),\n private_key_id: Env.getOrThrow('APP_FIREBASE_ADMIN_PRIVATE_KEY_ID'),\n },\n});\n\n```\n\nCreate a instrumenation.ts file with the following content:\n\n```ts\nexport async function register() {\n await import(\"./firefuse.config\");\n}\n```\n\n### Create proxy\n\nAdd proxy.ts file with the following content.\n\n```tsx\nimport { firefuseAuthMiddleware } from \"@firefuse/nextjs/server\";\nimport type { NextRequest } from \"next/server\";\nimport { NextResponse } from \"next/server\";\n\nexport const config = {\n matcher: [\n /*\n * Match all paths except for:\n * 3. /_next (Next.js internals)\n * 4. /_static (inside /public)\n * 5. all root files inside /public (e.g. /favicon.ico)\n */\n \"/((?!_next/|_static/|_vercel|[\\\\w-]+\\\\.\\\\w+).*)\",\n ],\n};\n\nexport default async function proxy(req: NextRequest) {\n // This sets necessary endpoints\n const response = await firefuseAuthMiddleware(req);\n\n if (response) {\n return response;\n }\n\n return NextResponse.next();\n}\n```\n\n### Set the firebase auth configuration\n\n```tsx\nimport { getAuth } from \"firebase/auth\";\nimport { initializeApp } from \"firebase/app\";\n\n/**\n * Depends on your project setup, you may want to use firebase config directly\n * or like here via environment variables.\n */\nexport const firebaseConfig = {\n apiKey: Env..getOrThrow('NEXT_PUBLIC_FIREBASE_API_KEY'),\n authDomain: Env.getOrThrow('NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN'),\n projectId: Env..getOrThrow('NEXT_PUBLIC_FIREBASE_PROJECT_ID'),\n storageBucket: Env..getOrThrow('NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET'),\n messagingSenderId: Env..getOrThrow('NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID'),\n appId: Env..getOrThrow('NEXT_PUBLIC_FIREBASE_APP_ID'),\n measurementId: Env..getOrThrow('NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID'),\n};\n\nconst firebaseApp = initializeApp(firebaseConfig);\n\nconst firebaseAuth = getAuth(firebaseApp);\n// here init firestore, analytics etc.\n\nexport { firebaseAuth };\n```\n\n### Use the `FirefuseProvider`\n\nAuthProvider let you access user in client components.\n\n```tsx\n// layout\nimport type { ReactNode } from \"react\";\nimport { AuthProvider } from \"./auth-provider\";\n\nexport default function RootLayout({\n children,\n}: Readonly<{\n children: ReactNode;\n}>) {\n return![\"GitHub](\"https://img.shields.io/github/last-commit/1devstudio/firefuse-react.svg?style=flat-square&logo=github&logoColor=white\"\n)
\n ![\"GitHub](\"https://img.shields.io/github/issues-raw/1devstudio/firefuse-react.svg?style=flat-square&logo=github&logoColor=white\"\n)
\n ![\"GitHub](\"https://img.shields.io/github/issues-pr-raw/1devstudio/firefuse-react.svg?style=flat-square&logo=github&logoColor=white\"\n)
\n