import { useState } from 'react' import { GetServerSideProps } from 'next' import { getProviders, signIn, getCsrfToken } from 'next-auth/react' import { getServerSession } from 'next-auth/next' import Head from 'next/head' import Link from 'next/link' import { useRouter } from 'next/router' import { authOptions } from '../api/auth/[...nextauth]' import Layout from '@/components/layout' interface SignInProps { providers: Awaited> csrfToken: string | undefined } export default function SignIn({ providers, csrfToken }: SignInProps) { const router = useRouter() const { callbackUrl, error } = router.query const [email, setEmail] = useState('') const [password, setPassword] = useState('') const [isLoading, setIsLoading] = useState(false) const [authError, setAuthError] = useState( error ? getErrorMessage(error as string) : null ) const handleCredentialsSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) setAuthError(null) try { const result = await signIn('credentials', { email, password, redirect: false, }) if (result?.error) { setAuthError(result.error) } else if (result?.ok) { router.push((callbackUrl as string) || '/') } } catch (err) { setAuthError('An unexpected error occurred') } finally { setIsLoading(false) } } const handleOAuthSignIn = (providerId: string) => { signIn(providerId, { callbackUrl: (callbackUrl as string) || '/' }) } return ( Sign In | LocalGreenChain

Sign in to your account

Or{' '} create a new account

{authError && (
{authError}
)}
setEmail(e.target.value)} className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-green-500 focus:border-green-500 focus:z-10 sm:text-sm" placeholder="Email address" />
setPassword(e.target.value)} className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-green-500 focus:border-green-500 focus:z-10 sm:text-sm" placeholder="Password" />
{providers && Object.values(providers).filter(p => p.id !== 'credentials').length > 0 && ( <>
Or continue with
{Object.values(providers) .filter((provider) => provider.id !== 'credentials') .map((provider) => ( ))}
)}
) } function getErrorMessage(error: string): string { const errorMessages: Record = { Signin: 'Try signing in with a different account.', OAuthSignin: 'Try signing in with a different account.', OAuthCallback: 'Try signing in with a different account.', OAuthCreateAccount: 'Try signing in with a different account.', EmailCreateAccount: 'Try signing in with a different account.', Callback: 'Try signing in with a different account.', OAuthAccountNotLinked: 'To confirm your identity, sign in with the same account you used originally.', EmailSignin: 'Check your email address.', CredentialsSignin: 'Sign in failed. Check the details you provided are correct.', default: 'Unable to sign in.', } return errorMessages[error] ?? errorMessages.default } export const getServerSideProps: GetServerSideProps = async (context) => { const session = await getServerSession(context.req, context.res, authOptions) if (session) { return { redirect: { destination: '/', permanent: false, }, } } const providers = await getProviders() const csrfToken = await getCsrfToken(context) return { props: { providers: providers ?? null, csrfToken: csrfToken ?? null, }, } }