Next.js: Аутентификация

1src/features/auth
2├── api
3│   ├── jwt.ts
4│   └── session.ts
5├── services
6│   ├── login.ts
7│   ├── logout.ts
8│   ├── signup.ts
9│   └── user.ts
10├── types
11│   └── definitions.ts
12└── ui
13    ├── form-login.tsx
14    ├── form-signup.tsx
15    └── logout-button.tsx

1DATABASE_URL="mysql://root@localhost:3306/simple-app"

1import { SignJWT, jwtVerify } from 'jose';
2import { SessionPayload } from '../types/definitions';
3
4const secretKey = process.env.SESSION_SECRET;
5const encodedKey = new TextEncoder().encode(secretKey);
6
7export async function encrypt(payload: SessionPayload) {
8  return new SignJWT(payload)
9    .setProtectedHeader({ alg: 'HS256' })
10    .setIssuedAt()
11    .setExpirationTime('7d')
12    .sign(encodedKey);
13}
14
15export async function decrypt(session: string | undefined = '') {
16  try {
17    const { payload } = await jwtVerify(session, encodedKey, {
18      algorithms: ['HS256'],
19    });
20    return payload;
21  } catch (error) {
22    console.log('Не удалось подтвердить сеанс');
23    return null;
24  }
25}

1import 'server-only';
2
3import { cookies } from 'next/headers';
4import { decrypt, encrypt } from './jwt';
5
6export async function createSession(userId: string) {
7  // Длительность 1 сутки
8  const expiresAt = new Date(Date.now() + 1 * 24 * 60 * 60 * 1000);
9  const session = await encrypt({ userId, expiresAt });
10
11  cookies().set('session', session, {
12    httpOnly: true,
13    secure: true,
14    expires: expiresAt,
15    sameSite: 'lax',
16    path: '/',
17  });
18
19  redirect('/dashboard');
20}
21
22export async function verifySession() {
23  const cookie = cookies().get('session')?.value;
24  const session = await decrypt(cookie);
25
26  if (!session?.userId) {
27    redirect('/login');
28    return null;
29  }
30
31  return { isAuth: true, userId: Number(session.userId) };
32}
33
34export function deleteSession() {
35  cookies().delete('session');
36  redirect('/login');
37}

1import { z } from 'zod';
2
3export const SignupFormSchema = z.object({
4  name: z
5    .string()
6    .min(2, { message: 'Name must be at least 2 characters long.' })
7    .trim(),
8  username: z
9    .string()
10    .min(4, { message: 'Be at least 4 characters long' })
11    .trim(),
12  password: z
13    .string()
14    .min(8, { message: 'Be at least 8 characters long' })
15    .regex(/[a-zA-Z]/, { message: 'Contain at least one letter.' })
16    .regex(/[0-9]/, { message: 'Contain at least one number.' })
17    .regex(/[^a-zA-Z0-9]/, {
18      message: 'Contain at least one special character.',
19    })
20    .trim(),
21});
22
23export const LoginFormSchema = z.object({
24  username: z.string().min(1, { message: 'Username field must not be empty.' }),
25  password: z.string().min(1, { message: 'Password field must not be empty.' }),
26});
27
28export type FormState =
29  | {
30      errors?: {
31        username?: string[];
32        password?: string[];
33        name?: string[];
34      };
35      message?: string;
36    }
37  | undefined;
38
39export type SessionPayload = {
40  userId: string | number;
41  expiresAt: Date;
42};

1'use server';
2
3import { PrismaClient } from '@prisma/client';
4import bcrypt from 'bcryptjs';
5import { createSession } from '../api/session';
6import { FormState, LoginFormSchema } from '../types/definitions';
7
8const prisma = new PrismaClient();
9
10export async function login(
11  state: FormState,
12  formData: FormData,
13): Promise<FormState> {
14  // 1. Validate form fields
15  const validatedFields = LoginFormSchema.safeParse({
16    username: formData.get('username'),
17    password: formData.get('password'),
18  });
19  const errorMessage = { message: 'Invalid login credentials.' };
20
21  // If any form fields are invalid, return early
22  if (!validatedFields.success) {
23    return {
24      errors: validatedFields.error.flatten().fieldErrors,
25    };
26  }
27
28  // 2. Query the database for the user with the given email
29  const { username, password } = validatedFields.data;
30
31  const user = await prisma.user.findFirst({
32    where: { username },
33  });
34
35  if (!user) {
36    return errorMessage;
37  }
38
39  // 3. Compare the user's password with the hashed password in the database
40  const passwordMatch = await bcrypt.compare(password, user.password);
41
42  // If the password does not match, return early
43  if (!passwordMatch) {
44    return errorMessage;
45  }
46
47  // 4. If login successful, create a session for the user and redirect
48  const userId = user.id.toString();
49  await createSession(userId);
50}

1'use client';
2
3import { cn } from '@/shared/lib/react';
4import { Button, Input } from @/shared/ui/client';
5import { FC } from 'react';
6import { useFormState, useFormStatus } from 'react-dom';
7import { login } from '../../services/login';
8
9interface FormLoginProps {
10  className?: string;
11}
12
13export const FormLogin: FC<FormLoginProps> = ({ className }) => {
14  const [state, action] = useFormState(login, undefined);
15  const { pending } = useFormStatus();
16
17  return (
18    <form action={action} className={cn('grid gap-2 h-fit', className)}>
19      <Input
20        name='username'
21        placeholder='Username'
22        errorMessage={state?.errors?.username}
23        isInvalid={Boolean(state?.errors?.username)}
24      />
25      <Input
26        name='password'
27        placeholder='Password'
28        type='password'
29        errorMessage={state?.errors?.password}
30        isInvalid={Boolean(state?.errors?.password)}
31      />
32      <Button
33        color='primary'
34        disabled={pending}
35        type='submit'
36        className='mt-2 w-full'
37      >
38        {pending ? 'Submitting...' : 'Login'}
39      </Button>
40    </form>
41  );
42};

1'use server';
2
3import { PrismaClient } from '@prisma/client';
4import bcrypt from 'bcryptjs';
5import { createSession } from '../api/session';
6import { FormState, SignupFormSchema } from '../types/definitions';
7
8const prisma = new PrismaClient();
9
10export async function signup(
11  state: FormState,
12  formData: FormData,
13): Promise<FormState> {
14  // 1. Validate form fields
15  const validatedFields = SignupFormSchema.safeParse({
16    name: formData.get('name'),
17    username: formData.get('username'),
18    password: formData.get('password'),
19  });
20
21  // If any form fields are invalid, return early
22  if (!validatedFields.success) {
23    return {
24      errors: validatedFields.error.flatten().fieldErrors,
25    };
26  }
27
28  // 2. Prepare data for insertion into database
29  const { name, username, password } = validatedFields.data;
30
31  // 3. Check if the user's username already exists
32  const existingUser = await prisma.user.findFirst({ where: { username } });
33
34  if (existingUser) {
35    return {
36      message: 'Username already exists, please use a different username.',
37    };
38  }
39
40  // Hash the user's password
41  const hashedPassword = await bcrypt.hash(password, 10);
42
43  // 3. Insert the user into the database or call an Auth Provider's API
44  const user = await prisma.user.create({
45    data: {
46      name,
47      username,
48      password: hashedPassword,
49    },
50    select: { id: true },
51  });
52
53  if (!user) {
54    return {
55      message: 'An error occurred while creating your account.',
56    };
57  }
58
59  // 4. Create a session for the user
60  const userId = user.id.toString();
61  await createSession(userId);
62}

1'use client';
2
3import { cn } from '@/shared/lib/react';
4import { Button, Input } from @/shared/ui/client';
5import { FC } from 'react';
6import { useFormState, useFormStatus } from 'react-dom';
7import { signup } from '../../services/signup';
8
9interface FormSignupProps {
10  className?: string;
11}
12
13export const FormSignup: FC<FormSignupProps> = ({ className }) => {
14  const [state, action] = useFormState(signup, undefined);
15  const { pending } = useFormStatus();
16
17  return (
18    <form action={action} className={cn('grid gap-2 h-fit', className)}>
19      <Input
20        name='name'
21        placeholder='Name'
22        errorMessage={state?.errors?.name}
23        isInvalid={Boolean(state?.errors?.name)}
24      />
25      <Input
26        name='username'
27        placeholder='Username'
28        errorMessage={state?.errors?.username}
29        isInvalid={Boolean(state?.errors?.username)}
30      />
31      <Input
32        name='password'
33        placeholder='Password'
34        type='password'
35        errorMessage={state?.errors?.password}
36        isInvalid={Boolean(state?.errors?.password)}
37      />
38      <Button
39        color='primary'
40        disabled={pending}
41        type='submit'
42        className='mt-2 w-full'
43      >
44        {pending ? 'Submitting...' : 'Signup'}
45      </Button>
46    </form>
47  );
48};

1'use server';
2
3import { deleteSession } from '../api/session';
4
5export async function logout() {
6  deleteSession();
7}

1'use client';
2
3import { Dictionary } from '@/shared/config/i18n';
4import { Button } from @/shared/ui/client';
5import { RxExit } from 'react-icons/rx';
6import { logout } from '../../services/logout';
7
8export const LogoutButton = ({ dict }: { dict: Dictionary['ui'] }) => {
9  return (
10    <Button
11      startContent={<RxExit size={18} />}
12      color='danger'
13      variant='flat'
14      size='sm'
15      onClick={async () => await logout()}
16    >
17      {dict['auth-logout']}
18    </Button>
19  );
20};

1import 'server-only';
2
3import { PrismaClient } from '@prisma/client';
4import { cache } from 'react';
5import { verifySession } from '../api/session';
6
7const prisma = new PrismaClient();
8
9export const getUser = cache(async () => {
10  const session = await verifySession();
11  if (!session) return null;
12
13  try {
14    const user = await prisma.user.findFirst({
15      where: {
16        id: session.userId,
17      },
18      select: {
19        id: true,
20        username: true,
21        name: true,
22      },
23    });
24
25    return user;
26  } catch (error) {
27    console.log('Failed to fetch user');
28    return null;
29  }
30});