zudoku 0.0.0-reset-hash-value.ac516c6d → 0.0.0-z06bf8c86

package/src/lib/authentication/providers/supabase.tsx

@@ -1,52 +1,39 @@
 import {
   createClient,
-  type Provider,
   type Session,
   type SupabaseClient,
 } from "@supabase/supabase-js";
 import type { SupabaseAuthenticationConfig } from "../../../config/config.js";
 import { CoreAuthenticationPlugin } from "../AuthenticationPlugin.js";
 import type {
+  AuthActionContext,
+  AuthActionOptions,
   AuthenticationPlugin,
   AuthenticationProviderInitializer,
 } from "../authentication.js";
+import { SignOut } from "../components/SignOut.js";
 import { AuthorizationError } from "../errors.js";
 import { type UserProfile, useAuthState } from "../state.js";
+import { SupabaseAuthUI } from "./supabase/SupabaseAuthUI.js";
 
 class SupabaseAuthenticationProvider
   extends CoreAuthenticationPlugin
   implements AuthenticationPlugin
 {
   private readonly client: SupabaseClient;
-  private readonly provider: Provider;
-  private readonly redirectToAfterSignUp: string;
-  private readonly redirectToAfterSignIn: string;
-  // biome-ignore lint/correctness/noUnusedPrivateClassMembers: Keep around
-  private readonly redirectToAfterSignOut: string;
-
-  constructor({
-    supabaseUrl,
-    supabaseKey,
-    provider,
-    redirectToAfterSignUp,
-    redirectToAfterSignIn,
-    redirectToAfterSignOut,
-    basePath,
-  }: SupabaseAuthenticationConfig) {
+  private readonly config: SupabaseAuthenticationConfig;
+
+  constructor(config: SupabaseAuthenticationConfig) {
+    const { supabaseUrl, supabaseKey } = config;
     super();
-    this.provider = provider;
+
     this.client = createClient(supabaseUrl, supabaseKey, {
       auth: {
         autoRefreshToken: true,
         persistSession: true,
       },
     });
-
-    const root = basePath ?? "/";
-
-    this.redirectToAfterSignUp = redirectToAfterSignUp ?? root;
-    this.redirectToAfterSignIn = redirectToAfterSignIn ?? root;
-    this.redirectToAfterSignOut = redirectToAfterSignOut ?? root;
+    this.config = config;
 
     this.client.auth.onAuthStateChange(async (event, session) => {
       if (session && (event === "SIGNED_IN" || event === "TOKEN_REFRESHED")) {
@@ -90,49 +77,64 @@ class SupabaseAuthenticationProvider
     return request;
   }
 
-  signUp = async ({ redirectTo }: { redirectTo?: string }) => {
-    const finalRedirectTo = redirectTo ?? this.redirectToAfterSignUp;
+  signUp = async (
+    { navigate }: AuthActionContext,
+    { redirectTo }: AuthActionOptions,
+  ) => {
+    void navigate(
+      redirectTo
+        ? `/signup?redirectTo=${encodeURIComponent(redirectTo)}`
+        : `/signup`,
+    );
+  };
 
-    // Open Supabase Auth UI in a new window
-    await this.client.auth.signInWithOAuth({
-      provider: this.provider,
-      options: {
-        redirectTo: window.location.origin + finalRedirectTo,
-      },
-    });
+  signIn = async (
+    { navigate }: AuthActionContext,
+    { redirectTo }: AuthActionOptions,
+  ) => {
+    void navigate(
+      redirectTo
+        ? `/signin?redirectTo=${encodeURIComponent(redirectTo)}`
+        : `/signin`,
+    );
   };
 
-  signIn = async ({ redirectTo }: { redirectTo?: string }) => {
-    const finalRedirectTo = redirectTo ?? this.redirectToAfterSignIn;
-
-    await this.client.auth.signInWithOAuth({
-      provider: this.provider,
-      options: {
-        redirectTo: window.location.origin + finalRedirectTo,
-        queryParams: {
-          access_type: "offline",
-          prompt: "consent",
-        },
+  getRoutes = () => {
+    return [
+      {
+        path: "/signin",
+        element: (
+          <SupabaseAuthUI
+            view="sign_in"
+            client={this.client}
+            config={this.config}
+          />
+        ),
       },
-    });
+      {
+        path: "/signup",
+        element: (
+          <SupabaseAuthUI
+            view="sign_up"
+            client={this.client}
+            config={this.config}
+          />
+        ),
+      },
+      {
+        path: "/signout",
+        element: <SignOut />,
+      },
+    ];
   };
 
   signOut = async () => {
-    await new Promise<void>((resolve) => {
-      const { data } = this.client.auth.onAuthStateChange(async (event) => {
-        if (event !== "SIGNED_OUT") return;
-        data.subscription.unsubscribe();
-        resolve();
-      });
-      void this.client.auth.signOut();
-    });
-
-    useAuthState.setState({
-      isAuthenticated: false,
-      isPending: false,
-      profile: undefined,
-      providerData: undefined,
-    });
+    const { error } = await this.client.auth.signOut({ scope: "local" });
+    if (error) {
+      // biome-ignore lint/suspicious: Logging is better than not doing anything
+      console.error("Error signing out", error);
+    }
+    useAuthState.getState().setLoggedOut();
   };
 
   onPageLoad = async () => {

package/src/lib/authentication/state.ts

@@ -1,5 +1,6 @@
-import { create, type Mutate, type StoreApi } from "zustand";
+import { create } from "zustand";
 import { createJSONStorage, persist } from "zustand/middleware";
+import { syncZustandState } from "../util/syncZustandState.js";
 
 export interface AuthState<ProviderData = unknown> {
   isAuthenticated: boolean;
@@ -17,25 +18,6 @@ export interface AuthState<ProviderData = unknown> {
   }) => void;
 }
 
-export type StoreWithPersist<T> = Mutate<
-  StoreApi<T>,
-  [["zustand/persist", unknown]]
->;
-
-const withStorageDOMEvents = <T>(store: StoreWithPersist<T>) => {
-  const storageEventCallback = (e: StorageEvent) => {
-    if (e.key === store.persist.getOptions().name && e.newValue) {
-      void store.persist.rehydrate();
-    }
-  };
-
-  window.addEventListener("storage", storageEventCallback);
-
-  return () => {
-    window.removeEventListener("storage", storageEventCallback);
-  };
-};
-
 export const useAuthState = create<AuthState>()(
   persist(
     (set) => ({
@@ -85,9 +67,7 @@ export const useAuthState = create<AuthState>()(
   ),
 );
 
-if (typeof window !== "undefined") {
-  withStorageDOMEvents(useAuthState);
-}
+syncZustandState(useAuthState);
 
 export interface UserProfile {
   sub: string;

package/src/lib/authentication/ui/EmailVerificationUi.tsx

@@ -0,0 +1,129 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { CheckIcon, MailCheck, RefreshCw } from "lucide-react";
+import { Navigate, useSearchParams } from "react-router";
+import { ActionButton } from "zudoku/ui/ActionButton.js";
+import { Alert, AlertDescription, AlertTitle } from "zudoku/ui/Alert.js";
+import { Button } from "zudoku/ui/Button.js";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "zudoku/ui/Card.js";
+import createVariantComponent from "../../util/createVariantComponent.js";
+import { getRelativeRedirectUrl } from "../utils/relativeRedirectUrl.js";
+
+export const EmailVerificationUi = ({
+  onResendVerification,
+  onCheckVerification,
+}: {
+  onResendVerification: () => Promise<void>;
+  onCheckVerification: () => Promise<boolean>;
+}) => {
+  const [searchParams] = useSearchParams();
+  const redirectTo = searchParams.get("redirectTo");
+  const relativeRedirectTo = getRelativeRedirectUrl(redirectTo);
+
+  const resendMutation = useMutation({
+    mutationFn: async () => {
+      await onResendVerification();
+    },
+  });
+
+  const checkVerificationMutation = useQuery({
+    queryKey: ["check-verification"],
+    queryFn: async () => {
+      const isVerified = await onCheckVerification();
+      return isVerified;
+    },
+  });
+
+  const error = resendMutation.error ?? checkVerificationMutation.error ?? null;
+
+  return (
+    <AuthCard>
+      {checkVerificationMutation.data === true && (
+        <Navigate to={relativeRedirectTo} />
+      )}
+      <CardHeader className="text-center">
+        <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary/10">
+          <MailCheck className="h-8 w-8 text-primary" />
+        </div>
+        <CardTitle>Verify your email</CardTitle>
+        <CardDescription>We've sent a verification link</CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        {error && (
+          <Alert variant="destructive">
+            <AlertTitle>Error</AlertTitle>
+            <AlertDescription>{error?.message}</AlertDescription>
+          </Alert>
+        )}
+
+        {resendMutation.isSuccess && (
+          <Alert>
+            <AlertTitle>Email sent</AlertTitle>
+            <AlertDescription>
+              A new verification email has been sent. Please check your inbox.
+            </AlertDescription>
+          </Alert>
+        )}
+
+        {checkVerificationMutation.isSuccess &&
+          !checkVerificationMutation.data && (
+            <Alert>
+              <AlertDescription>
+                {checkVerificationMutation.isFetching
+                  ? "Checking verification..."
+                  : "Your email hasn't been verified yet. Please check your inbox and click the verification link."}
+              </AlertDescription>
+            </Alert>
+          )}
+
+        <div className="space-y-4">
+          <ActionButton
+            onClick={() => void checkVerificationMutation.refetch()}
+            isPending={checkVerificationMutation.isFetching}
+            className="w-full"
+          >
+            <div className="flex items-center gap-2">
+              <CheckIcon className="h-4 w-4" /> Continue
+            </div>
+          </ActionButton>
+
+          <div className="relative">
+            <div className="absolute inset-0 flex items-center">
+              <span className="w-full border-t" />
+            </div>
+            <div className="relative flex justify-center text-sm">
+              <span className="bg-card px-2 text-muted-foreground">
+                Didn't receive the email?
+              </span>
+            </div>
+          </div>
+
+          <Button
+            variant="outline"
+            onClick={() => void resendMutation.mutate()}
+            disabled={resendMutation.isPending}
+            className="w-full gap-2"
+          >
+            {resendMutation.isPending ? (
+              <RefreshCw className="h-4 w-4 animate-spin" />
+            ) : (
+              <RefreshCw className="h-4 w-4" />
+            )}
+            Resend verification email
+          </Button>
+        </div>
+
+        <p className="text-center text-xs text-muted-foreground">
+          Make sure to check your spam folder if you don't see the email.
+        </p>
+      </CardContent>
+    </AuthCard>
+  );
+};
+
+const AuthCard = createVariantComponent(Card, "max-w-md w-full mt-10 mx-auto");