Need help with next-firebase-ssr?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

colinhacks
165 Stars 31 Forks 23 Commits 5 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

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 [email protected]
).

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.