Next.js 2-Factor Authentication with Email and Password credentials based on session cookies and Prisma ORM

'use client';

import { createContext, useContext, useEffect, useState } from 'react';
import type { SessionContextType, SessionType } from '@/lib/types';
import { isValidUser } from '@/lib/utils';

const SessionContext = createContext(null);

type Props = {
	children: React.ReactNode;
	currentSession: SessionType;
};

const SessionProvider: React.FC = ({ children, currentSession }) => {
	const [session, setSession] = useState(currentSession);
	const [isAuthenticated, setIsAuthenticated] = useState(isValidUser(currentSession));

	useEffect(() => {
		setSession((_) => currentSession);
		setIsAuthenticated((_) => isValidUser(currentSession));
	}, [currentSession]);

	return {children};
};

export function useSession() {
	const context = useContext(SessionContext);
	if (!context) throw new Error('useSession hook has to be used within a SessionProvider');
	return context;
}

export default SessionProvider;

'use client';

import { INITIAL_ERROR_STATE } from '@/lib/constants';
import { validatateRawFormDataAgainstSchema } from '@/lib/validation';
import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';
import { useFormState } from 'react-dom';
import { ZodSchema, ZodType, z } from 'zod';
import { useModal } from './ModalProvider';
import { ModalContentProps } from '../layout/ModalBuilder';
import { isEqualWithCurrentFormData } from '@/lib/utils';

type FormContextType = {
	onChangeHandler: (event: React.FormEvent) => void;
	error: z.inferFlattenedErrors> | undefined;
	values: Record;
	isChanged: boolean;
};
type Props = {
	children: React.ReactNode;
	dispatcher: (previousState: any, formData: FormData) => Promise>>;
	schema: ZodSchema;
	passwordRefs?: React.MutableRefObject;
	initValues: Record;
	modal?: ModalContentProps;
};
const FormContext = createContext(null);

const FormProvider: React.FC = ({ children, dispatcher, schema, passwordRefs, initValues, modal }) => {
	const [error, setError] = useState>>(INITIAL_ERROR_STATE);
	const [serverValidation, formAction] = useFormState(dispatcher, null);
	const [values, setValues] = useState(initValues);
	const [isChanged, setIsChanged] = useState(false);
	const ref = useRef(null);
	const { setContent, setShowModal, showModal } = useModal();

	useEffect(() => {
		const formData = ref.current ? new FormData(ref.current) : new FormData();
		setIsChanged((_) => !isEqualWithCurrentFormData(initValues, formData));
	}, [values, initValues, setIsChanged]);

	useEffect(() => {
		if (serverValidation) {
			if (Object.keys(serverValidation.fieldErrors).length > 0 || serverValidation.formErrors.length > 0) {
				setError((prev) => {
					return {
						...prev,
						...serverValidation,
					};
				});
				if (passwordRefs?.current) {
					for (let i = 0; i < passwordRefs.current.length; i++) {
						passwordRefs.current[i].value = '';
					}
				}
			} else {
				if (modal) {
					setContent(modal);
				}
				setShowModal(true);
			}
		}
	}, [serverValidation, setError, passwordRefs, setContent, setShowModal, modal]);

	const onChangeHandler = useCallback(
		async (event: React.FormEvent) => {
			const formData = ref.current ? new FormData(ref.current) : new FormData();
			const inputElement = event.target as HTMLInputElement;
			const { id, value } = inputElement;
			if (inputElement) {
				const result = validatateRawFormDataAgainstSchema(schema, formData);
				setValues((prev) => ({ ...prev, [id]: value }));
				if (!result.success) {
					const errors = result.error.flatten();
					setError((prev) => {
						let fieldErrors =
							id in errors.fieldErrors
								? { ...prev?.fieldErrors, [id]: errors.fieldErrors[id] }
								: { ...prev?.fieldErrors, [id]: undefined };

						return {
							formErrors: [...errors.formErrors],
							fieldErrors,
						};
					});
				} else {
					setError((_) => INITIAL_ERROR_STATE);
				}
			}
		},
		[setError, schema]
	);

	return (
		

			{children}
		
	);
};

export function useForm() {
	const context = useContext(FormContext);
	if (!context) throw new Error('useForm hook has to be used within a FormProvider');
	return context;
}

export default FormProvider;

import { NextRequest, NextResponse } from 'next/server';
import { getSessionToken, updateSessionToken } from './lib/session';

export async function middleware(request: NextRequest) {
	const pathname = request.nextUrl.pathname;
	const session = await getSessionToken();

	if (pathname.startsWith('/auth')) {
		if (
			session &&
			(pathname.startsWith('/auth/login') ||
				pathname.startsWith('/auth/register') ||
				pathname.startsWith('/auth/verify') ||
				pathname.startsWith('/auth/set-new-password') ||
				pathname.startsWith('/auth/forgot-password'))
		) {
			return NextResponse.redirect(new URL('/', request.url));
		}

		if (!session && pathname.startsWith('/auth/settings')) {
			return NextResponse.redirect(new URL('/auth/login?refresh=true', request.url));
		}

		if (pathname.startsWith('/auth/admin') && (!session || session.role !== 'ADMIN')) {
			return NextResponse.redirect(new URL('/auth/login?refresh=true', request.url));
		}
	}

	return await updateSessionToken(session);
}

export const config = {
	matcher: [
		/*
		 * Match all request paths except for the ones starting with:
		 * - api (API routes)
		 * - _next/static (static files)
		 * - _next/image (image optimization files)
		 * - favicon.ico (favicon file)
		 */
		{
			source: '/((?!api|_next/static|_next/image|favicon.ico|jpg$|png$).*)',
			missing: [
				{ type: 'header', key: 'next-router-prefetch' },
				{ type: 'header', key: 'purpose', value: 'prefetch' },
			],
		},
	],
};

SECRET_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
RESEND_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
POSTGRES_URL="postgres://default:xxxxxxxxxxxxxxxxxxxxxx.eu-central-1.aws.neon.tech:5432/xxxxxxxx?sslmode=require"
POSTGRES_PRISMA_URL="postgres://default:xxxxxxxxxxxxxxxxxxxxxx.eu-central-1.aws.neon.tech:5432/xxxxxxxx?sslmode=require&pgbouncer=true&connect_timeout=15"
POSTGRES_URL_NO_SSL="postgres://default:xxxxxxxxxxxxxxxxxxxxxx.eu-central-1.aws.neon.tech:5432/xxxxxxxx"
POSTGRES_URL_NON_POOLING="postgres://xxxxxxxxxxxxxxxxxxxxxx.eu-central-1.aws.neon.tech:5432/xxxxxxxx?sslmode=require"
POSTGRES_USER="default"
POSTGRES_HOST="ep-rapid-xxxxxxxxxxxxxxxxxxxxxx.aws.neon.tech"
POSTGRES_PASSWORD="xxxxxxxxxxxxxxxx"
POSTGRES_DATABASE="xxxxxxxx"

export const SESSION_EXPIRING_SECONDS = 24 * 60 * 60; /* 24 hours */
export const THEME_EXPIRING_SECONDS = 24 * 60 * 60; /* 24 hours */
export const EMAIL_VERIFICATION_LINK_VALID_SECONDS = 60 * 60; /* 1 hour */
export const EMAIL_PASSWORD_RESET_LINK_VALID_SECONDS = 15 * 60; /* 15 minutes */
export const DROPDOWN_MENU_DELAY = 180;
export const THROTTLE_EMAIL_DISPATCH_IN_MILLISECONDS = 1000 * 60 * 5; /* only 1 email can be sent every 5 minutes */
export const FALLBACK_THEME: Theme = 'dark'; /* Dark mode is standard theme*/
export const INITIAL_ERROR_STATE = {
	formErrors: [] as string[],
	fieldErrors: {},
};
export const STATUS_TAILWIND_BG_COLORS: Record = {
	REGISTERED: 'bg-yellow-700/50',
	ACTIVE: 'bg-green-700/50',
	INACTIVE: 'bg-red-700/50',
};