diff --git a/examples/auth0/.env.local.example b/examples/auth0/.env.local.example new file mode 100644 index 0000000000000..4946e625c14e5 --- /dev/null +++ b/examples/auth0/.env.local.example @@ -0,0 +1,11 @@ +# Public Environment variables that can be used in the browser. +NEXT_PUBLIC_AUTH0_CLIENT_ID= +NEXT_PUBLIC_AUTH0_SCOPE="openid profile" +NEXT_PUBLIC_AUTH0_DOMAIN= +NEXT_PUBLIC_REDIRECT_URI="http://localhost:3000/api/callback" +NEXT_PUBLIC_POST_LOGOUT_REDIRECT_URI="http://localhost:3000" + +# Secret environment variables only available to Node.js +AUTH0_CLIENT_SECRET= +SESSION_COOKIE_SECRET= +SESSION_COOKIE_LIFETIME=7200 diff --git a/examples/auth0/.env.template b/examples/auth0/.env.template deleted file mode 100644 index 52f96ccb544fb..0000000000000 --- a/examples/auth0/.env.template +++ /dev/null @@ -1,6 +0,0 @@ -AUTH0_CLIENT_ID= -AUTH0_DOMAIN= -AUTH0_CLIENT_SECRET= -REDIRECT_URI= -POST_LOGOUT_REDIRECT_URI= -SESSION_COOKIE_SECRET= diff --git a/examples/auth0/.gitignore b/examples/auth0/.gitignore index de436342e9529..1437c53f70bc2 100644 --- a/examples/auth0/.gitignore +++ b/examples/auth0/.gitignore @@ -24,9 +24,6 @@ npm-debug.log* yarn-debug.log* yarn-error.log* -# auth0 env -.env - # local env files .env.local .env.development.local diff --git a/examples/auth0/README.md b/examples/auth0/README.md index 02f9d0df4671a..5368bd1c33145 100644 --- a/examples/auth0/README.md +++ b/examples/auth0/README.md @@ -1,10 +1,17 @@ # Next.js and Auth0 Example -This example shows how you can use `@auth0/nextjs-auth` to easily add authentication support to your Next.js application. +This example shows how you can use `@auth0/nextjs-auth` to easily add authentication support to your Next.js application. It tries to cover a few topics: + +- Signing in +- Signing out +- Loading the user on the server side and adding it as part of SSR ([`pages/advanced/ssr-profile.js`](pages/advanced/ssr-profile.js)) +- Loading the user on the client side and using fast/cached SSR pages ([`pages/index.js`](pages/index.js)) +- API Routes which can load the current user ([`pages/api/me.js`](pages/api/me.js)) +- Using hooks to make the user available throughout the application ([`lib/user.js`](lib/user.js)) Read more: [https://auth0.com/blog/ultimate-guide-nextjs-authentication-auth0/](https://auth0.com/blog/ultimate-guide-nextjs-authentication-auth0/) -### Using `create-next-app` +## How to use Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: @@ -25,76 +32,32 @@ yarn create next-app --example auth0 auth0 4. Save the settings -### Configuring Next.js - -In the Next.js configuration file (`next.config.js`) you'll see that different environment variables are being assigned. - -### Local Development +### Set up environment variables -For local development you'll want to create a `.env` file with the necessary settings. +To connect the app with Auth0, you'll need to add the settings from your Auth0 application as environment variables -The required settings can be found on the Auth0 application's settings page: +Copy the `.env.local.example` file in this directory to `.env.local` (which will be ignored by Git): -``` -AUTH0_DOMAIN=YOUR_AUTH0_DOMAIN -AUTH0_CLIENT_ID=YOUR_AUTH0_CLIENT_ID -AUTH0_CLIENT_SECRET=YOUR_AUTH0_CLIENT_SECRET - -SESSION_COOKIE_SECRET=viloxyf_z2GW6K4CT-KQD_MoLEA2wqv5jWuq4Jd0P7ymgG5GJGMpvMneXZzhK3sL (at least 32 characters, used to encrypt the cookie) - -REDIRECT_URI=http://localhost:3000/api/callback -POST_LOGOUT_REDIRECT_URI=http://localhost:3000/ +```bash +cp .env.local.example .env.local ``` -### Hosting on Vercel - -When deploying this example to Vercel you'll want to update the `vercel.json` configuration file. - -```json -{ - "build": { - "env": { - "AUTH0_DOMAIN": "YOUR_AUTH0_DOMAIN", - "AUTH0_CLIENT_ID": "YOUR_AUTH0_CLIENT_ID", - "AUTH0_CLIENT_SECRET": "@auth0_client_secret", - "REDIRECT_URI": "https://my-website.now.sh/api/callback", - "POST_LOGOUT_REDIRECT_URI": "https://my-website.now.sh/", - "SESSION_COOKIE_SECRET": "@session_cookie_secret", - "SESSION_COOKIE_LIFETIME": 7200 - } - } -} -``` +Then, open `.env.local` and add the missing environment variables: -- `AUTH0_DOMAIN` - Can be found in the Auth0 dashboard under `settings`. -- `AUTH0_CLIENT_ID` - Can be found in the Auth0 dashboard under `settings`. +- `NEXT_PUBLIC_AUTH0_DOMAIN` - Can be found in the Auth0 dashboard under `settings`. +- `NEXT_PUBLIC_AUTH0_CLIENT_ID` - Can be found in the Auth0 dashboard under `settings`. - `AUTH0_CLIENT_SECRET` - Can be found in the Auth0 dashboard under `settings`. -- `REDIRECT_URI` - The url where Auth0 redirects back to, make sure a consistent url is used here. -- `POST_LOGOUT_REDIRECT_URI` - Where to redirect after logging out +- `NEXT_PUBLIC_REDIRECT_URI` - The url where Auth0 redirects back to, make sure a consistent url is used here. +- `NEXT_PUBLIC_POST_LOGOUT_REDIRECT_URI` - Where to redirect after logging out - `SESSION_COOKIE_SECRET` - A unique secret used to encrypt the cookies, has to be at least 32 characters. You can use [this generator](https://generate-secret.now.sh/32) to generate a value. - `SESSION_COOKIE_LIFETIME` - How long a session lasts in seconds. The default is 2 hours. -The `@auth0_client_secret` and `@session_cookie_secret` are [Vercel environment secrets](https://vercel.com/docs/v2/environment-variables-and-secrets/) +## Deploy on Vercel -You can create the `@auth0_client_secret` by running: +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)). -``` -now secrets add auth0_client_secret PLACE_YOUR_AUTH0_CLIENT_SECRET -``` - -And create the `session_cookie_secret` by generating a value [here](https://generate-secret.now.sh/32) and running: +### Deploy Your Local Project -``` -now secrets add session_cookie_secret PLACE_YOUR_SESSION_COOKIE_SECRET -``` +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). -## About this sample - -This sample tries to cover a few topics: - -- Signing in -- Signing out -- Loading the user on the server side and adding it as part of SSR (`/pages/advanced/ssr-profile.js`) -- Loading the user on the client side and using fast/cached SSR pages (`/pages/index.js`) -- API Routes which can load the current user (`/pages/api/me.js`) -- Using hooks to make the user available throughout the application (`/lib/user.js`) +**Important**: When you import your project on Vercel, make sure to click on **Environment Variables** and set them to match your `.env.local` file. diff --git a/examples/auth0/lib/auth0.js b/examples/auth0/lib/auth0.js index c233f803de179..84fe93be3df93 100644 --- a/examples/auth0/lib/auth0.js +++ b/examples/auth0/lib/auth0.js @@ -1,15 +1,18 @@ import { initAuth0 } from '@auth0/nextjs-auth0' -import config from './config' export default initAuth0({ - clientId: config.AUTH0_CLIENT_ID, - clientSecret: config.AUTH0_CLIENT_SECRET, - scope: config.AUTH0_SCOPE, - domain: config.AUTH0_DOMAIN, - redirectUri: config.REDIRECT_URI, - postLogoutRedirectUri: config.POST_LOGOUT_REDIRECT_URI, + clientId: process.env.NEXT_PUBLIC_AUTH0_CLIENT_ID, + clientSecret: process.env.AUTH0_CLIENT_SECRET, + scope: process.env.NEXT_PUBLIC_AUTH0_SCOPE || 'openid profile', + domain: process.env.NEXT_PUBLIC_AUTH0_DOMAIN, + redirectUri: + process.env.NEXT_PUBLIC_REDIRECT_URI || + 'http://localhost:3000/api/callback', + postLogoutRedirectUri: + process.env.NEXT_PUBLIC_POST_LOGOUT_REDIRECT_URI || + 'http://localhost:3000/', session: { - cookieSecret: config.SESSION_COOKIE_SECRET, - cookieLifetime: config.SESSION_COOKIE_LIFETIME, + cookieSecret: process.env.SESSION_COOKIE_SECRET, + cookieLifetime: Number(process.env.SESSION_COOKIE_LIFETIME) || 7200, }, }) diff --git a/examples/auth0/lib/config.js b/examples/auth0/lib/config.js deleted file mode 100644 index b7052748b1928..0000000000000 --- a/examples/auth0/lib/config.js +++ /dev/null @@ -1,26 +0,0 @@ -if (typeof window === 'undefined') { - /** - * Settings exposed to the server. - */ - module.exports = { - AUTH0_CLIENT_ID: process.env.AUTH0_CLIENT_ID, - AUTH0_CLIENT_SECRET: process.env.AUTH0_CLIENT_SECRET, - AUTH0_SCOPE: process.env.AUTH0_SCOPE, - AUTH0_DOMAIN: process.env.AUTH0_DOMAIN, - REDIRECT_URI: process.env.REDIRECT_URI, - POST_LOGOUT_REDIRECT_URI: process.env.POST_LOGOUT_REDIRECT_URI, - SESSION_COOKIE_SECRET: process.env.SESSION_COOKIE_SECRET, - SESSION_COOKIE_LIFETIME: process.env.SESSION_COOKIE_LIFETIME, - } -} else { - /** - * Settings exposed to the client. - */ - module.exports = { - AUTH0_CLIENT_ID: process.env.AUTH0_CLIENT_ID, - AUTH0_SCOPE: process.env.AUTH0_SCOPE, - AUTH0_DOMAIN: process.env.AUTH0_DOMAIN, - REDIRECT_URI: process.env.REDIRECT_URI, - POST_LOGOUT_REDIRECT_URI: process.env.POST_LOGOUT_REDIRECT_URI, - } -} diff --git a/examples/auth0/next.config.js b/examples/auth0/next.config.js deleted file mode 100644 index 4b804fdd389ff..0000000000000 --- a/examples/auth0/next.config.js +++ /dev/null @@ -1,17 +0,0 @@ -const dotenv = require('dotenv') -dotenv.config() - -module.exports = { - env: { - AUTH0_DOMAIN: process.env.AUTH0_DOMAIN, - AUTH0_CLIENT_ID: process.env.AUTH0_CLIENT_ID, - AUTH0_CLIENT_SECRET: process.env.AUTH0_CLIENT_SECRET, - AUTH0_SCOPE: 'openid profile', - REDIRECT_URI: - process.env.REDIRECT_URI || 'http://localhost:3000/api/callback', - POST_LOGOUT_REDIRECT_URI: - process.env.POST_LOGOUT_REDIRECT_URI || 'http://localhost:3000/', - SESSION_COOKIE_SECRET: process.env.SESSION_COOKIE_SECRET, - SESSION_COOKIE_LIFETIME: 7200, // 2 hours - }, -} diff --git a/examples/auth0/package.json b/examples/auth0/package.json index 4c4921d84148b..f1e248e9cef46 100644 --- a/examples/auth0/package.json +++ b/examples/auth0/package.json @@ -9,7 +9,6 @@ "license": "MIT", "dependencies": { "@auth0/nextjs-auth0": "^0.6.0", - "dotenv": "^8.2.0", "next": "latest", "react": "^16.12.0", "react-dom": "^16.12.0" diff --git a/examples/auth0/vercel.json b/examples/auth0/vercel.json deleted file mode 100644 index 7337cfc1c3e79..0000000000000 --- a/examples/auth0/vercel.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "build": { - "env": { - "AUTH0_DOMAIN": "YOUR_AUTH0_DOMAIN", - "AUTH0_CLIENT_ID": "YOUR_AUTH0_CLIENT_ID", - "AUTH0_CLIENT_SECRET": "@auth0_client_secret", - "REDIRECT_URI": "https://my-website.now.sh/api/callback", - "POST_LOGOUT_REDIRECT_URI": "https://my-website.now.sh/", - "SESSION_COOKIE_SECRET": "@session_cookie_secret" - } - } -}