Skip to content

colinhacks/next-firebase-ssr

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
January 23, 2021 20:53
August 9, 2020 17:16
August 9, 2020 17:16
November 28, 2020 15:18
February 3, 2021 14:38
November 28, 2020 15:18
August 9, 2020 17:16
November 20, 2020 13:51
August 9, 2020 17:16
August 9, 2020 17:16

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 next@9.5.4 . Currently you must be on the canary release of Next for this approach to work ( yarn add next@canary ).

Versions

  • next@10
  • react@17
  • firebase@8
  • firebase-admin@9.4
  • nookies@2.5

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 git@github.com: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

About

An Next.js example repo for building authenticated pages with Firebase Authentication, cookies, and getServerSideProps

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published