Skip to content

Latest commit

 

History

History
70 lines (45 loc) · 3.23 KB

File metadata and controls

70 lines (45 loc) · 3.23 KB

With Cookie Auth and Fauna

How to use

Using create-next-app

Download create-next-app to bootstrap the example:

npm i -g create-next-app
create-next-app --example with-cookie-auth-fauna with-cookie-auth-fauna-app

Download manually

Download the example or clone the repo:

curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-cookie-auth-fauna
cd with-cookie-auth-fauna

Run locally

First, you'll need to create an account on Fauna, then follow these steps:

  1. In the FaunaDB Console, click "New Database". Name it whatever you like and click "Save".
  2. Click "New Collection", name it User, leave "Create collection index" checked, and click "Save".
  3. Now go to "Indexes" in the left sidebar, and click "New Index". Select the User collection, call it users_by_email, and in the "terms" field type data.email. Select the "Unique" checkbox and click "Save". This will create an index that allows looking up users by their email, which we will use to log a user in.
  4. Next, go to "Security" in the sidebar, then click "New Key". Create a new key with the Server role, call it server-key, and click "Save". Your key's secret will be displayed, copy that value and paste it as the value for FAUNA_SERVER_KEY in the .env file at the project root. Keep this key safely as it has privileged access to your database.

For more information, read the User Authentication Tutorial in Fauna.

Add .env to .gitignore, files with secrets should never be in the cloud, we have it here for the sake of the example.

Now, install it and run:

npm install
npm run dev
# or
yarn
yarn dev

Deploy

We'll use now to deploy our app, first we need to add the server key as a secret using now secrets, like so:

now secrets add fauna-secret-key "ENTER YOUR FAUNA SERVER KEY"

Then deploy it to the cloud:

now

The idea behind the example

In this example, we authenticate users and store a token in a secure (non-JS) cookie. The example only shows how the user session works, keeping a user logged in between pages.

This example uses Fauna as the auth service and DB.

The repo includes a minimal auth backend built with the new API Routes support (pages/api), Micro, Fauna for Auth and dotenv for environment variables. The backend allows the user to create an account (a User document), login, and see their user id (User ref id).

Session is synchronized across tabs. If you logout your session gets removed on all the windows as well. We use the HOC withAuthSync for this.

The helper function auth helps to retrieve the token across pages and redirects the user if not token was found.