fd25a6af57
Requests to the protected endpoint without the '-api' suffix will return a 404. Ensure to use '/api/protected-api' to see the expected behavior. <!-- Thanks for opening a PR! Your contribution is much appreciated. To make sure your PR is handled as smoothly as possible we request that you follow the checklist sections below. Choose the right checklist for the change(s) that you're making: ## For Contributors ### Improving Documentation - Run `pnpm prettier-fix` to fix formatting issues before opening the PR. - Read the Docs Contribution Guide to ensure your contribution follows the docs guidelines: https://nextjs.org/docs/community/contribution-guide ### Adding or Updating Examples - The "examples guidelines" are followed from our contributing doc https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md - Make sure the linting passes by running `pnpm build && pnpm lint`. See https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md ### Fixing a bug - Related issues linked using `fixes #number` - Tests added. See: https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs - Errors have a helpful link attached, see https://github.com/vercel/next.js/blob/canary/contributing.md ### Adding a feature - Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. (A discussion must be opened, see https://github.com/vercel/next.js/discussions/new?category=ideas) - Related issues/discussions are linked using `fixes #number` - e2e tests added (https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs) - Documentation added - Telemetry added. In case of a feature if it's used or not. - Errors have a helpful link attached, see https://github.com/vercel/next.js/blob/canary/contributing.md ## For Maintainers - Minimal description (aim for explaining to someone not on the team to understand the PR) - When linking to a Slack thread, you might want to share details of the conclusion - Link both the Linear (Fixes NEXT-xxx) and the GitHub issues - Add review comments if necessary to explain to the reviewer the logic behind a change ### What? ### Why? ### How? Closes NEXT- Fixes # --> Co-authored-by: Sam Ko <sam@vercel.com> |
||
---|---|---|
.. | ||
components | ||
interfaces | ||
pages | ||
.env.local.example | ||
.gitignore | ||
additional.d.ts | ||
next-env.d.ts | ||
package.json | ||
README.md | ||
tsconfig.json |
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. 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.tsx
) - Loading the user on the client side and using fast/cached SSR pages (
pages/index.tsx
) - Loading the user on the client side and checking authentication CSR pages (
pages/profile.tsx
) - Loading the user on the client side by accessing API (Serverless function) CSR pages (
pages/advanced/api-profile.tsx
) - Creates route handlers under the hood that perform different parts of the authentication flow (
pages/auth/[...auth0].tsx
)
Read more: https://auth0.com/blog/ultimate-guide-nextjs-authentication-auth0/
How to use
Execute create-next-app
with npm, Yarn, or pnpm to bootstrap the example:
npx create-next-app --example auth0 auth0-app
yarn create next-app --example auth0 auth0-app
pnpm create next-app --example auth0 auth0-app
Configuring Auth0
- Go to the Auth0 dashboard and create a new application of type Regular Web Applications and make sure to configure the following
- Go to the settings page of the application
- Configure the following settings:
- Allowed Callback URLs: Should be set to
http://localhost:3000/api/auth/callback
when testing locally or typically tohttps://myapp.com/api/auth/callback
when deploying your application. - Allowed Logout URLs: Should be set to
http://localhost:3000/
when testing locally or typically tohttps://myapp.com/
when deploying your application.
- Save the settings
Set up environment variables
To connect the app with Auth0, you'll need to add the settings from your Auth0 application as environment variables
Copy the .env.local.example
file in this directory to .env.local
(which will be ignored by Git):
cp .env.local.example .env.local
Then, open .env.local
and add the missing environment variables:
AUTH0_ISSUER_BASE_URL
- Can be found in the Auth0 dashboard undersettings
. (Should be prefixed withhttps://
)AUTH0_CLIENT_ID
- Can be found in the Auth0 dashboard undersettings
.AUTH0_CLIENT_SECRET
- Can be found in the Auth0 dashboard undersettings
.AUTH0_BASE_URL
- The base url of the application.AUTH0_SECRET
- Has to be at least 32 characters. You can use this generator to generate a value.
Deploy on Vercel
You can deploy this app to the cloud with Vercel (Documentation).
Deploy Your Local Project
To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and import to Vercel.
Important: When you import your project on Vercel, make sure to click on Environment Variables and set them to match your .env.local
file.