Theo's Typesafe Cult•13mo ago

need help with customizing error page if auth is failed

hey folks I'm using next-auth NextJs 14 with app router can anyone tell me how can I customize the default error page if the auth is failed

7 Replies

XENOX•13mo ago

Hey I think you can set it in authoOptions as pages: { signIn: "/login", error:<path to page> //newUser: "/onboarding", },

XENOX•13mo ago

more info - https://next-auth.js.org/configuration/pages

Pages | NextAuth.js

NextAuth.js automatically creates simple, unbranded authentication pages for handling Sign in, Sign out, Email Verification and displaying error messages.

Aditya KiradOP•13mo ago

ok I will try I triedd it but it didn't worked I created a new page in the app directory like this oauth/auth-failed/page.tsx and then in next-auth options I put this

 pages: {
  error: '/oauth/auth-failed'
}

 pages: {
  error: '/oauth/auth-failed'
}

and after saving the next-auth file when I tried to login and cancel the login it gone back to the homepage not the error page

XENOX•13mo ago

was there a error thrown by next auth?

Aditya KiradOP•13mo ago

yeah next-auth did throw an error when I canceled the authorizaion it was this error

[next-auth][error][OAUTH_CALLBACK_HANDLER_ERROR] 
https://next-auth.js.org/errors#oauth_callback_handler_error access_denied {
  error: {
    message: 'access_denied',
    stack: 'Error: access_denied\n' +
      '    at oAuthCallback (D:\\React\\Dragoguard-Dashboard\\.next\\server\\chunks\\43599_next-auth_34f8d1._.js:2730:23)\n' +
      '    at Object.callback (D:\\React\\Dragoguard-Dashboard\\.next\\server\\chunks\\43599_next-auth_34f8d1._.js:2875:107)\n' +
      '    at AuthHandler (D:\\React\\Dragoguard-Dashboard\\.next\\server\\chunks\\43599_next-auth_34f8d1._.js:3501:51)\n' +
      '    at async NextAuthRouteHandler (D:\\React\\Dragoguard-Dashboard\\.next\\server\\chunks\\43599_next-auth_34f8d1._.js:3709:30)\n' +
      '    at async NextAuth._args$ (D:\\React\\Dragoguard-Dashboard\\.next\\server\\chunks\\43599_next-auth_34f8d1._.js:3744:24)\n' +
      '    at async D:\\React\\Dragoguard-Dashboard\\node_modules\\.pnpm\\[email protected][email protected][email protected]\\node_modules\\next\\dist\\compiled\\next-server\\app-route.runtime.dev.js:6:63251',
    name: 'Error'
  },
  error_description: 'The resource owner or authorization server denied the request',
  providerId: 'discord',
  message: 'access_denied'

}

[next-auth][error][OAUTH_CALLBACK_HANDLER_ERROR] 
https://next-auth.js.org/errors#oauth_callback_handler_error access_denied {
  error: {
    message: 'access_denied',
    stack: 'Error: access_denied\n' +
      '    at oAuthCallback (D:\\React\\Dragoguard-Dashboard\\.next\\server\\chunks\\43599_next-auth_34f8d1._.js:2730:23)\n' +
      '    at Object.callback (D:\\React\\Dragoguard-Dashboard\\.next\\server\\chunks\\43599_next-auth_34f8d1._.js:2875:107)\n' +
      '    at AuthHandler (D:\\React\\Dragoguard-Dashboard\\.next\\server\\chunks\\43599_next-auth_34f8d1._.js:3501:51)\n' +
      '    at async NextAuthRouteHandler (D:\\React\\Dragoguard-Dashboard\\.next\\server\\chunks\\43599_next-auth_34f8d1._.js:3709:30)\n' +
      '    at async NextAuth._args$ (D:\\React\\Dragoguard-Dashboard\\.next\\server\\chunks\\43599_next-auth_34f8d1._.js:3744:24)\n' +
      '    at async D:\\React\\Dragoguard-Dashboard\\node_modules\\.pnpm\\[email protected][email protected][email protected]\\node_modules\\next\\dist\\compiled\\next-server\\app-route.runtime.dev.js:6:63251',
    name: 'Error'
  },
  error_description: 'The resource owner or authorization server denied the request',
  providerId: 'discord',
  message: 'access_denied'

}

[next-auth][error][OAUTH_CALLBACK_ERROR]
https://next-auth.js.org/errors#oauth_callback_error access_denied {
  message: 'access_denied',
  stack: 'Error: access_denied\n' +
    '    at oAuthCallback (D:\\React\\Dragoguard-Dashboard\\.next\\server\\chunks\\43599_next-auth_34f8d1._.js:2730:23)\n' +
    '    at Object.callback (D:\\React\\Dragoguard-Dashboard\\.next\\server\\chunks\\43599_next-auth_34f8d1._.js:2875:107)\n' +
    '    at AuthHandler (D:\\React\\Dragoguard-Dashboard\\.next\\server\\chunks\\43599_next-auth_34f8d1._.js:3501:51)\n' +
    '    at async NextAuthRouteHandler (D:\\React\\Dragoguard-Dashboard\\.next\\server\\chunks\\43599_next-auth_34f8d1._.js:3709:30)\n' +
    '    at async NextAuth._args$ (D:\\React\\Dragoguard-Dashboard\\.next\\server\\chunks\\43599_next-auth_34f8d1._.js:3744:24)\n' +
    '    at async D:\\React\\Dragoguard-Dashboard\\node_modules\\.pnpm\\[email protected][email protected][email protected]\\node_modules\\next\\dist\\compiled\\next-server\\app-route.runtime.dev.js:6:63251',
  name: 'Error'

[next-auth][error][OAUTH_CALLBACK_ERROR]
https://next-auth.js.org/errors#oauth_callback_error access_denied {
  message: 'access_denied',
  stack: 'Error: access_denied\n' +
    '    at oAuthCallback (D:\\React\\Dragoguard-Dashboard\\.next\\server\\chunks\\43599_next-auth_34f8d1._.js:2730:23)\n' +
    '    at Object.callback (D:\\React\\Dragoguard-Dashboard\\.next\\server\\chunks\\43599_next-auth_34f8d1._.js:2875:107)\n' +
    '    at AuthHandler (D:\\React\\Dragoguard-Dashboard\\.next\\server\\chunks\\43599_next-auth_34f8d1._.js:3501:51)\n' +
    '    at async NextAuthRouteHandler (D:\\React\\Dragoguard-Dashboard\\.next\\server\\chunks\\43599_next-auth_34f8d1._.js:3709:30)\n' +
    '    at async NextAuth._args$ (D:\\React\\Dragoguard-Dashboard\\.next\\server\\chunks\\43599_next-auth_34f8d1._.js:3744:24)\n' +
    '    at async D:\\React\\Dragoguard-Dashboard\\node_modules\\.pnpm\\[email protected][email protected][email protected]\\node_modules\\next\\dist\\compiled\\next-server\\app-route.runtime.dev.js:6:63251',
  name: 'Error'

XENOX•13mo ago

umm tbh not sure then

Aditya KiradOP•13mo ago

Then what

Gaming

Programming

need help with customizing error page if auth is failed