Currently, I am implementing next-auth for authentication in conjunction with an email provider. When a user enters their email address on the home page and clicks sign in, they are redirected to the localhost:3000/auth/verify page where they are instructed to check their email for further instructions.
The issue I'm facing is that individuals can access the verification page directly by simply going to localhost:3000/auth/verify, bypassing the intended workflow. This also applies to localhost:3000/auth/error.
I am wondering how I can secure these pages so they only load as part of the next-auth authentication process, triggered perhaps through the signIn() function. This is my first experience working with nextJS and next-auth overall.
In my code file pages/auth/verify.tsx:
import { Fragment } from 'react';
import { Box, Flex, Heading, Text } from '@chakra-ui/react';
import { CheckCircleIcon } from '@chakra-ui/icons';
import { useSession } from 'next-auth/react';
export default function Verify() {
//const { data: session, status } = useSession();
return (
<Fragment>
<Flex minH={'100vh'} align={'center'} justify={'center'}>
<Box textAlign="center" py={10} px={6} maxW={'500'}>
<CheckCircleIcon boxSize={'50px'} color={'green.500'} />
<Heading as="h2" size="xl" mt={6} mb={2}>
Check Your Email
</Heading>
<Text color={'gray.500'}>
A verification email has been sent to your email address. Please
check your inbox and click the link to verify your email address.
</Text>
</Box>
</Flex>
</Fragment>
);
}
I've attempted to leverage the useSession() function to check the current status, but it only provides options like loading, authenticated, and unauthenticated, none of which fit the exact criteria I need for this scenario.
My goal is to display the verify page exclusively when the user has initiated the signIn() process within next-auth.
I would greatly appreciate any guidance or advice on best practices for handling this situation, as I may be approaching it incorrectly.
Should I consolidate everything on the login page and dynamically switch components based on progress steps? Despite researching extensively, I haven't found tutorials on this specific process.