auth0-samples / auth0-nextjs-samples Goto Github PK

View Code? Open in Web Editor NEW

123.0 23.0 146.0 1.6 MB

Auth0 Integration Samples for Next.js Applications

License: MIT License

JavaScript 97.07% CSS 1.13% Dockerfile 1.29% PowerShell 0.23% Shell 0.28%

auth0 authentication quickstart webapp dx-sdk-quickstart

auth0-nextjs-samples's Introduction

Auth0 Next.js Samples

This is the sample code for the Auth0 Next.js Quickstart using nextjs-auth0.

Please check out the sample application for an example of how to integrate the Auth0 Next.js SDK into your Next.js applications.

What is Auth0?

Auth0 helps you to:

Add authentication with multiple sources, either social identity providers such as Google, Facebook, Microsoft Account, LinkedIn, GitHub, Twitter, Box, Salesforce (amongst others), or enterprise identity systems like Windows Azure AD, Google Apps, Active Directory, ADFS, or any SAML Identity Provider.
Add authentication through more traditional username/password databases.
Add support for linking different user accounts with the same user.
Support for generating signed JSON Web Tokens to call your APIs and flow the user identity securely.
Analytics of how, when, and where users are logging in.
Pull data from other sources and add it to the user profile through JavaScript rules.

Create a Free Auth0 Account

Go to Auth0 and click Sign Up.
Use Google, GitHub, or Microsoft Account to login.

Issue Reporting

If you have found a bug or if you have a feature request, please report them at this repository issues section. Please do not report security vulnerabilities on the public GitHub issue tracker. The Responsible Disclosure Program details the procedure for disclosing security issues.

Author

Auth0

License

This project is licensed under the MIT license. See the LICENSE file for more info.

auth0-nextjs-samples's People

Contributors

Stargazers

Watchers

Forkers

jerdog tanver-hasan kannjaki work-stufff erenacikbas y13i onlyhouse1980 dhri-yama takasaki376 paulorodrigues99 poligonosapp saltukalakus jawblet vaibhav-io mustaqimarifin evgenysok krutarththakkar syab codemyworld21 anuraglol hollisjamison iliassjabali haoxiuwang tosshi-dev billyleee calvinmagezi jackshelloworld andrewavina jdragulanescu codefuturist catlaranjeiro seunghyukoh nan-chen-kdx williamshakesit wenkaitan surya-the-coder alroyfernz usmanasif russpalms lucapalminteri dynamicdreamz1 incognitoatlas anikincode lnrdgmz juancanchi1992 surfswift213us lewislebentz isabella232 sarslanian stonersftw tharindukodez thakur-sahab999 prxdyut krishna-nayak seatonlycan alwaysbuycheap didauvedau reesy ibrahimovfuad joewillie548 meow-tsx rkortlandt roncourville ghdevs pranavvks yuzukicat rmourey26 harshitkumar9030 ccp92 naeemnh opencpv markmastro kousukesato ticaboo nargonath sabasm lexingtontechus robertwbradford sleekflowvincentwong evaldast adamjmcgrath cris-ch aksharakrishnan ruzz311 lhatfield devyncushing09 ethandaniel phillipgimmi gusstavo aetotvl6789 zcarlson-gmgt joshaddington vky-pwl stevenbarash tachang joao-pedro-m jenperez613 kapil-gulati yukiman-byde lmandell

auth0-nextjs-samples's Issues

signup with auth0

I have implemented siging up a user using the auth0 api and is it possible that I could still use the hooks available in auth0/nextjs-auth0 to store the user across the application, and login to the application using the universal login, and store the logged in user across the application as well?

User profile state not saved. Switching to loading / undefined state on route change.

The example works but on every route change, the user profile component's user from useUser is shortly undefined and the component shoes "...Loading" even though the session and cookie still exists.

I am using NextJS 13 with new app directory.

Is there a way keep the logged in state?

Some links to usecases in README for Sample01 are not aligned with current position of relevant code blocks

On https://github.com/auth0-samples/auth0-nextjs-samples/tree/main/Sample-01 the following links have hardcoded line references that are out of date:

Sample exits with code 1

Hey there.

Seems as though the generated samples while logged in may be exiting after the Next compilation step with Node 16 (14 too) on macOS 10.15.1

kevinreilly@snackbook sample-01 % npm install && npm run dev

added 882 packages, and audited 883 packages in 27s

100 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

> [email protected] dev
> concurrently "next dev" "node api-server"

[1] AUTH0_AUDIENCE not set in .env.local. Shutting down API server.
[1] node api-server exited with code 1
[0] ready - started server on 0.0.0.0:3000, url: http://localhost:3000
[0] info  - Loaded env from /Users/kevinreilly/Downloads/sample-01/.env.local
[0] info  - Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled
[0] info  - Using external babel configuration from /Users/kevinreilly/Downloads/sample-01/.babelrc
[0] event - compiled client and server successfully in 7.6s (373 modules)
[0] next dev exited with code 1
kevinreilly@snackbook Downloads % node -v
v16.16.0

api-server.js is not working when deployed to the vercel

Checklist

I have looked into the Readme and have not found a suitable solution or answer.
I have searched the issues and have not found a suitable solution or answer.
I have searched the Auth0 Community forums and have not found a suitable solution or answer.
I agree to the terms within the Auth0 Code of Conduct.

Description

Deploying the sample app on vercel doesn't seem to run the api-server.js - is it expected?
It works locally, but not when accessed from the vercel deployed app.

The function calls to localhost:3001 or 127.0.0.1:3001 return connection refused when called from /api/whatever.

Reproduction

deploy to vercel, try to access shows

Additional context

No response

Can't use api integration: 502 Bad gateway

Whenever I run with the AUTH0_AUDIENCE set in .env, the login does not work. It completes sign in but when it goes to callback page I get a "502: Bad gateway".

When I run without the AUTH0_AUDIENCE set it works perfectly and I have no issues. I also tried the flow using a simple webapp in flask with all the same parameters but including the AUT0_AUDIENCE and that also worked.

Some things to note are that my api and my next.js web app are both running on custom domains and server over https using nginx. But the problem seems to be somewhere with nextjs and auth0 because I don't get the problem with my flask web app

Missing state cookie from login request

I am currently getting the following error (Node v18.15.0, Next.js v13.1.0).

[0] CallbackHandlerError: Callback handler failed. CAUSE: Missing state cookie from login request (check login URL, callback URL and cookie config).
[0]     at CallbackHandlerError.AuthError [as constructor] (/Users/marco/git/auth0-nextjs-samples/Sample-01/node_modules/@auth0/nextjs-auth0/dist/utils/errors.js:34:16)
[0]     at CallbackHandlerError.HandlerError [as constructor] (/Users/marco/git/auth0-nextjs-samples/Sample-01/node_modules/@auth0/nextjs-auth0/dist/utils/errors.js:111:24)
[0]     at new CallbackHandlerError (/Users/marco/git/auth0-nextjs-samples/Sample-01/node_modules/@auth0/nextjs-auth0/dist/utils/errors.js:140:28)
[0]     at Object.<anonymous> (/Users/marco/git/auth0-nextjs-samples/Sample-01/node_modules/@auth0/nextjs-auth0/dist/handlers/callback.js:42:31)
[0]     at step (/Users/marco/git/auth0-nextjs-samples/Sample-01/node_modules/tslib/tslib.js:144:27)
[0]     at Object.throw (/Users/marco/git/auth0-nextjs-samples/Sample-01/node_modules/tslib/tslib.js:125:57)
[0]     at rejected (/Users/marco/git/auth0-nextjs-samples/Sample-01/node_modules/tslib/tslib.js:116:69)
[0]     at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
[0]   code: 'ERR_CALLBACK_HANDLER_FAILURE',
[0]   cause: MissingStateCookieError: Missing state cookie from login request (check login URL, callback URL and cookie config).
[0]       at new MissingStateCookieError (/Users/marco/git/auth0-nextjs-samples/Sample-01/node_modules/@auth0/nextjs-auth0/dist/auth0-session/utils/errors.js:39:16)
[0]       at Object.<anonymous> (/Users/marco/git/auth0-nextjs-samples/Sample-01/node_modules/@auth0/nextjs-auth0/dist/auth0-session/handlers/callback.js:30:58)
[0]       at step (/Users/marco/git/auth0-nextjs-samples/Sample-01/node_modules/tslib/tslib.js:144:27)
[0]       at Object.next (/Users/marco/git/auth0-nextjs-samples/Sample-01/node_modules/tslib/tslib.js:125:57)
[0]       at fulfilled (/Users/marco/git/auth0-nextjs-samples/Sample-01/node_modules/tslib/tslib.js:115:62)
[0]       at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
[0]     expose: true,
[0]     statusCode: 400,
[0]     status: 400
[0]   },
[0]   status: 400
[0] }

'checks.state argument is missing' error in cypress tests

Steps to reproduce:

complete the .env.local file in the Sample-01/.env.local file i.e. fill in the details from the auth0 regular web application
ensure callback/logout urls are added correctly in auth0
build using npm run build
test that app is working by running npm run dev - test login, logout and ssr route - test on http://0.0.0.0:3000/
add the username/password as env vars in cypress
change the baseUrl in cypress to match the basepath in auth0 callback urls as well as what's configured in the .local.env file for the actual application
run npm run test:integration:watch to run cypress and select the login test from the watcher
notice the error

Why only NextJS sample not Nuxt. Too Bad

LoginHandlerError: Login handler failed. CAUSE: Page with `dynamic = "error"` couldn't be rendered statically because it used `request.url`.

Checklist

I have looked into the Readme and have not found a suitable solution or answer.
I have searched the issues and have not found a suitable solution or answer.
I have searched the Auth0 Community forums and have not found a suitable solution or answer.
I agree to the terms within the Auth0 Code of Conduct.

Description

I have setup the auth0 for next.js as mentioned on the document. When I was trying to redirect user to /api/auth/login or any of the route mentioned in the document. It is giving me this error:

LoginHandlerError: Login handler failed. CAUSE: Page with `dynamic = "error"` couldn't be rendered statically because it used `request.url`.
    at eval (webpack-internal:///(rsc)/./node_modules/@auth0/nextjs-auth0/dist/handlers/login.js:60:19)
    at eval (webpack-internal:///(rsc)/./node_modules/@auth0/nextjs-auth0/dist/handlers/router-helpers.js:9:20)
    ... 27 lines matching cause stack trace ...
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  code: 'ERR_LOGIN_HANDLER_FAILURE',
  cause: StaticGenBailoutError: Page with `dynamic = "error"` couldn't be rendered statically because it used `request.url`.
      at Object.staticGenerationBailout (webpack-internal:///(rsc)/./node_modules/next/dist/client/components/static-generation-bailout.js:31:15)
      at handleReqBailout (webpack-internal:///(rsc)/./node_modules/next/dist/server/future/route-modules/app-route/helpers/proxy-request.js:93:23)
      at Object.get (webpack-internal:///(rsc)/./node_modules/next/dist/server/future/route-modules/app-route/helpers/proxy-request.js:101:13)
      at eval (webpack-internal:///(rsc)/./node_modules/@auth0/nextjs-auth0/dist/handlers/login.js:54:37)
      at eval (webpack-internal:///(rsc)/./node_modules/@auth0/nextjs-auth0/dist/handlers/router-helpers.js:9:20)
      at eval (webpack-internal:///(rsc)/./node_modules/@auth0/nextjs-auth0/dist/handlers/auth.js:59:30)
      at eval (webpack-internal:///(rsc)/./node_modules/@auth0/nextjs-auth0/dist/handlers/auth.js:35:24)
      at eval (webpack-internal:///(rsc)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:254:43)
      at eval (webpack-internal:///(rsc)/./node_modules/next/dist/server/lib/trace/tracer.js:111:36)
      at NoopContextManager.with (webpack-internal:///(rsc)/./node_modules/next/dist/compiled/@opentelemetry/api/index.js:360:30)
      at ContextAPI.with (webpack-internal:///(rsc)/./node_modules/next/dist/compiled/@opentelemetry/api/index.js:30:58)
      at NoopTracer.startActiveSpan (webpack-internal:///(rsc)/./node_modules/next/dist/compiled/@opentelemetry/api/index.js:953:34)
      at ProxyTracer.startActiveSpan (webpack-internal:///(rsc)/./node_modules/next/dist/compiled/@opentelemetry/api/index.js:993:36)
      at eval (webpack-internal:///(rsc)/./node_modules/next/dist/server/lib/trace/tracer.js:100:107)
      at NoopContextManager.with (webpack-internal:///(rsc)/./node_modules/next/dist/compiled/@opentelemetry/api/index.js:360:30)
      at ContextAPI.with (webpack-internal:///(rsc)/./node_modules/next/dist/compiled/@opentelemetry/api/index.js:30:58)
      at NextTracerImpl.trace (webpack-internal:///(rsc)/./node_modules/next/dist/server/lib/trace/tracer.js:100:32)
      at eval (webpack-internal:///(rsc)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:242:53)
      at AsyncLocalStorage.run (node:async_hooks:346:14)
      at Object.wrap (webpack-internal:///(rsc)/./node_modules/next/dist/server/async-storage/static-generation-async-storage-wrapper.js:42:24)
      at eval (webpack-internal:///(rsc)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:196:97)
      at AsyncLocalStorage.run (node:async_hooks:346:14)
      at Object.wrap (webpack-internal:///(rsc)/./node_modules/next/dist/server/async-storage/request-async-storage-wrapper.js:82:24)
      at eval (webpack-internal:///(rsc)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:195:75)
      at AsyncLocalStorage.run (node:async_hooks:346:14)
      at AppRouteRouteModule.execute (webpack-internal:///(rsc)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:192:56)
      at AppRouteRouteModule.handle (webpack-internal:///(rsc)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:315:41)
      at doRender (/Users/apatel1/Desktop/Projects/cost-plus/costplusdrugs-commerce/node_modules/next/dist/server/base-server.js:1091:56)
      at cacheEntry.responseCache.get.incrementalCache.incrementalCache (/Users/apatel1/Desktop/Projects/cost-plus/costplusdrugs-commerce/node_modules/next/dist/server/base-server.js:1290:46)
      at /Users/apatel1/Desktop/Projects/cost-plus/costplusdrugs-commerce/node_modules/next/dist/server/response-cache/index.js:99:42
      at ResponseCache.get (/Users/apatel1/Desktop/Projects/cost-plus/costplusdrugs-commerce/node_modules/next/dist/server/response-cache/index.js:149:11)
      at DevServer.renderToResponseWithComponentsImpl (/Users/apatel1/Desktop/Projects/cost-plus/costplusdrugs-commerce/node_modules/next/dist/server/base-server.js:1219:53)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
    code: 'NEXT_STATIC_GEN_BAILOUT'
  },
  status: undefined
}

Reproduction

I have just followed the steps provided in this documents: https://auth0.com/docs/quickstart/webapp/nextjs/01-login

Next.js version: 13.4.16

Additional context

No response

Next JS App Router - Refresh Tokens

Checklist

I have looked into the Readme and have not found a suitable solution or answer.
I have searched the issues and have not found a suitable solution or answer.
I have searched the Auth0 Community forums and have not found a suitable solution or answer.
I agree to the terms within the Auth0 Code of Conduct.

Describe the problem you'd like to have solved

I wanted to know if refresh tokens work with the Next js running on app router (not pages).

Describe the ideal solution

The ideal solution would be for refresh tokens to work out of the box or a simple integration guide to be added

Alternatives and current workarounds

At the moment i have the session lifetime to 24 hours. It's annoying and doesn't feel like the best for security

Additional context

Our app is running Next js 14 with app router.

It's a auth protected app

We'd like users to only have to log in once a month but have short lived auth tokens and refresh tokens in place.

I've tried using Next Auth but this causes refresh tokens to be generated every refresh because the middleware can't write cookies. I'd like to try this package as an alternative.

access_denied (invalid json response body at https://095e-181-94-225-31.ngrok.io/api/auth/hook reason: Unexpected token < in JSON at position 0)

i get that error after the login/signup

NextJS / Python KeyError: 'kid'

Following this tutorials

I'm getting KeyError: 'kid' around this line of logic:if key["kid"] == unverified_header["kid"]:

Decoding the access token headers sent from nextjs, shows kid is not set.

{'alg': 'dir', 'enc': 'A256GCM', 'iss': 'https://xxx.us.auth0.com/'}

NextJs logic to get access token
const { accessToken } = await getAccessToken(req, res, { scopes: ['read:users'] });

ERR_CALLBACK_HANDLER_FAILURE

Checklist

I have looked into the Readme and have not found a suitable solution or answer.
I have searched the issues and have not found a suitable solution or answer.
I have searched the Auth0 Community forums and have not found a suitable solution or answer.
I agree to the terms within the Auth0 Code of Conduct.

Description

Hello,

I download the sample configured with my application setting https://auth0.com/docs/quickstart/webapp/nextjs/01-login?download=true

SignIn/Login work, but when I'm redirected I receive

CallbackHandlerError: Callback handler failed. CAUSE: Missing state cookie from login request (check login URL, callback URL and cookie config).
[0]     at eval (webpack-internal:///(rsc)/./node_modules/@auth0/nextjs-auth0/dist/handlers/callback.js:60:19)
[0]     at async eval (webpack-internal:///(rsc)/./node_modules/@auth0/nextjs-auth0/dist/handlers/auth.js:59:24)
[0]     at async /Users/fabien/Downloads/sample-01/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:1:66877 {
[0]   code: 'ERR_CALLBACK_HANDLER_FAILURE',
[0]   cause: MissingStateCookieError: Missing state cookie from login request (check login URL, callback URL and cookie config).
[0]       at eval (webpack-internal:///(rsc)/./node_modules/@auth0/nextjs-auth0/dist/auth0-session/handlers/callback.js:19:19)
[0]       at async eval (webpack-internal:///(rsc)/./node_modules/@auth0/nextjs-auth0/dist/handlers/callback.js:57:13)
[0]       at async eval (webpack-internal:///(rsc)/./node_modules/@auth0/nextjs-auth0/dist/handlers/auth.js:59:24)
[0]       at async /Users/fabien/Downloads/sample-01/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:1:66877 {
[0]     status: 400,
[0]     statusCode: 400
[0]   },
[0]   status: 400
[0] }

I had the same problem when I follow the tutorial https://auth0.com/docs/quickstart/webapp/nextjs/01-login?download=true, with my own code (no the sample), with Google Chrome (+ incognito mode) + Safari.

My .env.local is properly configured, as my application setting ;
ALLOWED_CALLBACK: http://localhost:3000/api/auth/callback

I checked this issue #112

But my urls, starts always by http://localhost:3000/

I attached an HAR file.

chromewebdata.har.zip

Thank you, to explain me what I missed !

Reproduction

Run npm run dev
Login on http://localhost:3000
Fail on /api/auth/callback with 400

Additional context

No response

TypeError: “secret” is required next.js

I have configured everything correctly. But the handleAuth function is not working.

Error: You cannot mix creating your own instance with `initAuth0` and using named exports like `import { handleAuth } from '@auth0/nextjs-auth0'`

Checklist

I have looked into the Readme and have not found a suitable solution or answer.
I have searched the issues and have not found a suitable solution or answer.
I have searched the Auth0 Community forums and have not found a suitable solution or answer.
I agree to the terms within the Auth0 Code of Conduct.

Description

Looking in the documentation I could find why I'm getting this error:
My nextjs is a fresh start. /api/auth/[...auth0].js

import { handleAuth } from "@auth0/nextjs-auth0";

export default handleAuth({
    secret: 'hello',
});

Error: You cannot mix creating your own instance with initAuth0 and using named exports like import { handleAuth } from '@auth0/nextjs-auth0'

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
pages\api\auth[...auth0].js (3:26) @ eval

  1 | import { handleAuth } from "@auth0/nextjs-auth0";
  2 | 
> 3 | export default handleAuth({
    |                      ^
  4 | secret: 'hello',
  5 | });
  6 |

Reproduction

imported handleAuth
Asked for a secret: I gave it
ask for issueBaseURL
I gave one
Then in other documentation they said you should creat auth0.js with:

import { initAuth0 } from "@auth0/nextjs-auth0";

export default initAuth0({
  secret: process.env.REACT_APP_AUTH0_SECRET,
  issuerBaseURL: process.env.REACT_APP_AUTH0_ISSUER_BASE_URL,
  baseURL: process.env.REACT_APP_AUTH0_BASE_URL,
  clientID: process.env.REACT_APP_AUTH0_CLIENT_ID,
  clientSecret: process.env.REACT_APP_AUTH0_CLIENT_SECRET,
});

Initialize in [...auth0].js

import auth0 from "../../../lib/auth0";
export default auth0.handleAuth();

And I get this error

Additional context

No response

Example Using the nextjs Image component

I appreciate your nextjs-auth0 integration example as well as your extremely helpful documentation (it really is great). However, it would be nice if your example user profile page (.../auth/me) if you could use the built in nextjs Image component (i.e., Image) instead of an html image tag (i.e., img).

The reason why is that I am using typescript, and when I use the regular html img tag I get an error that I should use the nextjs image component. See screenshot:

However, when I use that component I get a different error. Again, see screenshot:

I now have to figure out how to fix this. That is fine, but if possible it would be nice if you had a ready made example of how to do this.

auth0-samples / auth0-nextjs-samples Goto Github PK

auth0-nextjs-samples's Introduction

Auth0 Next.js Samples

What is Auth0?

Create a Free Auth0 Account

Issue Reporting

Author

License

auth0-nextjs-samples's People

Contributors

Stargazers

Watchers

Forkers

auth0-nextjs-samples's Issues

Checklist

Description

Reproduction

Additional context

Checklist

Description

Reproduction

Additional context

Checklist

Describe the problem you'd like to have solved

Describe the ideal solution

Alternatives and current workarounds

Additional context

Checklist

Description

Reproduction

Additional context

Checklist

Description

Reproduction

Additional context

Recommend Projects

Recommend Topics

Recommend Org