Ajout de l'authentification avec Better Auth dans React Router

1
npm install better-auth

1
npm install zod@3.25.76

1
BETTER_AUTH_URL=http://localhost:5173      # même port que le dev-server
2
BETTER_AUTH_SECRET=super-secret-key-32-chars

1
npx prisma migrate dev --name add-authentication-with-betterauth

1
+model Session {
2
+  id        String   @id
3
+  token     String   @unique
4
+  userId    String
5
+  user      User     @relation(fields: [userId], references: [id], onDelete: Cascade)
6
+  expiresAt DateTime
7
+  createdAt DateTime
8
+  updatedAt DateTime
9
+}

1
import { betterAuth } from "better-auth";
2
import { prismaAdapter } from "better-auth/adapters/prisma";
3
import { admin } from "better-auth/plugins";
4
import { PrismaClient } from "~/../generated/prisma/client";
5

6
const prisma = new PrismaClient();
7

8
export const auth = betterAuth({
9
  baseURL: process.env.BETTER_AUTH_URL,
10
  secret: process.env.BETTER_AUTH_SECRET,
11
  emailAndPassword: { enabled: true },
12
  database: prismaAdapter(prisma, { provider: "postgresql" }),
13
  plugins: [admin({ adminRoles: ["administrator", "super_administrator"] })],
14
});

1
import { auth } from "~/server/auth.server";
2

3
export async function loader({ request }: LoaderFunctionArgs) {
4
  return auth.handler(request);
5
}
6
export async function action({ request }: ActionFunctionArgs) {
7
  return auth.handler(request);
8
}

1
import { adminClient } from "better-auth/client/plugins";
2
import { createAuthClient } from "better-auth/react";
3

4
export const authClient = createAuthClient({
5
  baseURL: "http://localhost:5173",  // même que .env
6
  plugins: [adminClient()],
7
});
8

9
export const { signIn, signUp, signOut, useSession } = authClient;

1
import { z } from "zod";
2

3
export const RegisterSchema = z
4
  .object({
5
    name: z.string().min(2),
6
    email: z.string().email(),
7
    password: z.string().min(8),
8
    confirmPassword: z.string(),
9
  })
10
  .refine((d) => d.password === d.confirmPassword, {
11
    path: ["confirmPassword"],
12
    message: "Les mots de passe ne correspondent pas",
13
  });
14

15
export const LoginSchema = z.object({
16
  email: z.string().email(),
17
  password: z.string().min(1),
18
});

1
import { getFormProps, getInputProps, useForm } from "@conform-to/react";
2
import { parseWithZod } from "@conform-to/zod";
3
import { signUp } from "~/lib/auth-client";
4
import { RegisterSchema } from "~/utils/auth-schemas";
5

6
const [form, fields] = useForm({
7
  onValidate({ formData }) {
8
    return parseWithZod(formData, { schema: RegisterSchema });
9
  },
10
});
11

12
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
13
  e.preventDefault();
14
  const formData = new FormData(e.currentTarget);
15
  const submission = parseWithZod(formData, { schema: RegisterSchema });
16
  if (submission.status !== "success") return;
17

18
  const { error } = await signUp.email(submission.value);
19
  if (!error) navigate("/");
20
}

1
export async function getOptionalUser(request: Request) {
2
  try {
3
    const session = await auth.api.getSession({ headers: request.headers });
4
    return session?.user ?? null;
5
  } catch {
6
    return null;
7
  }
8
}

1
import { redirect } from "react-router";
2

3
export async function requireUser(request: Request) {
4
  const user = await getOptionalUser(request);
5
  if (!user) {
6
    const url = new URL(request.url);
7
    throw redirect(`/login?redirectTo=${url.pathname}`);
8
  }
9
  return user;                     // utilisateur typé
10
}

1
export async function requireAdmin(request: Request) {
2
  const user = await requireUser(request);
3
  if (!["administrator", "super_administrator"].includes(user.role)) {
4
    await auth.api.signOut({ headers: request.headers }); // purge cookie
5
    throw redirect("/login");
6
  }
7
  return user;
8
}

1
export async function loader({ request }: Route.LoaderArgs) {
2
  const user = await getOptionalUser(request);
3
  return data({ user });
4
}
5

6
export function useOptionalUser() {
7
  return useRouteLoaderData<typeof loader>("root")?.user ?? null;
8
}

1
export async function loader({ request }: Route.LoaderArgs) {
2
  await requireAdmin(request);
3
  return data(null);
4
}

1
<button
2
  onClick={() => signOut().then(() => navigate("/"))}
3
  className="text-sm text-gray-600 hover:text-black"
4
>
5
  Déconnexion
6
</button>