feat: oauth email whitelist

site/src/main.tsx

@@ -13,6 +13,7 @@ import { LoginPage } from "./pages/login-page.tsx";
 import { LogoutPage } from "./pages/logout-page.tsx";
 import { ContinuePage } from "./pages/continue-page.tsx";
 import { NotFoundPage } from "./pages/not-found-page.tsx";
+import { UnauthorizedPage } from "./pages/unauthorized-page.tsx";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -34,6 +35,7 @@ createRoot(document.getElementById("root")!).render(
               <Route path="/login" element={<LoginPage />} />
               <Route path="/logout" element={<LogoutPage />} />
               <Route path="/continue" element={<ContinuePage />} />
+              <Route path="/unauthorized" element={<UnauthorizedPage />} />
               <Route path="*" element={<NotFoundPage />} />
             </Routes>
           </BrowserRouter>

site/src/pages/unauthorized-page.tsx

@@ -0,0 +1,41 @@
+import { Button, Code, Paper, Text } from "@mantine/core";
+import { Layout } from "../components/layouts/layout";
+import { useUserContext } from "../context/user-context";
+import { Navigate } from "react-router";
+
+export const UnauthorizedPage = () => {
+  const queryString = window.location.search;
+  const params = new URLSearchParams(queryString);
+  const email = params.get("email");
+
+  const { isLoggedIn } = useUserContext();
+
+  if (isLoggedIn) {
+    return <Navigate to="/" />;
+  }
+
+  if (email === "null") {
+    return <Navigate to="/" />;
+  }
+
+  return (
+    <Layout>
+      <Paper shadow="md" p={30} mt={30} radius="md" withBorder>
+        <Text size="xl" fw={700}>
+          Unauthorized
+        </Text>
+        <Text>
+          The user with email address <Code>{email}</Code> is not authorized to
+          login.
+        </Text>
+        <Button
+          fullWidth
+          mt="xl"
+          onClick={() => window.location.replace("/login")}
+        >
+          Try again
+        </Button>
+      </Paper>
+    </Layout>
+  );
+};