Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/colinhacks/next-firebase-ssr
An Next.js example repo for building authenticated pages with Firebase Authentication, cookies, and getServerSideProps
https://github.com/colinhacks/next-firebase-ssr
authentication firebase firebase-auth nextjs ssr
Last synced: 2 days ago
JSON representation
An Next.js example repo for building authenticated pages with Firebase Authentication, cookies, and getServerSideProps
- Host: GitHub
- URL: https://github.com/colinhacks/next-firebase-ssr
- Owner: colinhacks
- Created: 2020-08-10T00:14:47.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T22:07:32.000Z (about 2 years ago)
- Last Synced: 2025-01-20T16:14:01.625Z (10 days ago)
- Topics: authentication, firebase, firebase-auth, nextjs, ssr
- Language: TypeScript
- Homepage: https://vriad.com/essays/nextjs-firebase-authentication
- Size: 274 KB
- Stars: 425
- Watchers: 10
- Forks: 61
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://github.com/vercel/next.js/discussions/14890) introduced in `[email protected]` . 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`
* `[email protected]`
* `[email protected]`### Documentation
Full walkthrough and documentation here: [Authenticated server-side rendering with Next.js and Firebase](https://colinhacks.com/essays/nextjs-firebase-authentication).
### 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`