An Next.js example repo for building authenticated pages with Firebase Authentication, cookies, and getServerSideProps
This project demonstrates how to implement authenticated server-side rendering with Next.js and Firebase Authentication.
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@10
react@17
firebase@8
[email protected]
[email protected]
Full walkthrough and documentation here: Authenticated server-side rendering with Next.js and Firebase.
To run this example:
git clone [email protected]:vriad/next-firebase-ssr.git
cd next-firebase-ssr
yarn
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..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
becomes PRIVATE_KEY
, project_id
becomes PROJECT_ID
, and clientEmail
becomes CLIENT_EMAIL
.yarn dev
localhost:3000