How to handle cancelled login, when using nextAuth OAuth?
Hi there! I'm using the T3 stack for the first time and was having trouble handling the OAUTH_CALLBACK_HANDLER_ERROR when cancelling the signIn flow using OAuth.
My users will signIn (e.g. via Discord) and will be greeted with the Discord login page, but if I were to cancel the OAuth flow, I am redirected to http://localhost:3000/api/auth/signin?error=Callback where I can once again sign in via Discord and I get an error in my console.
The proper functionality I want is to redirect my user back to the login page. Thanks!
9 Replies
You can just check for the error Param and based on its value (or lack of its value) you can redirect / show what you want
Hi @Piotrek Thanks for reply. Would I do this in the [...nextauth] file, in the callback object?
Just in the page component
Probably I would do a custom page for that
And set it in [...nextauth]
Hi @Piotrek Could I have more context. sorry if i'm being annoying. I have a button, that has an onClick eventHandler attached to it a button would I add the error param here?
I can help you in a few hours, I am not home right now sorry
Sorry! I missed you. I live in NZ so our timezones might be a bit wack.
Do you have an
onError prop or somehting on the signIn method options? I would probably router.push(...) from there. If not, just create your own page for signIn and then check for error url param there (https://next-auth.js.org/configuration/pages#oauth-sign-in)Pages | NextAuth.js
NextAuth.js automatically creates simple, unbranded authentication pages for handling Sign in, Sign out, Email Verification and displaying error messages.
OK! I've managed to get rid of that callback page, It now redirects to the login page on OAuth cancellation. I do however have this URL when redirected
I don't think it's that big of a deal though. Thanks for your help!! Really appreciate it. @Piotrek
No problem!