https://github.com/flaque/powerx-demo
https://github.com/flaque/powerx-demo
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/flaque/powerx-demo
- Owner: Flaque
- Created: 2020-01-21T21:15:28.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-09T12:10:28.000Z (over 2 years ago)
- Last Synced: 2025-01-20T10:13:54.135Z (4 months ago)
- Language: JavaScript
- Size: 1.27 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Example: Firebase + Nextjs
Hey folks, apologies if this is too much to take in all at once; it's generally better to learn stuff incrementally.
But to show you how easy it is to get a real thing setup, here's an entire NextJS app that's hooked up to Firebase Authentication. It just requires you to setup Firebase Auth and then launch it with [ZEIT `now`.](https://zeit.co/)
If this overwhelms you, don't worry that's super normal. It's much easier than it initially appears. There's really only three things you need to learn here:
- A bit of npm; (checkout this [cheatsheet](https://gist.github.com/Flaque/df4e8676c243507cdd2a69b2c3610647))
- A little bit of React (learn this in [1h30m here](https://reactjs.org/tutorial/tutorial.html))
- The existence of Firebase (you probably already know this)
## Setting up or connect firebase
Set up Firebase:
- Create a project at the [Firebase console](https://console.firebase.google.com/).
- Get your account credentials from the Firebase console at _Project settings > Service accounts_, where you can click on _Generate new private key_ and download the credentials as a json file. It will contain keys such as `project_id`, `client_email` and `client_id`. Set them as environment variables in the `.env` file at the root of this project.
- Get your authentication credentials from the Firebase console under _Project settings > General> Your apps_ Add a new web app if you don't already have one. Under _Firebase SDK snippet_ choose _Config_ to get the configuration as JSON. It will include keys like `apiKey`, `authDomain` and `databaseUrl`. Set the appropriate environment variables in the `.env` file at the root of this project.
- Set the environment variables `SESSION_SECRET_CURRENT` and `SESSION_SECRET_PREVIOUS` in the `.env` file. (These are used by [`cookie-session`](https://github.com/expressjs/cookie-session/#secret).]
## Setup
This project assumes you have `node` installed on your computer and are roughly familiar with the command line. If you don't, install it here: https://nodejs.org/en/.
The first time you download this, let `npm` setup your environment for you in the command line:
```
npm install
```
Then, you can run your website with:
```bash
npm run dev
```
It will create a local version at http://localhost:3000.
### Troubleshooting
If you get a "Error: Session secrets must be set as env vars `SESSION_SECRET_CURRENT` and `SESSION_SECRET_PREVIOUS`." error, then you haven't setup Firebase correctly!
## Deploying your website
Don't wait to deploy your website! Do this as soon as possible before you start hacking on stuff, it'll save you a lot of time. Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
```bash
now
```
After `now` successfully deploys, a URL will for your site will be displayed. Copy that URL and navigate to your Firebase project's Authentication tab. Scroll down in the page to "Authorized domains" and add that URL to the list.