Next-auth Credentials Provider authenticated state doesn't update - next.js

Question

I'm using next-auth 4.18.4 and can't figure out how to set up the Credential provider properly. At this point, when the user logs in, the status remains unauthenticated, and only updates to authenticated when I refresh the page. This is what I have in api/auth/[...nextauth].ts:
import NextAuth from 'next-auth'
import CredentialsProvider from 'next-auth/providers/credentials'
import { verifyPassword } from '../../../lib/auth'
import conn from '../../../lib/db'
export default NextAuth({
providers: [
CredentialsProvider({
async authorize(credentials) {
const query = `SELECT * FROM users WHERE username = $1`
const values = [ credentials.username ]
let user
try {
const result = await conn.query(query, values)
if (result.rows.length > 0) user = result.rows[0]
} catch (err) {
console.log(`Error fetching user from DB: ${err.stack}`)
throw new Error(err)
}
if (!user) throw new Error('No user found!')
const isValid = await verifyPassword(
credentials?.password,
user.password
)
if (!isValid) throw new Error('Could not log you in!')
return {
uid: user.id,
username: user.username,
profilePic: user.profile_pic
}
},
}),
],
})
This is my login page:
import { useForm } from 'react-hook-form'
import { z } from 'zod'
import { zodResolver } from '#hookform/resolvers/zod'
import { signIn } from 'next-auth/react'
import { useRouter } from 'next/router'
import Input from "../components/input"
const validationSchema = z
.object({
userName: z
.string()
.min(1, { message: 'Username is required' })
.regex(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[A-Za-z\d]{5,10}$/, {
message: '5-10 upper and lowercase letters, and digits',
}),
password: z
.string()
.min(5, { message: 'Between 5-10 characters' })
.regex(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[A-Za-z\d]{5,10}$/, {
message: 'Upper and lowercase letters, and digits',
})
})
export default function Auth() {
const {
register,
handleSubmit,
watch,
formState: { errors, isValid },
setValue
} = useForm({
mode: 'all',
resolver: zodResolver(validationSchema),
})
const router = useRouter()
async function submitHandler(data: any) {
const result = await signIn('credentials', {
redirect: false, // don't redirect if user enters wrong credentials
username: data.userName,
password: data.password
})
// console.log(result) // testing
// If the 'error' property is null (meaning log in was successful)
if (!result?.error) {
// Let's clear the input fields
setValue('userName', '')
setValue('password', '')
// And redirect the user to the main page
router.replace('/')
} else {
// If the 'error' property was false, let's print the login error
console.log(`Error: ${JSON.stringify(result.error)}`)
}
}
return (
<div className='text-white max-w-4xl mx-auto pt-10 pb-20 px-2'>
<h1 className='text-2xl text-center pb-8'>Log in</h1>
<form
onSubmit={handleSubmit(submitHandler)}
className='space-y-4 flex flex-col items-center '
>
<Input
id='userName'
type='text'
label='Username'
register={register}
registerOptions={{ required: true }}
errors={errors}
isRequired={true}
/>
<Input
id='password'
type='password'
label='Password'
register={register}
registerOptions={{ required: true }}
errors={errors}
isRequired={true}
/>
<button
type='submit'
disabled={!isValid}
className={`p-3 border-[1px] border-slate-500 rounded-md hover:enabled:bg-white hover:enabled:bg-opacity-20 disabled:cursor-not-allowed w-[90%]`}
>
{isValid ? 'Log In' : 'Please, fill the form'}
</button>
</form>
</div>
)
}
And my index page:
import { useSession } from 'next-auth/react'
export default function Home() {
const { data: session, status } = useSession()
console.log(status);
return (
<div>
<h1 className='text-2xl text-white text-center p-4'>Home Page</h1>
{status === 'authenticated' ?
(<h2 className='text-2xl text-white p-14'>Logged in!</h2>)
:
(<h2 className='text-2xl text-white p-14'>Not logged in!</h2>)
}
</div>
)
}
And the session provider in _app.ts:
import '../styles/globals.css'
import type { AppProps } from 'next/app'
import Layout from '../components/layout'
import { SessionProvider } from 'next-auth/react'
export default function App({
Component,
pageProps: { session, ...pageProps },
}) {
return (
<SessionProvider session={session}>
<Layout>
<Component {...pageProps} />
</Layout>
</SessionProvider>
)
}
By the way, I forgot to add that after logging in, I can see the next-auth.session cookie being created in the browser, but still, status doesn't change until I reload.