feat: persist sessions and auto redirect to app

site/src/pages/login-page.tsx

@@ -1,4 +1,13 @@
-import { Button, Paper, PasswordInput, TextInput, Title } from "@mantine/core";
+import {
+  Button,
+  Paper,
+  PasswordInput,
+  TextInput,
+  Title,
+  Text,
+  Divider,
+  Grid,
+} from "@mantine/core";
 import { useForm, zodResolver } from "@mantine/form";
 import { notifications } from "@mantine/notifications";
 import { useMutation } from "@tanstack/react-query";
@@ -7,13 +16,16 @@ import { z } from "zod";
 import { useUserContext } from "../context/user-context";
 import { Navigate } from "react-router";
 import { Layout } from "../components/layouts/layout";
+import { GoogleIcon } from "../icons/google";
+import { MicrosoftIcon } from "../icons/microsoft";
+import { GithubIcon } from "../icons/github";
 
 export const LoginPage = () => {
   const queryString = window.location.search;
   const params = new URLSearchParams(queryString);
   const redirectUri = params.get("redirect_uri");
 
-  const { isLoggedIn } = useUserContext();
+  const { isLoggedIn, configuredProviders } = useUserContext();
 
   if (isLoggedIn) {
     return <Navigate to="/logout" />;
@@ -58,14 +70,83 @@ export const LoginPage = () => {
     },
   });
 
+  const loginOAuthMutation = useMutation({
+    mutationFn: (provider: string) => {
+      return axios.get(
+        `/api/oauth/url/${provider}?redirect_uri=${redirectUri}`,
+      );
+    },
+    onError: () => {
+      notifications.show({
+        title: "Internal error",
+        message: "Failed to get OAuth URL",
+        color: "red",
+      });
+    },
+    onSuccess: (data) => {
+      window.location.replace(data.data.url);
+    },
+  });
+
   const handleSubmit = (values: FormValues) => {
     loginMutation.mutate(values);
   };
 
   return (
     <Layout>
-      <Title ta="center">Welcome back!</Title>
-      <Paper shadow="md" p={30} mt={30} radius="md" withBorder>
+      <Title ta="center">Tinyauth</Title>
+      <Paper shadow="md" p="xl" mt={30} radius="md" withBorder>
+        <Text size="lg" fw={500} ta="center">
+          Welcome back, login with
+        </Text>
+        <Grid mb="md" mt="md" align="center" justify="center">
+          {configuredProviders.includes("google") && (
+            <Grid.Col span="content">
+              <Button
+                radius="xl"
+                leftSection={<GoogleIcon style={{ width: 14, height: 14 }} />}
+                variant="default"
+                onClick={() => loginOAuthMutation.mutate("google")}
+                loading={loginOAuthMutation.isLoading}
+              >
+                Google
+              </Button>
+            </Grid.Col>
+          )}
+          {configuredProviders.includes("microsoft") && (
+            <Grid.Col span="content">
+              <Button
+                radius="xl"
+                leftSection={
+                  <MicrosoftIcon style={{ width: 14, height: 14 }} />
+                }
+                variant="default"
+                onClick={() => loginOAuthMutation.mutate("microsoft")}
+                loading={loginOAuthMutation.isLoading}
+              >
+                Microsoft
+              </Button>
+            </Grid.Col>
+          )}
+          {configuredProviders.includes("github") && (
+            <Grid.Col span="content">
+              <Button
+                radius="xl"
+                leftSection={<GithubIcon style={{ width: 14, height: 14 }} />}
+                variant="default"
+                onClick={() => loginOAuthMutation.mutate("github")}
+                loading={loginOAuthMutation.isLoading}
+              >
+                Github
+              </Button>
+            </Grid.Col>
+          )}
+        </Grid>
+        <Divider
+          label="Or continue with email"
+          labelPosition="center"
+          my="lg"
+        />
         <form onSubmit={form.onSubmit(handleSubmit)}>
           <TextInput
             label="Email"