From b0141df404a5ce1854255df7c852098830524d77 Mon Sep 17 00:00:00 2001 From: Todor Totev <51530311+todortotev@users.noreply.github.com> Date: Sat, 20 Jun 2020 18:59:53 +0300 Subject: [PATCH] [Examples] Remove getInitialProps from with-cookie-auth-fauna (#13887) * Remove getInitialProps * added swr * Update examples/with-cookie-auth-fauna/pages/profile.js Co-authored-by: Luis Alvarez D. * Update examples/with-cookie-auth-fauna/pages/profile.js Co-authored-by: Luis Alvarez D. * no longer needed * new .env support * redirect if not found * always use latest next version * no longer needed * Updated readme * Updated profile page * Fixed readme and added deploy button Co-authored-by: Luis Alvarez D. --- examples/with-cookie-auth-fauna/.env | 1 - .../with-cookie-auth-fauna/.env.local.example | 1 + examples/with-cookie-auth-fauna/README.md | 31 ++++++--- .../with-cookie-auth-fauna/next.config.js | 8 --- examples/with-cookie-auth-fauna/package.json | 7 +- .../with-cookie-auth-fauna/pages/profile.js | 66 ++++++++----------- examples/with-cookie-auth-fauna/utils/auth.js | 4 -- 7 files changed, 51 insertions(+), 67 deletions(-) delete mode 100644 examples/with-cookie-auth-fauna/.env create mode 100644 examples/with-cookie-auth-fauna/.env.local.example delete mode 100644 examples/with-cookie-auth-fauna/next.config.js diff --git a/examples/with-cookie-auth-fauna/.env b/examples/with-cookie-auth-fauna/.env deleted file mode 100644 index a18b1c0c71eee..0000000000000 --- a/examples/with-cookie-auth-fauna/.env +++ /dev/null @@ -1 +0,0 @@ -FAUNA_SERVER_KEY="" \ No newline at end of file diff --git a/examples/with-cookie-auth-fauna/.env.local.example b/examples/with-cookie-auth-fauna/.env.local.example new file mode 100644 index 0000000000000..1fd6e66e43ae3 --- /dev/null +++ b/examples/with-cookie-auth-fauna/.env.local.example @@ -0,0 +1 @@ +FAUNA_SERVER_KEY="" \ No newline at end of file diff --git a/examples/with-cookie-auth-fauna/README.md b/examples/with-cookie-auth-fauna/README.md index e37222ac1ad2a..38f4d16a3ae6a 100644 --- a/examples/with-cookie-auth-fauna/README.md +++ b/examples/with-cookie-auth-fauna/README.md @@ -4,7 +4,7 @@ In this example, we authenticate users and store a token in a secure (non-JS) co This example uses [Fauna](https://fauna.com/) as the auth service and DB. -The repo includes a minimal auth backend built with the new [API Routes support](https://github.com/vercel/next.js/pull/7296) (`pages/api`), [Micro](https://www.npmjs.com/package/micro), [Fauna for Auth](https://app.fauna.com/tutorials/authentication) and [dotenv](https://github.com/vercel/next.js/tree/canary/examples/with-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). +The repo includes a minimal auth backend built with [API Routes](https://nextjs.org/docs/api-routes/introduction) and [Fauna for Auth](https://app.fauna.com/tutorials/authentication). 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. @@ -38,11 +38,16 @@ First, you'll need to create an account on [Fauna](https://fauna.com/), then fol 1. In the [FaunaDB Console](https://dashboard.fauna.com/), 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. +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. +5. Create the `.env.local` file (which will be ignored by Git) based on the `.env.local.example` file in this directory: -> For more information, read the [User Authentication Tutorial in Fauna](https://app.fauna.com/tutorials/authentication). +```bash +cp .env.local.example .env.local +``` -> **Add `.env` to `.gitignore`**, files with secrets should never be in the cloud, we have it here for the sake of the example. +6. Paste the secret you copied as the value for `FAUNA_SERVER_KEY` in the `.env.local` file. Keep this key safely as it has privileged access to your database. + +> For more information, read the [User Authentication Tutorial in Fauna](https://app.fauna.com/tutorials/authentication). Now, install it and run: @@ -54,12 +59,18 @@ yarn yarn dev ``` -### Deploy +### Deploy on Vercel -We'll use [now](https://vercel.com/now) to deploy our app, first we need to add the server key as a secret using [now secrets](https://vercel.com/docs/v2/serverless-functions/env-and-secrets/?query=secrets#adding-secrets), like so: +You can deploy this app to the cloud with [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). -```bash -now secrets add fauna-secret-key "ENTER YOUR FAUNA SERVER KEY" -``` +#### Deploy Your Local Project + +To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and [import to Vercel](https://vercel.com/import/git?utm_source=github&utm_medium=readme&utm_campaign=next-example). + +**Important**: When you import your project on Vercel, make sure to click on **Environment Variables** and set them to match your `.env.local` file. + +#### Deploy from Our Template + +Alternatively, you can deploy using our template by clicking on the Deploy button below. -Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/select-scope?c=1&s=https://github.com/vercel/next.js/tree/canary/examples/with-cookie-auth-fauna&id=70107786&env=FAUNA_SERVER_KEY&envDescription=API%20Keys%20required%20by%20Fauna%20CMS&envLink=https://github.com/vercel/next.js/tree/canary/examples/with-cookie-auth-fauna%23run-locally) diff --git a/examples/with-cookie-auth-fauna/next.config.js b/examples/with-cookie-auth-fauna/next.config.js deleted file mode 100644 index 0af65b417dc82..0000000000000 --- a/examples/with-cookie-auth-fauna/next.config.js +++ /dev/null @@ -1,8 +0,0 @@ -require('dotenv').config() - -module.exports = { - env: { - // Set the fauna server key in the .env file and make it available at Build Time. - FAUNA_SERVER_KEY: process.env.FAUNA_SERVER_KEY, - }, -} diff --git a/examples/with-cookie-auth-fauna/package.json b/examples/with-cookie-auth-fauna/package.json index 501e8dc6b7eb5..55016b9223d45 100644 --- a/examples/with-cookie-auth-fauna/package.json +++ b/examples/with-cookie-auth-fauna/package.json @@ -7,11 +7,10 @@ }, "dependencies": { "cookie": "^0.4.0", - "dotenv": "8.2.0", "faunadb": "2.10.0", - "js-cookie": "^2.2.0", - "next": "^9.0.1", + "next": "^latest", "react": "^16.8.6", - "react-dom": "^16.8.6" + "react-dom": "^16.8.6", + "swr": "0.2.3" } } diff --git a/examples/with-cookie-auth-fauna/pages/profile.js b/examples/with-cookie-auth-fauna/pages/profile.js index 3f3361a80fa52..e76b566837645 100644 --- a/examples/with-cookie-auth-fauna/pages/profile.js +++ b/examples/with-cookie-auth-fauna/pages/profile.js @@ -1,17 +1,35 @@ -import cookie from 'cookie' -import Router from 'next/router' +import { useEffect } from 'react' +import { useRouter } from 'next/router' +import useSWR from 'swr' import { withAuthSync } from '../utils/auth' -import { FAUNA_SECRET_COOKIE } from '../utils/fauna-auth' -import { profileApi } from './api/profile' import Layout from '../components/layout' -const Profile = (props) => { - const { userId } = props +const fetcher = (url) => + fetch(url).then((res) => { + if (res.status >= 300) { + throw new Error('API Client error') + } + + return res.json() + }) + +const Profile = () => { + const router = useRouter() + const { data: user, error } = useSWR('/api/profile', fetcher) + + useEffect(() => { + if (error) router.push('/') + }, [error, router]) return ( -

Your user id is {userId}

- + {error ? ( +

An error has ocurred: {error.message}

+ ) : user ? ( +

Your user id is {user.userId}

+ ) : ( +

Loading...

+ )}