feat: oauth integration

fresh.gen.ts

@@ -7,41 +7,47 @@ import * as $0 from "./routes/_404.tsx";
 import * as $1 from "./routes/_500.tsx";
 import * as $2 from "./routes/api/login.ts";
 import * as $3 from "./routes/api/logout.ts";
-import * as $4 from "./routes/api/signup.ts";
-import * as $5 from "./routes/dashboard/_middleware.ts";
-import * as $6 from "./routes/dashboard/account.tsx";
-import * as $7 from "./routes/dashboard/api/todo.ts";
-import * as $8 from "./routes/dashboard/index.tsx";
-import * as $9 from "./routes/dashboard/manage-subscription.ts";
-import * as $10 from "./routes/dashboard/todos.tsx";
-import * as $11 from "./routes/dashboard/upgrade-subscription.ts";
-import * as $12 from "./routes/index.tsx";
-import * as $13 from "./routes/login.tsx";
-import * as $14 from "./routes/logout.ts";
-import * as $15 from "./routes/signup.tsx";
-import * as $$0 from "./islands/TodoList.tsx";
+import * as $4 from "./routes/api/oauth.ts";
+import * as $5 from "./routes/api/signup.ts";
+import * as $6 from "./routes/dashboard/_middleware.ts";
+import * as $7 from "./routes/dashboard/account.tsx";
+import * as $8 from "./routes/dashboard/api/todo.ts";
+import * as $9 from "./routes/dashboard/index.tsx";
+import * as $10 from "./routes/dashboard/manage-subscription.ts";
+import * as $11 from "./routes/dashboard/todos.tsx";
+import * as $12 from "./routes/dashboard/upgrade-subscription.ts";
+import * as $13 from "./routes/index.tsx";
+import * as $14 from "./routes/login.tsx";
+import * as $15 from "./routes/logout.ts";
+import * as $16 from "./routes/oauth-success.tsx";
+import * as $17 from "./routes/signup.tsx";
+import * as $$0 from "./islands/AuthFragmentCatcher.tsx";
+import * as $$1 from "./islands/TodoList.tsx";
 
 const manifest = {
   routes: {
     "./routes/_404.tsx": $0,
     "./routes/_500.tsx": $1,
     "./routes/api/login.ts": $2,
     "./routes/api/logout.ts": $3,
-    "./routes/api/signup.ts": $4,
-    "./routes/dashboard/_middleware.ts": $5,
-    "./routes/dashboard/account.tsx": $6,
-    "./routes/dashboard/api/todo.ts": $7,
-    "./routes/dashboard/index.tsx": $8,
-    "./routes/dashboard/manage-subscription.ts": $9,
-    "./routes/dashboard/todos.tsx": $10,
-    "./routes/dashboard/upgrade-subscription.ts": $11,
-    "./routes/index.tsx": $12,
-    "./routes/login.tsx": $13,
-    "./routes/logout.ts": $14,
-    "./routes/signup.tsx": $15,
+    "./routes/api/oauth.ts": $4,
+    "./routes/api/signup.ts": $5,
+    "./routes/dashboard/_middleware.ts": $6,
+    "./routes/dashboard/account.tsx": $7,
+    "./routes/dashboard/api/todo.ts": $8,
+    "./routes/dashboard/index.tsx": $9,
+    "./routes/dashboard/manage-subscription.ts": $10,
+    "./routes/dashboard/todos.tsx": $11,
+    "./routes/dashboard/upgrade-subscription.ts": $12,
+    "./routes/index.tsx": $13,
+    "./routes/login.tsx": $14,
+    "./routes/logout.ts": $15,
+    "./routes/oauth-success.tsx": $16,
+    "./routes/signup.tsx": $17,
   },
   islands: {
-    "./islands/TodoList.tsx": $$0,
+    "./islands/AuthFragmentCatcher.tsx": $$0,
+    "./islands/TodoList.tsx": $$1,
   },
   baseUrl: import.meta.url,
   config,

import_map.json

@@ -12,7 +12,7 @@
     "std/": "https://deno.land/std@0.178.0/",
     "stripe": "https://esm.sh/stripe@11.13.0",
     "tabler-icons/": "https://deno.land/x/tabler_icons_tsx@0.0.2/tsx/",
-    "@supabase/auth-helpers-shared": "https://esm.sh/@supabase/auth-helpers-shared@0.3.0",
-    "@supabase/supabase-js": "https://esm.sh/@supabase/supabase-js@2.10.0"
+    "@supabase/auth-helpers-shared": "https://esm.sh/@supabase/auth-helpers-shared@0.3.0?target=es2022",
+    "@supabase/supabase-js": "https://esm.sh/@supabase/supabase-js@2.10.0?target=es2022"
   }
 }

islands/AuthFragmentCatcher.tsx

@@ -0,0 +1,24 @@
+import { useEffect } from "preact/hooks";
+import { createBrowserSupabaseClient } from "@supabase/auth-helpers-shared";
+import { AUTHENTICATED_REDIRECT_PATH } from "@/constants.ts";
+
+export default function AuthFragmentCatcher(
+  props: Parameters<typeof createBrowserSupabaseClient>[0],
+) {
+  useEffect(() => {
+    const supabase = createBrowserSupabaseClient(props);
+    const {
+      data: { subscription },
+    } = supabase.auth.onAuthStateChange((_event, session) => {
+      if (session?.user) {
+        window.location.href = AUTHENTICATED_REDIRECT_PATH;
+      }
+    });
+
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, []);
+
+  return <span></span>;
+}

routes/api/oauth.ts

@@ -0,0 +1,29 @@
+import type { Handlers } from "$fresh/server.ts";
+import { assert } from "std/testing/asserts.ts";
+import { createSupabaseClient } from "@/utils/supabase.ts";
+import type { Provider } from "@supabase/supabase-js";
+
+export const handler: Handlers = {
+  async POST(request) {
+    const form = await request.formData();
+    const provider = form.get("provider");
+
+    assert(typeof provider === "string");
+
+    const headers = new Headers();
+    const supabaseClient = createSupabaseClient(request.headers, headers);
+    const { data, error } = await supabaseClient.auth.signInWithOAuth({
+      provider: provider as Provider,
+      options: {
+        redirectTo: new URL(request.url).origin +
+          "/oauth-success",
+      },
+    });
+
+    if (error) throw error;
+
+    headers.set("location", data.url);
+
+    return new Response(null, { headers, status: 302 });
+  },
+};

routes/login.tsx

@@ -2,6 +2,30 @@ import type { PageProps } from "$fresh/server.ts";
 import Head from "@/components/Head.tsx";
 import AuthForm from "@/components/AuthForm.tsx";
 import Notice from "@/components/Notice.tsx";
+import Button from "@/components/Button.tsx";
+import type { Provider } from "@supabase/supabase-js";
+
+function capitalize(value: string) {
+  return value[0].toUpperCase() + value.slice(1);
+}
+
+interface OAuthLoginButtonProps {
+  provider: Provider;
+}
+
+function OAuthLoginButton(props: OAuthLoginButtonProps) {
+  return (
+    <form action="/api/oauth" method="POST">
+      <input type="hidden" value={props.provider} name="provider" />
+      <Button
+        type="submit"
+        class="w-full bg-white! text-black border-black border-2"
+      >
+        Log in with {capitalize(props.provider)}
+      </Button>
+    </form>
+  );
+}
 
 export default function LoginPage(props: PageProps) {
   const errorMessage = props.url.searchParams.get("error");
@@ -21,6 +45,9 @@ export default function LoginPage(props: PageProps) {
           {errorMessage === "Invalid login credentials" && (
             <Notice message={errorMessage} color="yellow" />
           )}
+          <div class="space-y-4">
+            <OAuthLoginButton provider="github" />
+          </div>
           <AuthForm type="Login" />
           <div class="text-center text-gray-500 hover:text-black">
             <a href="/signup">Don't have an account? Sign up</a>

routes/oauth-success.tsx

@@ -0,0 +1,10 @@
+import AuthFragmentCatcher from "../islands/AuthFragmentCatcher.tsx";
+
+export default function OAuthSuccessPage() {
+  return (
+    <AuthFragmentCatcher
+      supabaseUrl={Deno.env.get("SUPABASE_URL")!}
+      supabaseKey={Deno.env.get("SUPABASE_ANON_KEY")!}
+    />
+  );
+}