diff --git a/EXAMPLES.md b/EXAMPLES.md index c5fa77980..976b5f176 100644 --- a/EXAMPLES.md +++ b/EXAMPLES.md @@ -16,17 +16,17 @@ All examples can be seen running in the [Kitchen Sink example app](./examples/ki Configure the required options in an `.env.local` file in the root of your application: -```dotenv -AUTH0_SECRET=LONG_RANDOM_VALUE -AUTH0_BASE_URL=http://localhost:3000 -AUTH0_ISSUER_BASE_URL=https://your-tenant.auth0.com -AUTH0_CLIENT_ID=CLIENT_ID -AUTH0_CLIENT_SECRET=CLIENT_SECRET +```sh +AUTH0_SECRET='LONG_RANDOM_VALUE' +AUTH0_BASE_URL='http://localhost:3000' +AUTH0_ISSUER_BASE_URL='https://your-tenant.auth0.com' +AUTH0_CLIENT_ID='CLIENT_ID' +AUTH0_CLIENT_SECRET='CLIENT_SECRET' ``` Create a [Dynamic API Route handler](https://nextjs.org/docs/api-routes/dynamic-api-routes) at `/pages/api/auth/[...auth0].js`. -```javascript +```js import { handleAuth } from '@auth0/nextjs-auth0'; export default handleAuth(); @@ -83,8 +83,8 @@ Have a look at the `basic-example` app [./examples/basic-example](./examples/bas Pass custom parameters to the auth handlers or add your own logging and error handling. -```javascript -// /pages/api/auth/[...auth0].js +```js +// pages/api/auth/[...auth0].js import { handleAuth, handleLogin } from '@auth0/nextjs-auth0'; import { myCustomLogger, myCustomErrorReporter } from '../utils'; @@ -115,7 +115,7 @@ Instead of (or in addition to) creating `/pages/api/auth/[...auth0].js` to handl Eg for login: -```javascript +```js // api/custom-login.js import { handleLogin } from '@auth0/nextjs-auth0'; @@ -128,8 +128,8 @@ export default async function login(req, res) { } ``` -```javascript -// /components/login-button.js +```jsx +// components/login-button.js export default () => Login; ``` @@ -139,7 +139,7 @@ export default () => Login; Requests to `/pages/profile` without a valid session cookie will be redirected to the login page. -```javascript +```jsx // pages/profile.js import { withPageAuthRequired } from '@auth0/nextjs-auth0'; @@ -158,7 +158,7 @@ See a running example of a [SSR protected page](./examples/kitchen-sink-example/ Requests to `/pages/profile` without a valid session cookie will be redirected to the login page. -```javascript +```jsx // pages/profile.js import { withPageAuthRequired } from '@auth0/nextjs-auth0'; @@ -173,7 +173,7 @@ See a running example of a [CSR protected page](./examples/kitchen-sink-example/ Requests to `/pages/api/protected` without a valid session cookie will fail with `401`. -```javascript +```js // pages/api/protected.js import { withApiAuthRequired } from '@auth0/nextjs-auth0'; @@ -209,8 +209,8 @@ the [frontend code to access the protected API](./examples/kitchen-sink-example/ Get an Access Token by specifying `response_type: 'code'` and providing your API's audience and scopes. -```javascript -// /pages/api/auth/[...auth0].js +```js +// pages/api/auth/[...auth0].js import { handleAuth, handleLogin } from '@auth0/nextjs-auth0'; export default handleAuth({ @@ -231,8 +231,8 @@ export default handleAuth({ Use the Session to protect your API Route and the Access Token to protect your external API. The API route serves as a proxy between your front end and the external API. -```javascript -// /pages/api/products.js +```js +// pages/api/products.js import { getAccessToken, withApiAuthRequired } from '@auth0/nextjs-auth0'; export default withApiAuthRequired(async function products(req, res) { @@ -265,7 +265,7 @@ for example it might be a Web Socket API that can't be easily proxied through a Create an API route that returns the Access Token as a JSON response. -```javascript +```js // pages/api/token.js import { getAccessToken, withApiAuthRequired } from '@auth0/nextjs-auth0'; diff --git a/README.md b/README.md index 12c7771e9..462ef25d1 100644 --- a/README.md +++ b/README.md @@ -35,7 +35,7 @@ Using [npm](https://npmjs.org): npm install @auth0/nextjs-auth0@beta ``` -> Note that this package supports the following versions of Node.js: `^10.13.0 || >=12.0.0` and the following versions of Next.js: `>=10` +> Note that this package supports the following versions of Node.js: `^10.13.0 || >=12.0.0` and the following versions of Next.js: `>=10`. ## Getting Started @@ -59,22 +59,22 @@ The library needs the following required configuration keys. These can be config ```sh # A long secret value used to encrypt the session cookie -AUTH0_SECRET=LONG_RANDOM_VALUE +AUTH0_SECRET='LONG_RANDOM_VALUE' # The base url of your application -AUTH0_BASE_URL=http://localhost:3000 +AUTH0_BASE_URL='http://localhost:3000' # The url of your Auth0 tenant domain -AUTH0_ISSUER_BASE_URL=https://YOUR_AUTH0_DOMAIN.auth0.com +AUTH0_ISSUER_BASE_URL='https://YOUR_AUTH0_DOMAIN.auth0.com' # Your Auth0 application's Client ID -AUTH0_CLIENT_ID=YOUR_AUTH0_CLIENT_ID +AUTH0_CLIENT_ID='YOUR_AUTH0_CLIENT_ID' # Your Auth0 application's Client Secret -AUTH0_CLIENT_SECRET=YOUR_AUTH0_CLIENT_SECRET +AUTH0_CLIENT_SECRET='YOUR_AUTH0_CLIENT_SECRET' ``` For a [full list of configuration options](https://auth0.github.io/nextjs-auth0/interfaces/config.config-1.html) see the docs. -Then, create a [Dynamic API Route handler](https://nextjs.org/docs/api-routes/dynamic-api-routes) at `/pages/api/auth/[...auth0].js` +Then, create a [Dynamic API Route handler](https://nextjs.org/docs/api-routes/dynamic-api-routes) at `/pages/api/auth/[...auth0].js`. -```javascript +```js import { handleAuth } from '@auth0/nextjs-auth0'; export default handleAuth(); @@ -84,7 +84,7 @@ This will create the following urls: `/api/auth/login`, `/api/auth/callback`, `/ Wrap your `pages/_app.js` component in the `UserProvider` component. -```js +```jsx // pages/_app.js import React from 'react'; import { UserProvider } from '@auth0/nextjs-auth0'; @@ -100,7 +100,7 @@ export default function App({ Component, pageProps }) { Check whether a user is authenticated by checking that `user` has a value, and log them in or out from the front end by redirecting to the appropriate automatically-generated route. -```js +```jsx // pages/index.js import { useUser } from '@auth0/nextjs-auth0'; diff --git a/examples/basic-example/next.config.js b/examples/basic-example/next.config.js new file mode 100644 index 000000000..4f336cb74 --- /dev/null +++ b/examples/basic-example/next.config.js @@ -0,0 +1,3 @@ +module.exports = { + poweredByHeader: false +}; diff --git a/examples/kitchen-sink-example/next.config.js b/examples/kitchen-sink-example/next.config.js new file mode 100644 index 000000000..4f336cb74 --- /dev/null +++ b/examples/kitchen-sink-example/next.config.js @@ -0,0 +1,3 @@ +module.exports = { + poweredByHeader: false +}; diff --git a/src/frontend/use-user.tsx b/src/frontend/use-user.tsx index 02965a53b..611d4b8c5 100644 --- a/src/frontend/use-user.tsx +++ b/src/frontend/use-user.tsx @@ -69,7 +69,7 @@ const User = createContext({ isLoading: false }); * The `useUser` hook, which will get you the {@link UserProfile} object from the server side session by requesting it * from the {@link HandleProfile} API Route handler. * - * ```javascript + * ```js * // pages/profile.js * import Link from 'next/link'; * import { useUser } from '@auth0/nextjs-auth0`;