Next-auth error handling on oauth problems

Hi, I have this oAuth custom sign-in page, and I have huge problems with figuring out why I can't access the errors returned from sign-in with a provider...
import { getProviders, signIn } from 'next-auth/react'
import type { Provider } from 'next-auth/providers'
import ProviderButton from '~/components/ProviderButton';
import { useSession } from 'next-auth/react';
import { useRouter } from 'next/router';
import { toast, ToastContainer } from 'react-toastify';

interface SignInProps {
providers: Provider[]
}

const SignIn: React.FC<SignInProps> = ({ providers }) => {
const { data, status } = useSession();
const router = useRouter();
if (data?.user && router.pathname === '/auth/signin') {
void router.push('/')
}

const handleSignIn = (provider: Provider) => {
signIn(provider.id, { redirect: false })
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log(err);
})
}
... JSX
import { getProviders, signIn } from 'next-auth/react'
import type { Provider } from 'next-auth/providers'
import ProviderButton from '~/components/ProviderButton';
import { useSession } from 'next-auth/react';
import { useRouter } from 'next/router';
import { toast, ToastContainer } from 'react-toastify';

interface SignInProps {
providers: Provider[]
}

const SignIn: React.FC<SignInProps> = ({ providers }) => {
const { data, status } = useSession();
const router = useRouter();
if (data?.user && router.pathname === '/auth/signin') {
void router.push('/')
}

const handleSignIn = (provider: Provider) => {
signIn(provider.id, { redirect: false })
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log(err);
})
}
... JSX
What is the correct way to do this error handling? Nothing is returned from res or catch err, and the page refreshes 😮
0 Replies
No replies yetBe the first to reply to this messageJoin
Want results from more Discord servers?
Add your server