Merge pull request #8 from marmelab/features/admin-auth

feat: added auth pages.
marmelab · Feb 4, 2025 · 55ad2c8 · 55ad2c8
2 parents 2bf6d1d + 3004448
commit 55ad2c8
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 9 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,9 +1,16 @@
-import { Admin, Resource } from "react-admin";
+import { Admin, CustomRoutes, Resource } from "react-admin";
 import { GameList } from "./games/GameList";
-import { supabaseDataProvider } from "ra-supabase";
+import {
+  ForgotPasswordPage,
+  LoginPage,
+  SetPasswordPage,
+  supabaseAuthProvider,
+  supabaseDataProvider,
+} from "ra-supabase";
 import { createClient } from "@supabase/supabase-js";
 import { Box, Typography } from "@mui/material";
 import { GameShow } from "./games/GameShow";
+import { Route } from "react-router";
 
 const instanceUrl =
   import.meta.env.VITE_SUPABASE_API_URL || "http://127.0.0.1:54321";
@@ -14,6 +21,9 @@ if (!apiKey) {
 }
 
 const supabaseClient = apiKey ? createClient(instanceUrl, apiKey) : null;
+const authProvider = supabaseClient
+  ? supabaseAuthProvider(supabaseClient, {})
+  : null;
 const dataProvider =
   apiKey && supabaseClient
     ? supabaseDataProvider({
@@ -24,7 +34,7 @@ const dataProvider =
     : null;
 
 const App = () => {
-  if (!dataProvider) {
+  if (!supabaseClient || !dataProvider || !authProvider) {
     return (
       <Box
         display="flex"
@@ -34,23 +44,34 @@ const App = () => {
         textAlign="center"
       >
         <Typography variant="h6" color="error">
-          Error: VITE_SUPABASE_ANON_KEY is not set.
+          Error: cannot instantiate the app.
           <br />
-          Please check your environment variables in .env file (see
-          .env.sample).
+          Maybe VITE_SUPABASE_ANON_KEY is not set. Please check your environment
+          variables in .env file (see .env.sample).
         </Typography>
       </Box>
     );
   }
 
   return (
-    <Admin dataProvider={dataProvider}>
+    <Admin
+      dataProvider={dataProvider}
+      authProvider={authProvider}
+      loginPage={LoginPage}
+    >
       <Resource
         name="games_view"
         list={GameList}
         show={GameShow}
         options={{ label: "Games" }}
       ></Resource>
+      <CustomRoutes noLayout>
+        <Route path={SetPasswordPage.path} element={<SetPasswordPage />} />
+        <Route
+          path={ForgotPasswordPage.path}
+          element={<ForgotPasswordPage />}
+        />
+      </CustomRoutes>
     </Admin>
   );
 };

diff --git a/tools/populateDbWithFakeData.ts b/tools/populateDbWithFakeData.ts
@@ -13,8 +13,8 @@ dotenv.config({ path: path.resolve(__dirname, "../.env") });
 const client = new pg.Client(process.env.SUPABASE_DB_URL);
 
 const generateSimpleUsername = () => {
-  const name = faker.person.firstName().toLowerCase().slice(0, 5); // Prénom en minuscule
-  const number = faker.number.int({ min: 10, max: 99 }); // Petit nombre
+  const name = faker.person.firstName().toLowerCase().slice(0, 5);
+  const number = faker.number.int({ min: 10, max: 99 });
   return `${name}${number}`;
 };