feat: persist sessions and auto redirect to app

site/src/icons/github.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+export function GithubIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"
+      ></path>
+    </svg>
+  );
+}

site/src/icons/google.tsx

@@ -0,0 +1,30 @@
+import type { SVGProps } from "react";
+
+export function GoogleIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={48}
+      height={48}
+      viewBox="0 0 48 48"
+      {...props}
+    >
+      <path
+        fill="#ffc107"
+        d="M43.611 20.083H42V20H24v8h11.303c-1.649 4.657-6.08 8-11.303 8c-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4C12.955 4 4 12.955 4 24s8.955 20 20 20s20-8.955 20-20c0-1.341-.138-2.65-.389-3.917"
+      ></path>
+      <path
+        fill="#ff3d00"
+        d="m6.306 14.691l6.571 4.819C14.655 15.108 18.961 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4C16.318 4 9.656 8.337 6.306 14.691"
+      ></path>
+      <path
+        fill="#4caf50"
+        d="M24 44c5.166 0 9.86-1.977 13.409-5.192l-6.19-5.238A11.9 11.9 0 0 1 24 36c-5.202 0-9.619-3.317-11.283-7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44"
+      ></path>
+      <path
+        fill="#1976d2"
+        d="M43.611 20.083H42V20H24v8h11.303a12.04 12.04 0 0 1-4.087 5.571l.003-.002l6.19 5.238C36.971 39.205 44 34 44 24c0-1.341-.138-2.65-.389-3.917"
+      ></path>
+    </svg>
+  );
+}

site/src/icons/microsoft.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+export function MicrosoftIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={256}
+      height={256}
+      viewBox="0 0 256 256"
+      {...props}
+    >
+      <path fill="#f1511b" d="M121.666 121.666H0V0h121.666z"></path>
+      <path fill="#80cc28" d="M256 121.666H134.335V0H256z"></path>
+      <path fill="#00adef" d="M121.663 256.002H0V134.336h121.663z"></path>
+      <path fill="#fbbc09" d="M256 256.002H134.335V134.336H256z"></path>
+    </svg>
+  );
+}

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"

site/src/schemas/user-context-schema.ts

@@ -5,6 +5,7 @@ export const userContextSchema = z.object({
   email: z.string(),
   oauth: z.boolean(),
   provider: z.string(),
+  configuredProviders: z.array(z.string()),
 });
 
 export type UserContextSchemaType = z.infer<typeof userContextSchema>;