483bd3ddda
* Find/replace * Update more URLs * More rename * Fix remaining examples * More updates * Update create-next-app * Update remaining text * Update Co-authored-by: Shu Uesugi <shu@chibicode.com> |
||
---|---|---|
.. | ||
components | ||
pages | ||
utils | ||
.env | ||
next.config.js | ||
now.json | ||
package.json | ||
README.md |
With Cookie Auth and Fauna
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.
How to use
Using create-next-app
Execute create-next-app
with npm or Yarn to bootstrap the example:
npm init next-app --example with-cookie-auth-fauna with-cookie-auth-fauna-app
# or
yarn 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:
- In the FaunaDB Console, click "New Database". Name it whatever you like and click "Save".
- Click "New Collection", name it
User
, leave "Create collection index" checked, and click "Save". - Now go to "Indexes" in the left sidebar, and click "New Index". Select the
User
collection, call itusers_by_email
, and in the "terms" field typedata.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. - Next, go to "Security" in the sidebar, then click "New Key". Create a new key with the
Server
role, call itserver-key
, and click "Save". Your key's secret will be displayed, copy that value and paste it as the value forFAUNA_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"
Deploy it to the cloud with Vercel (Documentation).