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

What is the correct way to do this error handling? Nothing is returned from res or catch err, and the page refreshes 😮
Was this page helpful?