@mehdad67/apitogo 0.1.24

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

@@ -0,0 +1,412 @@
+import {
+  createClient,
+  type Provider,
+  type Session,
+  type SupabaseClient,
+} from "@supabase/supabase-js";
+import type { SupabaseAuthenticationConfig } from "../../../config/config.js";
+import { ZudokuError } from "../../util/invariant.js";
+import { joinUrl } from "../../util/joinUrl.js";
+import type {
+  AuthActionContext,
+  AuthActionOptions,
+  AuthenticationPlugin,
+  AuthenticationProviderInitializer,
+} from "../authentication.js";
+import { CoreAuthenticationPlugin } from "../AuthenticationPlugin.js";
+import { SignOut } from "../components/SignOut.js";
+import { AuthorizationError } from "../errors.js";
+import { type UserProfile, useAuthState } from "../state.js";
+import { EmailVerificationUi } from "../ui/EmailVerificationUi.js";
+import {
+  ZudokuPasswordResetUi,
+  ZudokuPasswordUpdateUi,
+  ZudokuSignInUi,
+  ZudokuSignUpUi,
+} from "../ui/ZudokuAuthUi.js";
+
+export type SupabaseProviderData = {
+  type: "supabase";
+  session: Session;
+};
+
+declare module "../state.js" {
+  interface ProviderDataRegistry {
+    supabase: SupabaseProviderData;
+  }
+}
+
+class SupabaseAuthenticationProvider
+  extends CoreAuthenticationPlugin
+  implements AuthenticationPlugin
+{
+  private readonly client: SupabaseClient;
+  private readonly config: SupabaseAuthenticationConfig;
+  private readonly providers: string[];
+  private readonly enableUsernamePassword: boolean;
+
+  constructor(config: SupabaseAuthenticationConfig) {
+    const { supabaseUrl, supabaseKey } = config;
+    super();
+
+    this.client = createClient(supabaseUrl, supabaseKey, {
+      auth: {
+        autoRefreshToken: true,
+        persistSession: true,
+      },
+    });
+    this.config = config;
+
+    // Support both 'provider' (deprecated) and 'providers' config
+    const configuredProviders = config.provider
+      ? [config.provider]
+      : (config.providers ?? []);
+    this.providers = configuredProviders;
+    this.enableUsernamePassword = !config.onlyThirdPartyProviders;
+
+    this.client.auth.onAuthStateChange(async (event, session) => {
+      if (session && (event === "SIGNED_IN" || event === "TOKEN_REFRESHED")) {
+        await this.updateUserState(session);
+      } else if (event === "SIGNED_OUT") {
+        useAuthState.getState().setLoggedOut();
+      }
+    });
+  }
+
+  private async updateUserState(session: Session) {
+    const { user } = session;
+
+    const profile: UserProfile = {
+      sub: user.id,
+      email: user.email,
+      name: user.user_metadata.full_name || user.user_metadata.name,
+      emailVerified: user.email_confirmed_at != null,
+      pictureUrl: user.user_metadata.avatar_url,
+    };
+
+    useAuthState.getState().setLoggedIn({
+      profile,
+      providerData: { type: "supabase", session },
+    });
+  }
+
+  async getAccessToken(): Promise<string> {
+    const { data, error } = await this.client.auth.getSession();
+
+    if (error || !data.session) {
+      throw new AuthorizationError("User is not authenticated");
+    }
+
+    return data.session.access_token;
+  }
+
+  async signRequest(request: Request): Promise<Request> {
+    const accessToken = await this.getAccessToken();
+    request.headers.set("Authorization", `Bearer ${accessToken}`);
+    return request;
+  }
+
+  signUp = async (
+    { navigate }: AuthActionContext,
+    { redirectTo }: AuthActionOptions,
+  ) => {
+    void navigate(
+      redirectTo
+        ? `/signup?redirectTo=${encodeURIComponent(redirectTo)}`
+        : `/signup`,
+    );
+  };
+
+  signIn = async (
+    { navigate }: AuthActionContext,
+    { redirectTo }: AuthActionOptions,
+  ) => {
+    void navigate(
+      redirectTo
+        ? `/signin?redirectTo=${encodeURIComponent(redirectTo)}`
+        : `/signin`,
+    );
+  };
+
+  requestEmailVerification = async (
+    { navigate }: AuthActionContext,
+    { redirectTo }: AuthActionOptions,
+  ) => {
+    const {
+      data: { user },
+    } = await this.client.auth.getUser();
+    if (!user || !user.email) {
+      throw new ZudokuError("User is not authenticated", {
+        title: "User not authenticated",
+      });
+    }
+
+    const { error } = await this.client.auth.resend({
+      type: "signup",
+      email: user.email,
+    });
+    if (error) {
+      throw Error(getSupabaseErrorMessage(error), { cause: error });
+    }
+
+    void navigate(
+      redirectTo
+        ? `/verify-email?redirectTo=${encodeURIComponent(redirectTo)}`
+        : `/verify-email`,
+    );
+  };
+
+  private onUsernamePasswordSignIn = async (
+    email: string,
+    password: string,
+  ) => {
+    useAuthState.setState({ isPending: true });
+    const { error } = await this.client.auth.signInWithPassword({
+      email,
+      password,
+    });
+    useAuthState.setState({ isPending: false });
+    if (error) {
+      throw Error(getSupabaseErrorMessage(error), { cause: error });
+    }
+  };
+
+  private onUsernamePasswordSignUp = async (
+    email: string,
+    password: string,
+  ) => {
+    useAuthState.setState({ isPending: true });
+    const { data, error } = await this.client.auth.signUp({
+      email,
+      password,
+      options: {
+        emailRedirectTo: joinUrl(
+          window.location.origin,
+          this.config.basePath,
+          "/verify-email",
+        ),
+      },
+    });
+    useAuthState.setState({ isPending: false });
+    if (error) {
+      throw new Error(getSupabaseErrorMessage(error), { cause: error });
+    }
+
+    // If user exists and is confirmed, update state
+    if (data.user && data.session) {
+      const profile: UserProfile = {
+        sub: data.user.id,
+        email: data.user.email,
+        name: data.user.user_metadata.full_name || data.user.user_metadata.name,
+        emailVerified: data.user.email_confirmed_at != null,
+        pictureUrl: data.user.user_metadata.avatar_url,
+      };
+
+      useAuthState.getState().setLoggedIn({
+        profile,
+        providerData: { type: "supabase", session: data.session },
+      });
+    }
+  };
+
+  private onOAuthSignIn = async (providerId: string) => {
+    useAuthState.setState({ isPending: true });
+    const { error } = await this.client.auth.signInWithOAuth({
+      provider: providerId as Provider,
+      options: {
+        redirectTo:
+          this.config.redirectToAfterSignIn ??
+          joinUrl(window.location.origin, this.config.basePath),
+      },
+    });
+    if (error) {
+      useAuthState.setState({ isPending: false });
+      throw new AuthorizationError(error.message);
+    }
+    // Note: OAuth sign-in redirects the page, so isPending stays true
+  };
+
+  private onPasswordReset = async (email: string) => {
+    const { error } = await this.client.auth.resetPasswordForEmail(email, {
+      redirectTo: joinUrl(
+        window.location.origin,
+        this.config.basePath,
+        "/update-password",
+      ),
+    });
+    if (error) {
+      throw Error(getSupabaseErrorMessage(error), { cause: error });
+    }
+  };
+
+  private onPasswordUpdate = async (password: string) => {
+    const { error } = await this.client.auth.updateUser({ password });
+    if (error) {
+      throw Error(getSupabaseErrorMessage(error), { cause: error });
+    }
+  };
+
+  private onResendVerification = async () => {
+    const {
+      data: { user },
+    } = await this.client.auth.getUser();
+    if (!user || !user.email) {
+      throw new ZudokuError("User is not authenticated", {
+        title: "User not authenticated",
+      });
+    }
+    const { error } = await this.client.auth.resend({
+      type: "signup",
+      email: user.email,
+    });
+    if (error) {
+      throw Error(getSupabaseErrorMessage(error), { cause: error });
+    }
+  };
+
+  private onCheckVerification = async (): Promise<boolean> => {
+    const { data, error } = await this.client.auth.getUser();
+    if (error || !data.user) {
+      return false;
+    }
+
+    const isVerified = data.user.email_confirmed_at != null;
+
+    if (isVerified) {
+      // Refresh the session to get updated token with verified email
+      await this.client.auth.refreshSession();
+      const { data: sessionData } = await this.client.auth.getSession();
+      if (sessionData.session) {
+        await this.updateUserState(sessionData.session);
+      }
+    }
+
+    return isVerified;
+  };
+
+  getRoutes = () => {
+    return [
+      {
+        path: "/verify-email",
+        element: (
+          <EmailVerificationUi
+            onResendVerification={this.onResendVerification}
+            onCheckVerification={this.onCheckVerification}
+          />
+        ),
+      },
+      {
+        path: "/reset-password",
+        element: (
+          <ZudokuPasswordResetUi onPasswordReset={this.onPasswordReset} />
+        ),
+      },
+      {
+        path: "/update-password",
+        element: (
+          <ZudokuPasswordUpdateUi onPasswordUpdate={this.onPasswordUpdate} />
+        ),
+      },
+      {
+        path: "/signin",
+        element: (
+          <ZudokuSignInUi
+            providers={this.providers}
+            enableUsernamePassword={this.enableUsernamePassword}
+            onOAuthSignIn={this.onOAuthSignIn}
+            onUsernamePasswordSignIn={this.onUsernamePasswordSignIn}
+          />
+        ),
+      },
+      {
+        path: "/signup",
+        element: (
+          <ZudokuSignUpUi
+            providers={this.providers}
+            enableUsernamePassword={this.enableUsernamePassword}
+            onOAuthSignUp={this.onOAuthSignIn}
+            onUsernamePasswordSignUp={this.onUsernamePasswordSignUp}
+          />
+        ),
+      },
+      {
+        path: "/signout",
+        element: <SignOut />,
+      },
+    ];
+  };
+
+  signOut = async () => {
+    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 () => {
+    const { data, error } = await this.client.auth.getSession();
+
+    if (!error && data.session) {
+      await this.updateUserState(data.session);
+    }
+  };
+}
+
+const supabaseAuth: AuthenticationProviderInitializer<
+  SupabaseAuthenticationConfig
+> = (options) => new SupabaseAuthenticationProvider(options);
+
+export default supabaseAuth;
+
+const getSupabaseErrorMessage = (error: unknown): string => {
+  if (!(error instanceof Error)) {
+    return "An unexpected error occurred. Please try again.";
+  }
+
+  const errorMessage = error.message;
+
+  // Map common Supabase error messages to user-friendly messages
+  if (errorMessage.includes("Invalid login credentials")) {
+    return "The email and password you entered don't match.";
+  }
+  if (errorMessage.includes("Email not confirmed")) {
+    return "Please verify your email address before signing in.";
+  }
+  if (errorMessage.includes("User already registered")) {
+    return "The email address is already used by another account.";
+  }
+  if (
+    errorMessage.includes("Password should be at least") ||
+    errorMessage.includes("Password must be at least")
+  ) {
+    return "The password must be at least 6 characters long.";
+  }
+  if (errorMessage.includes("Invalid email")) {
+    return "That email address isn't correct.";
+  }
+  if (errorMessage.includes("Email rate limit exceeded")) {
+    return "Too many requests. Please wait a moment and try again.";
+  }
+  if (errorMessage.includes("For security purposes")) {
+    return "For security purposes, please wait a moment before trying again.";
+  }
+  if (errorMessage.includes("Unable to validate email address")) {
+    return "Unable to validate email address. Please check and try again.";
+  }
+  if (errorMessage.includes("Signups not allowed")) {
+    return "Sign ups are not allowed at this time.";
+  }
+  if (errorMessage.includes("User not found")) {
+    return "That email address doesn't match an existing account.";
+  }
+  if (errorMessage.includes("New password should be different")) {
+    return "Your new password must be different from your current password.";
+  }
+
+  // Return the original message if no mapping found
+  return (
+    errorMessage || "An error occurred during authentication. Please try again."
+  );
+};

package/src/lib/authentication/providers/util.ts

@@ -0,0 +1,26 @@
+export const getClerkFrontendApi = (publishableKey: string) => {
+  // Split by underscore and get the base64 encoded part (3rd segment)
+  const parts = publishableKey.split("_");
+  if (parts.length !== 3 || !parts[2]) {
+    throw new Error("Invalid Clerk publishable key");
+  }
+
+  let decoded: string;
+  try {
+    decoded = atob(parts[2]);
+  } catch {
+    throw new Error("Failed to decode publishable key");
+  }
+
+  if (!decoded.endsWith("$")) {
+    throw new Error("Invalid Clerk publishable key");
+  }
+
+  const frontendApi = decoded.slice(0, -1);
+
+  if (frontendApi.includes("$") || !frontendApi.includes(".")) {
+    throw new Error("Invalid Clerk publishable key");
+  }
+
+  return frontendApi;
+};

package/src/lib/authentication/state.ts

@@ -0,0 +1,91 @@
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+import { syncZustandState } from "../util/syncZustandState.js";
+
+/**
+ * Registry interface for provider-specific data types.
+ * Providers augment this via declaration merging:
+ *
+ * ```ts
+ * declare module "../state.js" {
+ *   interface ProviderDataRegistry {
+ *     myProvider: MyProviderData;
+ *   }
+ * }
+ * ```
+ */
+// biome-ignore lint/suspicious/noEmptyInterface: Intended to be augmented via declaration merging by auth providers
+export interface ProviderDataRegistry {}
+
+export type ProviderData = [keyof ProviderDataRegistry] extends [never]
+  ? unknown
+  : ProviderDataRegistry[keyof ProviderDataRegistry];
+
+export interface AuthState {
+  isAuthenticated: boolean;
+  isPending: boolean;
+  profile: UserProfile | null;
+  providerData: ProviderData | null;
+  setAuthenticationPending: () => void;
+  setLoggedOut: () => void;
+  setLoggedIn: (args: {
+    profile: UserProfile;
+    providerData: ProviderData;
+  }) => void;
+}
+
+export const authState = create<AuthState>()(
+  persist(
+    (set) => ({
+      isAuthenticated: false,
+      isPending: true,
+      profile: null,
+      providerData: null,
+      setAuthenticationPending: () =>
+        set(() => ({
+          isAuthenticated: false,
+          isPending: false,
+          profile: null,
+          providerData: null,
+        })),
+      setLoggedOut: () =>
+        set(() => ({
+          isAuthenticated: false,
+          isPending: false,
+          profile: null,
+          providerData: null,
+        })),
+      setLoggedIn: ({ profile, providerData }) =>
+        set(() => ({
+          isAuthenticated: true,
+          isPending: false,
+          profile,
+          providerData,
+        })),
+    }),
+    {
+      merge: (persistedState, currentState) => {
+        return {
+          ...currentState,
+          isPending: false,
+          ...(typeof persistedState === "object" ? persistedState : {}),
+        };
+      },
+      name: "auth-state",
+      storage: createJSONStorage(() => localStorage),
+    },
+  ),
+);
+
+syncZustandState(authState);
+
+export const useAuthState = authState;
+
+export interface UserProfile {
+  sub: string;
+  email: string | undefined;
+  emailVerified: boolean;
+  name: string | undefined;
+  pictureUrl: string | undefined;
+  [key: string]: string | boolean | undefined;
+}

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

@@ -0,0 +1,7 @@
+import { Card } from "@lukoweb/apitogo/ui/Card.js";
+import createVariantComponent from "../../util/createVariantComponent.js";
+
+export const AuthCard = createVariantComponent(
+  Card,
+  "max-w-md w-full mt-10 mx-auto",
+);

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

@@ -0,0 +1,129 @@
+import { Spinner } from "@lukoweb/apitogo/components";
+import { ActionButton } from "@lukoweb/apitogo/ui/ActionButton.js";
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@lukoweb/apitogo/ui/Alert.js";
+import {
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@lukoweb/apitogo/ui/Card.js";
+import { Input } from "@lukoweb/apitogo/ui/Input.js";
+import { useMutation } from "@tanstack/react-query";
+import { useEffect, useRef, useState } from "react";
+import { useNavigate, useSearchParams } from "react-router";
+import { EMAIL_LINK_STORAGE_KEY } from "../constants.js";
+import { getRelativeRedirectUrl } from "../utils/relativeRedirectUrl.js";
+import { AuthCard } from "./AuthCard.js";
+
+export const EmailLinkCallbackUi = ({
+  onCompleteSignIn,
+  isEmailLinkUrl,
+}: {
+  onCompleteSignIn: (email: string) => Promise<void>;
+  isEmailLinkUrl: (url: string) => boolean;
+}) => {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const redirectTo = searchParams.get("redirectTo");
+  const relativeRedirectTo = getRelativeRedirectUrl(redirectTo);
+
+  const [emailInput, setEmailInput] = useState("");
+
+  const signInMutation = useMutation({
+    mutationFn: (email: string) => onCompleteSignIn(email),
+    onSuccess: () => {
+      localStorage.removeItem(EMAIL_LINK_STORAGE_KEY);
+      void navigate(relativeRedirectTo, { replace: true });
+    },
+  });
+
+  const [storedEmail] = useState(() =>
+    localStorage.getItem(EMAIL_LINK_STORAGE_KEY),
+  );
+
+  const isValidLink = isEmailLinkUrl(window.location.href);
+
+  const hasTriggered = useRef(false);
+  useEffect(() => {
+    if (isValidLink && storedEmail && !hasTriggered.current) {
+      hasTriggered.current = true;
+      signInMutation.mutate(storedEmail);
+    }
+  }, [isValidLink, storedEmail, signInMutation.mutate]);
+
+  if (!isValidLink) {
+    return (
+      <AuthCard>
+        <CardHeader className="text-center">
+          <CardTitle>Invalid sign-in link</CardTitle>
+          <CardDescription>
+            This sign-in link is invalid or has expired. Please request a new
+            one.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="flex justify-center">
+          <a href="/signin/email-link" className="text-sm text-primary">
+            Request a new sign-in link
+          </a>
+        </CardContent>
+      </AuthCard>
+    );
+  }
+
+  if (signInMutation.isPending || (storedEmail && signInMutation.isIdle)) {
+    return (
+      <AuthCard>
+        <CardHeader className="text-center">
+          <CardTitle>Signing you in...</CardTitle>
+          <CardDescription>
+            Please wait while we complete your sign-in.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="flex items-center justify-center">
+          <Spinner />
+        </CardContent>
+      </AuthCard>
+    );
+  }
+
+  return (
+    <AuthCard>
+      <CardHeader>
+        <CardTitle>Confirm your email</CardTitle>
+        <CardDescription>
+          Please enter the email address you used to request the sign-in link.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        {signInMutation.error && (
+          <Alert variant="destructive">
+            <AlertTitle>Error</AlertTitle>
+            <AlertDescription>{signInMutation.error.message}</AlertDescription>
+          </Alert>
+        )}
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            signInMutation.mutate(emailInput);
+          }}
+          className="flex flex-col gap-2"
+        >
+          <Input
+            placeholder="you@example.com"
+            type="email"
+            value={emailInput}
+            onChange={(e) => setEmailInput(e.target.value)}
+            required
+          />
+          <ActionButton type="submit" isPending={signInMutation.isPending}>
+            Complete sign-in
+          </ActionButton>
+        </form>
+      </CardContent>
+    </AuthCard>
+  );
+};