Skip to content

Latest commit

 

History

History
32 lines (22 loc) · 2.12 KB

README.md

File metadata and controls

32 lines (22 loc) · 2.12 KB
Raw

Next.js + Firebase + 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 the canary release of Next for this approach to work ( yarn add next@canary ).

Versions

Documentation

Full walkthrough and documentation here: Authenticated server-side rendering with Next.js and Firebase.

How to use

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 becomes PRIVATE_KEY, project_id becomes PROJECT_ID, and clientEmail becomes CLIENT_EMAIL.
  • Run yarn dev
  • Go to localhost:3000