feat: better-auth migration (#291)

* feat: better-auth migration

* feat: fix better auth migration

* feat: update authentification and fix chapters generation

Dockerfile

@@ -1,5 +1,5 @@
 FROM node:20-alpine AS base
-RUN apk add --no-cache libc6-compat ffmpeg
+RUN apk add --no-cache libc6-compat ffmpeg bash
 RUN npm install -g turbo pnpm
 
 FROM base AS pruned

apps/frontend/package.json

@@ -14,18 +14,18 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "dev": "pnpm with-env tsx src/server/main.ts",
+    "dev": "tsx src/server/main.ts",
     "start": "NODE_ENV=production tsx src/server/main.ts",
     "build": "vite build",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "with-env": "dotenv -e ../../.env --"
   },
   "dependencies": {
-    "@adminjs/express": "^6.1.0",
+    "@adminjs/express": "^6.1.1",
     "@adminjs/prisma": "^5.0.3",
     "@adminjs/themes": "^1.0.1",
+    "@celluloid/auth": "workspace:*",
     "@celluloid/prisma": "workspace:*",
-    "@celluloid/passport": "workspace:*",
     "@celluloid/queue": "workspace:*",
     "@celluloid/react-player": "2.14.0",
     "@celluloid/trpc": "workspace:*",
@@ -39,6 +39,7 @@
     "@mui/lab": "^5.0.0-alpha.153",
     "@mui/material": "^6.1.2",
     "@mui/styles": "^6.1.2",
+    "@t3-oss/env-core": "^0.11.1",
     "@tanstack/react-query": "^4.36.1",
     "@tanstack/react-query-devtools": "^5.4.2",
     "@tiptap/extension-text-style": "^2.9.1",
@@ -48,6 +49,7 @@
     "@types/linkify-urls": "^3.1.1",
     "@uidotdev/usehooks": "^2.4.1",
     "adminjs": "^7.8.13",
+    "better-auth": "^1.0.21",
     "change-case": "^4.1.2",
     "cookie-parser": "^1.4.7",
     "copy-to-clipboard": "^3.3.3",
@@ -56,7 +58,6 @@
     "enzyme": "^3.3.0",
     "express": "^4.21.1",
     "express-formidable": "^1.2.0",
-    "express-session": "^1.18.1",
     "file-saver": "^2.0.5",
     "formik": "^2.2.9",
     "get-urls": "^11.0.0",
@@ -69,13 +70,11 @@
     "moment-duration-format": "^2.2.2",
     "mui-image": "^1.0.7",
     "notistack": "^3.0.1",
-    "passport": "^0.6.0",
-    "passport-local": "^1.0.0",
     "query-string": "^6.1.0",
     "ramda": "^0.28.0",
     "randomcolor": "^0.5.3",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "catalog:react18",
+    "react-dom": "catalog:react18",
     "react-draggable": "^4.4.6",
     "react-error-boundary": "^4.0.11",
     "react-i18next": "^13.2.2",
@@ -90,7 +89,7 @@
     "serve": "^14.2.1",
     "shiitake": "^3.0.2",
     "tsx": "^4.19.1",
-    "typescript": "^5.6.2",
+    "typescript": "catalog:",
     "vite-express": "^0.19.0",
     "yup": "^1.4.0",
     "yup-locales": "^1.2.28"
@@ -116,7 +115,6 @@
     "@types/cors": "^2.8.13",
     "@types/express": "^4",
     "@types/express-formidable": "^1",
-    "@types/express-session": "^1",
     "@types/file-saver": "^2.0.5",
     "@types/get-urls": "^9.1.3",
     "@types/i18next": "^13.0.0",
@@ -140,7 +138,8 @@
     "eslint": "^8.50.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.3.5",
-    "typescript": "^5.6.2",
+    "nodemon": "^3.1.9",
+    "typescript": "catalog:",
     "vite": "^4.5.5",
     "vite-aliases": "^0.11.7"
   }

apps/frontend/src/App.tsx

@@ -1,6 +1,6 @@
 import "dayjs/locale/fr"; // import locale
 
-import { CssBaseline, Dialog, ThemeProvider } from "@mui/material";
+import { CssBaseline, ThemeProvider } from "@mui/material";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { createWSClient, httpBatchLink, splitLink, wsLink } from "@trpc/client";
@@ -16,7 +16,6 @@ import React, { Suspense, useCallback, useState } from "react";
 import { initReactI18next } from "react-i18next";
 import {
   BrowserRouter,
-  createBrowserRouter,
   Navigate,
   Route,
   Routes,
@@ -55,10 +54,6 @@ import { createTheme } from "./theme";
 
 const API_URL = "/api/trpc";
 
-const WS_URL = `${location.protocol === "https:" ? "wss" : "ws"}://${
-  location.host
-}/trpc`;
-
 dayjs.extend(relativeTime);
 dayjs.extend(isLeapYear); // use plugin
 dayjs.extend(duration);
@@ -166,28 +161,37 @@ const App = () => {
   const [trpcClient] = useState(() =>
     trpc.createClient({
       links: [
-        splitLink({
-          condition(op) {
-            // check for operation type
-            return op.type === "subscription";
+        httpBatchLink({
+          url: "/api/trpc",
+          fetch(url, options) {
+            return fetch(url, {
+              ...options,
+              credentials: "include",
+            });
           },
-          // when condition is true, use normal request
-          true: wsLink({
-            client: createWSClient({
-              url: WS_URL,
-            }),
-          }),
-          // when condition is false, use batching
-          false: httpBatchLink({
-            url: API_URL,
-            fetch(url, options) {
-              return fetch(url, {
-                ...options,
-                credentials: "include",
-              });
-            },
-          }),
         }),
+        // splitLink({
+        //   condition(op) {
+        //     // check for operation type
+        //     return op.type === "subscription";
+        //   },
+        //   // when condition is true, use normal request
+        //   true: wsLink({
+        //     client: createWSClient({
+        //       url: WS_URL,
+        //     }),
+        //   }),
+        //   // when condition is false, use batching
+        //   false: httpBatchLink({
+        //     url: API_URL,
+        //     fetch(url, options) {
+        //       return fetch(url, {
+        //         ...options,
+        //         credentials: "include",
+        //       });
+        //     },
+        //   }),
+        // }),
       ],
     })
   );

apps/frontend/src/components/AppBarMenu.tsx

@@ -1,38 +1,41 @@
-import { AppBar, Box, BoxProps, Button, styled, Toolbar } from "@mui/material";
-import * as React from "react";
+import {
+  AppBar,
+  Box,
+  type BoxProps,
+  Button,
+  styled,
+  Toolbar,
+} from "@mui/material";
+import type * as React from "react";
 import { useTranslation } from "react-i18next";
-import { useLocation, useNavigate } from "react-router";
+import { useNavigate } from "react-router";
 
 import { getButtonLink } from "~components/ButtonLink";
 import { Footer } from "~components/Footer";
 import { LogoWithLabel } from "~components/LogoWithLabel";
 import { SigninMenu } from "~components/SigninMenu";
-import { trpc } from "~utils/trpc";
 
 import { LanguageMenu } from "./LanguageMenu";
+import { useSession } from "~/lib/auth-client";
 
 const Offset = styled("div")(({ theme }) => theme.mixins.toolbar);
 
 export const AppBarMenu: React.FC<BoxProps> = ({ children }) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
-  const { data, isError } = trpc.user.me.useQuery(
-    {},
-    { retry: false, keepPreviousData: false, cacheTime: 0 }
-  );
 
-  const location = useLocation();
+  const { data: session } = useSession();
 
   const handleCreate = () => {
-    if (data) {
-      navigate(`/create`);
+    if (session) {
+      navigate("/create");
     } else {
       navigate("/signup", { state: { backgroundLocation: "/" } });
     }
   };
 
   const handleJoin = () => {
-    if (!data) {
+    if (!session) {
       navigate("/signup-student", { state: { backgroundLocation: "/" } });
     } else {
       navigate("/join", { state: { backgroundLocation: "/" } });
@@ -95,7 +98,7 @@ export const AppBarMenu: React.FC<BoxProps> = ({ children }) => {
             {t("menu.about")}
           </Button>
 
-          <SigninMenu user={!isError ? data : null} />
+          <SigninMenu user={session?.user} />
           <LanguageMenu />
         </Toolbar>
       </AppBar>

apps/frontend/src/components/SharedLayout.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import type * as React from "react";
 import { Outlet } from "react-router-dom";
 
 import { AppBarMenu } from "./AppBarMenu";

apps/frontend/src/components/SigninMenu.tsx

@@ -4,11 +4,10 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation, useNavigate } from "react-router";
 
-import { trpc, UserMe } from "~utils/trpc";
-
 import { Avatar } from "./Avatar";
+import { signOut, type User } from "~/lib/auth-client";
 
-export const SigninMenu = ({ user }: { user: UserMe }) => {
+export const SigninMenu = ({ user }: { user: User | null }) => {
   const navigate = useNavigate();
   const location = useLocation();
 
@@ -17,9 +16,6 @@ export const SigninMenu = ({ user }: { user: UserMe }) => {
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
 
-  const utils = trpc.useContext();
-  const mutation = trpc.user.logout.useMutation();
-
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget);
   };
@@ -28,11 +24,14 @@ export const SigninMenu = ({ user }: { user: UserMe }) => {
   };
 
   const handleLogout = async () => {
-    await mutation.mutateAsync();
-    utils.user.me.invalidate();
-    utils.project.list.invalidate();
+    await signOut({
+      fetchOptions: {
+        onSuccess: () => {
+          navigate("/", { replace: true });
+        },
+      },
+    });
     handleClose();
-    navigate("/", { replace: true });
   };
 
   const handleProfile = () => {
@@ -69,7 +68,7 @@ export const SigninMenu = ({ user }: { user: UserMe }) => {
               borderColor: user.color,
               borderStyle: "solid",
             }}
-            src={user.avatar?.publicUrl}
+            src={user.image ?? undefined}
           >
             {user.initial}
           </Avatar>
@@ -136,7 +135,7 @@ export const SigninMenu = ({ user }: { user: UserMe }) => {
           },
         }}
       >
-        {user && user.role == "Admin" ? (
+        {user && user.role === "admin" ? (
           <MenuItem onClick={handleOpenAdmin} data-testid="header-admin-button">
             {t("menu.admin")}
           </MenuItem>

apps/frontend/src/components/TransUserRole.tsx

@@ -1,14 +1,10 @@
 import { Trans } from "react-i18next";
 
-export const TransUserRole = ({
-  role,
-}: {
-  role: "Student" | "Teacher" | "Admin";
-}) =>
-  role == "Student" ? (
-    <Trans i18nKey="profile.role.student" />
-  ) : role == "Teacher" ? (
+export const TransUserRole = ({ role }: { role?: string }) =>
+  role === "admin" ? (
+    <Trans i18nKey="profile.role.admin" />
+  ) : role === "teacher" ? (
     <Trans i18nKey="profile.role.teacher" />
   ) : (
-    <Trans i18nKey="profile.role.admin" />
+    <Trans i18nKey="profile.role.student" />
   );