This project demonstrates how to implement authenticated server-side rendering with Next.js and Firebase Authentication.
Update November 22, 2022: Updated next, React, firebase and firebase-admin. Additionally firebase code reflects current firebase 9 implementations.
Update November 19, 2020: A bug has been fixed where the Firebase tokens would expire after an hour without being refreshed. All tokens are now force refreshed every 10 minutes.
Update November 9, 2020: this repo has been updated to use the redirect functionality introduced in
[email protected]
. Currently you must be on thecanary
release of Next for this approach to work (yarn add next@canary
).
next@13
react@18
firebase@9
[email protected]
[email protected]
Full walkthrough and documentation here: Authenticated server-side rendering with Next.js and Firebase.
To run this example:
- Clone the repo:
git clone [email protected]:vriad/next-firebase-ssr.git
- Navigate into directory:
cd next-firebase-ssr
- Install dependencies:
yarn
- Create a Firebase project if you haven't already. Make sure you go into the Authentication tab in the Console, go to "Sign-in method", and enable "Email/Password"
- Add your Firebase client credentials to
firebaseClient.ts
. To get these, go to the Firebase Console > open your project > Gear Icon > Project Settings > General > Your apps > Firebase SDK Snippet > click the "Config" radio button > copy/paste. - Add your service account (Admin) credentials to the project. To do this, go to the Firebase Console > open your project > click the gear icon > Project Settings > Service Accounts > click Node.js > Generate new private key. Open the JSON file that downloads. Then create a copy of
.env.local.example
and rename it to.env.local
. This is the file where you will put your secret Firebase credentials. Copy/paste the values from the private key JSON file over to the new.env.local
file:privateKey
becomesPRIVATE_KEY
,project_id
becomesPROJECT_ID
, andclientEmail
becomesCLIENT_EMAIL
. - Run
yarn dev
- Go to
localhost:3000