NextAuth Cognito User pool Authentication error

[sunny2get]

Question 💬

I have the following setup:

• Cognito user pool as an IdP
• Client app with client secret setup with Code Authorization grant flow
• Manually created users in User pool
• Callback URL set to: http://localhost:3000
• Verified setup: Clicking on hosted UI link provided by Cognito lets me login with the user and I get a code grant value upon re-directing to the URL

Followed the steps in this tutorial to setup AuthN using next-auth package

Changed the Callback URL based in the Cognito client to based on doc here:

http://localhost:3000/api/auth/callback/cognito

Following error is thrown when trying to run the code:

message: 'only valid absolute URLs can be requested'

End URL when the error is thrown:

http://localhost:3000/api/auth/signin?error=OAuthSignin

Full trace:

[next-auth][warn][NEXTAUTH_URL]
https://next-auth.js.org/warnings#nextauth_url
[next-auth][warn][NO_SECRET]
https://next-auth.js.org/warnings#no_secret
[next-auth][error][SIGNIN_OAUTH_ERROR] 
https://next-auth.js.org/errors#signin_oauth_error only valid absolute URLs can be requested {
  error: {
    message: 'only valid absolute URLs can be requested',
    stack: 'TypeError: only valid absolute URLs can be requested\n' +
      '    at Issuer.request (C:\\Users\\ssha\\Desktop\\development\\react\\next-letter\\node_modules\\openid-client\\lib\\helpers\\request.js:68:11)\n' +
      '    at Issuer.discover (C:\\Users\\ssha\\Desktop\\development\\react\\next-letter\\node_modules\\openid-client\\lib\\issuer.js:144:38)\n' +
      '    at openidClient (C:\\Users\\ssha\\Desktop\\development\\react\\next-letter\\node_modules\\next-auth\\core\\lib\\oauth\\client.js:16:41)\n' +
      '    at getAuthorizationUrl (C:\\Users\\ssha\\Desktop\\development\\react\\next-letter\\node_modules\\next-auth\\core\\lib\\oauth\\authorization-url.js:70:49)\n' +
      '    at Object.signin (C:\\Users\\ssha\\Desktop\\development\\react\\next-letter\\node_modules\\next-auth\\core\\routes\\signin.js:38:60)\n' +
      '    at AuthHandler (C:\\Users\\ssha\\Desktop\\development\\react\\next-letter\\node_modules\\next-auth\\core\\index.js:253:39)\n' +
      '    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)\n' +
      '    at async NextAuthHandler (C:\\Users\\ssha\\Desktop\\development\\react\\next-letter\\node_modules\\next-auth\\next\\index.js:24:19)\n' +
      '    at async C:\\Users\\ssha\\Desktop\\development\\react\\next-letter\\node_modules\\next-auth\\next\\index.js:60:32\n' +        
      '    at async Object.apiResolver (C:\\Users\\ssha\\Desktop\\development\\react\\next-letter\\node_modules\\next\\dist\\server\\api-utils\\node.js:372:9)\n' +
      '    at async DevServer.runApi (C:\\Users\\ssha\\Desktop\\development\\react\\next-letter\\node_modules\\next\\dist\\server\\next-server.js:513:9)\n' +
      '    at async Object.fn (C:\\Users\\ssha\\Desktop\\development\\react\\next-letter\\node_modules\\next\\dist\\server\\next-server.js:815:35)\n' +
      '    at async Router.execute (C:\\Users\\ssha\\Desktop\\development\\react\\next-letter\\node_modules\\next\\dist\\server\\router.js:243:32)\n' +
      '    at async DevServer.runImpl (C:\\Users\\ssha\\Desktop\\development\\react\\next-letter\\node_modules\\next\\dist\\server\\base-server.js:432:29)\n' +
      '    at async DevServer.run (C:\\Users\\ssha\\Desktop\\development\\react\\next-letter\\node_modules\\next\\\dist\\server\\dev\\next-dev-server.js:814:20)\n' +
      '    at async DevServer.handleRequestImpl (C:\\Users\\ssha\\Desktop\\development\\react\\next-letter\\node_modules\\next\\dist\\server\\base-server.js:375:20)\n' +
      '    at async C:\\Users\\ssha\\Desktop\\development\\react\\next-letter\\node_modules\\next\\dist\\server\\base-server.js:157:99',
    name: 'TypeError'
  },
  providerId: 'cognito',
  message: 'only valid absolute URLs can be requested'
}

What am I configuring wrong here? Any help is much appreciated.

How to reproduce ☕️

• Clone repo: https://github.com/designly1/next-letter
• Setup a Cognito User pool
• Setup a User pool client with client secret and Authorization Code flow enabled
• Add .env.local file to the root of the project
• Add the following variables to the .env.local file

COGNITO_CLIENT_ID
COGNITO_CLIENT_SECRET
COGNITO_ISSUER // Format: https://<COGNITO-HOSTED-URL>/<USER-POOL-ID>

• Run the application using npm run dev
• Load the app at http://localhost:3000 and click Login, should redirect to show a page as below
  
• App run logs would show the error

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

[csckhw303]

https://stackoverflow.com/questions/72023479/next-auth-only-valid-absolute-urls-can-be-requested
https://www.reddit.com/r/nextjs/comments/smnwo1/auth0_integration_error/?rdt=40699

[enricodelarosa]

Any luck on this?

[figonzal1]

A little late

I've been trying to solve the problem for a couple of hours. I think that cognito fail with http://localhost so I decided to use ngrok and its worked.

My .env

COGNITO_CLIENT_ID=""
COGNITO_CLIENT_SECRET=""
COGNITO_ISSUER="https://cognito-idp.{zone}.amazonaws.com/{pool_id}"
NEXTAUTH_URL="https://{ngrok_url}"
NEXTAUTH_SECRET="my_secret"

Cognito callback url

https://{ngrok_url}/api/auth/callback/cognito

Ngrok command on port 3000

.\ngrok.exe http 3000

That's it 👍🏼