Flaque / powerx-demo

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.

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)
• A little bit of React (learn this in 1h30m here)
• The existence of Firebase (you probably already know this)

Setting up or connect firebase

Set up Firebase:

• Create a project at the Firebase console.
• 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.]

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:

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 (download)

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.