zudoku 0.0.0-fdf886de → 0.0.0-fe92c9e1

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

@@ -0,0 +1,284 @@
+import { type FirebaseApp, initializeApp } from "firebase/app";
+import {
+  type Auth,
+  createUserWithEmailAndPassword,
+  getAuth,
+  signInWithEmailAndPassword,
+  signInWithPopup,
+  signOut,
+  type User,
+} from "firebase/auth";
+import type { FirebaseAuthenticationConfig } 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 { useAuthState } from "../state.js";
+import { ZudokuSignInUi, ZudokuSignUpUi } from "../ui/ZudokuAuthUi.js";
+
+class FirebaseAuthenticationProvider
+  extends CoreAuthenticationPlugin
+  implements AuthenticationPlugin
+{
+  private readonly app: FirebaseApp;
+  private readonly auth: Auth;
+  private readonly providers: string[];
+
+  constructor(config: FirebaseAuthenticationConfig) {
+    super();
+
+    this.app = initializeApp({
+      apiKey: config.apiKey,
+      authDomain: config.authDomain,
+      projectId: config.projectId,
+      storageBucket: config.storageBucket,
+      messagingSenderId: config.messagingSenderId,
+      appId: config.appId,
+      measurementId: config.measurementId,
+    });
+    this.auth = getAuth(this.app);
+    this.providers = config.providers ?? [];
+  }
+
+  async signRequest(request: Request): Promise<Request> {
+    const accessToken = await this.auth.currentUser?.getIdToken();
+    if (!accessToken) {
+      throw new AuthorizationError("User is not authenticated");
+    }
+    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`,
+    );
+  };
+
+  getRoutes = () => {
+    return [
+      {
+        path: "/signin",
+        element: (
+          <ZudokuSignInUi
+            providers={this.providers}
+            onOAuthSignIn={async (providerId: string) => {
+              useAuthState.setState({ isPending: true });
+              const provider = await getProviderForId(providerId);
+              if (!provider) {
+                throw new AuthorizationError(
+                  `Provider ${providerId} not found`,
+                );
+              }
+              const result = await signInWithPopup(this.auth, provider);
+              useAuthState.setState({ isPending: false });
+              useAuthState.getState().setLoggedIn({
+                providerData: { user: result.user },
+                profile: {
+                  sub: result.user.uid,
+                  email: result.user.email ?? undefined,
+                  name: result.user.displayName ?? undefined,
+                  emailVerified: result.user.emailVerified,
+                  pictureUrl: result.user.photoURL ?? undefined,
+                },
+              });
+            }}
+            onUsernamePasswordSignIn={async (
+              email: string,
+              password: string,
+            ) => {
+              try {
+                await signInWithEmailAndPassword(this.auth, email, password);
+              } catch (error) {
+                throw Error(getFirebaseErrorMessage(error), { cause: error });
+              }
+            }}
+          />
+        ),
+      },
+      {
+        path: "/signup",
+        element: (
+          <ZudokuSignUpUi
+            providers={this.providers}
+            onOAuthSignUp={async (providerId: string) => {
+              const provider = await getProviderForId(providerId);
+              if (!provider) {
+                throw new AuthorizationError(
+                  `Provider ${providerId} not found`,
+                );
+              }
+              await signInWithPopup(this.auth, provider);
+            }}
+            onUsernamePasswordSignUp={async (
+              email: string,
+              password: string,
+            ) => {
+              await createUserWithEmailAndPassword(this.auth, email, password);
+            }}
+          />
+        ),
+      },
+      {
+        path: "/signout",
+        element: <SignOut />,
+      },
+    ];
+  };
+
+  signOut = async () => {
+    await signOut(this.auth);
+
+    useAuthState.setState({
+      isAuthenticated: false,
+      isPending: false,
+      profile: undefined,
+      providerData: undefined,
+    });
+  };
+
+  onPageLoad = async () => {
+    const user = this.auth.currentUser;
+
+    if (user) {
+      await this.updateUserState(user);
+    } else {
+      useAuthState.setState({ isPending: false });
+    }
+  };
+
+  private async updateUserState(user: User) {
+    useAuthState.getState().setLoggedIn({
+      profile: {
+        sub: user.uid,
+        email: user.email ?? undefined,
+        name: user.displayName ?? undefined,
+        emailVerified: user.emailVerified,
+        pictureUrl: user.photoURL ?? undefined,
+      },
+      providerData: { user },
+    });
+  }
+}
+
+const supabaseAuth: AuthenticationProviderInitializer<
+  FirebaseAuthenticationConfig
+> = (options) => new FirebaseAuthenticationProvider(options);
+
+export default supabaseAuth;
+
+const getProviderForId = async (providerId: string) => {
+  switch (providerId) {
+    case "google": {
+      const { GoogleAuthProvider } = await import("firebase/auth");
+      return new GoogleAuthProvider();
+    }
+    case "github": {
+      const { GithubAuthProvider } = await import("firebase/auth");
+      return new GithubAuthProvider();
+    }
+    case "facebook": {
+      const { FacebookAuthProvider } = await import("firebase/auth");
+      return new FacebookAuthProvider();
+    }
+    case "twitter": {
+      const { TwitterAuthProvider } = await import("firebase/auth");
+      return new TwitterAuthProvider();
+    }
+    case "microsoft": {
+      const { OAuthProvider } = await import("firebase/auth");
+      return new OAuthProvider("microsoft.com");
+    }
+    case "apple": {
+      const { OAuthProvider } = await import("firebase/auth");
+      return new OAuthProvider("apple.com");
+    }
+    case "yahoo": {
+      const { OAuthProvider } = await import("firebase/auth");
+      return new OAuthProvider("yahoo.com");
+    }
+  }
+
+  throw new AuthorizationError(`Provider ${providerId} not found`);
+};
+
+const getFirebaseErrorMessage = (error: unknown): string => {
+  if (!(error instanceof Error)) {
+    return "An unexpected error occurred. Please try again.";
+  }
+
+  const errorCode = (error as { code?: string }).code;
+
+  switch (errorCode) {
+    case "auth/email-already-in-use":
+      return "The email address is already used by another account.";
+    case "auth/invalid-email":
+      return "That email address isn't correct.";
+    case "auth/operation-not-allowed":
+      return "This sign-in method is not enabled. Please contact support.";
+    case "auth/weak-password":
+      return "The password must be at least 6 characters long.";
+    case "auth/user-disabled":
+      return "This account has been disabled. Please contact support.";
+    case "auth/user-not-found":
+      return "That email address doesn't match an existing account.";
+    case "auth/wrong-password":
+      return "The email and password you entered don't match.";
+    case "auth/too-many-requests":
+      return "You have entered an incorrect password too many times. Please try again in a few minutes.";
+    case "auth/popup-blocked":
+      return "The sign-in popup was blocked by your browser. Please allow popups and try again.";
+    case "auth/popup-closed-by-user":
+      return "The sign-in popup was closed before completing. Please try again.";
+    case "auth/network-request-failed":
+      return "A network error has occurred. Please check your connection and try again.";
+    case "auth/requires-recent-login":
+      return "Please login again to perform this operation.";
+    case "auth/invalid-credential":
+      return "The credential is invalid or has expired. Please try again.";
+    case "auth/account-exists-with-different-credential":
+      return "An account already exists with the same email address but different sign-in credentials.";
+    case "auth/credential-already-in-use":
+      return "This credential is already associated with a different user account.";
+    case "auth/invalid-verification-code":
+      return "Wrong code. Try again.";
+    case "auth/invalid-verification-id":
+      return "The verification ID is invalid.";
+    case "auth/missing-verification-code":
+      return "Please enter the verification code.";
+    case "auth/user-cancelled":
+      return "Please authorize the required permissions to sign in.";
+    case "auth/expired-action-code":
+      return "This code has expired.";
+    case "auth/invalid-action-code":
+      return "The action code is invalid. This can happen if the code is malformed or has already been used.";
+    case "auth/unauthorized-domain":
+      return "This domain is not authorized for OAuth operations.";
+    default:
+      return (
+        error.message ||
+        "An error occurred during authentication. Please try again."
+      );
+  }
+};

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

@@ -1,18 +1,21 @@
 import logger from "loglevel";
 import * as oauth from "oauth4webapi";
 import { ErrorBoundary } from "react-error-boundary";
-import { type OpenIDAuthenticationConfig } from "../../../config/config.js";
+import type { NavigateFunction } from "react-router";
+import type { OpenIDAuthenticationConfig } from "../../../config/config.js";
 import { ClientOnly } from "../../components/ClientOnly.js";
 import { joinUrl } from "../../util/joinUrl.js";
-import {
-  type AuthenticationPlugin,
-  type AuthenticationProviderInitializer,
-} from "../authentication.js";
 import { CoreAuthenticationPlugin } from "../AuthenticationPlugin.js";
+import type {
+  AuthActionContext,
+  AuthActionOptions,
+  AuthenticationPlugin,
+  AuthenticationProviderInitializer,
+} from "../authentication.js";
 import { CallbackHandler } from "../components/CallbackHandler.js";
 import { OAuthErrorPage } from "../components/OAuthErrorPage.js";
 import { AuthorizationError, OAuthAuthorizationError } from "../errors.js";
-import { useAuthState, type UserProfile } from "../state.js";
+import { type UserProfile, useAuthState } from "../state.js";
 
 const CODE_VERIFIER_KEY = "code-verifier";
 const STATE_KEY = "oauth-state";
@@ -115,13 +118,16 @@ export class OpenIDAuthenticationProvider
     });
   }
 
-  async signUp({
-    redirectTo,
-    replace = false,
-  }: {
-    redirectTo?: string;
-    replace?: boolean;
-  } = {}) {
+  async signUp(
+    _: { navigate: NavigateFunction },
+    {
+      redirectTo,
+      replace = false,
+    }: {
+      redirectTo?: string;
+      replace?: boolean;
+    } = {},
+  ) {
     return this.authorize({
       redirectTo: this.redirectToAfterSignUp ?? redirectTo ?? "/",
       replace,
@@ -129,13 +135,10 @@ export class OpenIDAuthenticationProvider
     });
   }
 
-  async signIn({
-    redirectTo,
-    replace = false,
-  }: {
-    redirectTo?: string;
-    replace?: boolean;
-  } = {}) {
+  async signIn(
+    _: AuthActionContext,
+    { redirectTo, replace = false }: AuthActionOptions,
+  ) {
     return this.authorize({
       redirectTo: this.redirectToAfterSignIn ?? redirectTo ?? "/",
       replace,
@@ -178,6 +181,7 @@ export class OpenIDAuthenticationProvider
     const redirectUrl = new URL(window.location.origin);
     redirectUrl.pathname = this.callbackUrlPath;
     redirectUrl.search = "";
+    redirectUrl.hash = "";
 
     authorizationUrl.searchParams.set("client_id", this.client.client_id);
     authorizationUrl.searchParams.set("redirect_uri", redirectUrl.toString());
@@ -260,7 +264,7 @@ export class OpenIDAuthenticationProvider
     return request;
   };
 
-  signOut = async () => {
+  signOut = async (_: AuthActionContext) => {
     useAuthState.setState({
       isAuthenticated: false,
       isPending: false,
@@ -384,6 +388,7 @@ export class OpenIDAuthenticationProvider
     const redirectUrl = new URL(url);
     redirectUrl.pathname = this.callbackUrlPath;
     redirectUrl.search = "";
+    redirectUrl.hash = "";
 
     const response = await oauth.authorizationCodeGrantRequest(
       authServer,

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

@@ -0,0 +1,75 @@
+import { Auth } from "@supabase/auth-ui-react";
+import {
+  ThemeSupa,
+  type ThemeVariables,
+  type ViewType,
+} from "@supabase/auth-ui-shared";
+import type { SupabaseClient } from "@supabase/supabase-js";
+import { useSearchParams } from "react-router";
+import type { SupabaseAuthenticationConfig } from "../../../../config/config.js";
+import { Heading } from "../../../components/Heading.js";
+
+export const SupabaseAuthUI = ({
+  client,
+  config,
+  view = "sign_in",
+}: {
+  client: SupabaseClient;
+  config: SupabaseAuthenticationConfig;
+  view: ViewType;
+}) => {
+  const [searchParams] = useSearchParams();
+  const redirectTo = searchParams.get("redirectTo");
+  const providers = config.provider ? [config.provider] : config.providers;
+  const root = config.basePath ?? "/";
+  const redirectToAfterSignUp =
+    redirectTo ?? config.redirectToAfterSignUp ?? root;
+  const redirectToAfterSignIn =
+    redirectTo ?? config.redirectToAfterSignIn ?? root;
+  const redirectToAfterSignOut =
+    redirectTo ?? config.redirectToAfterSignOut ?? root;
+
+  return (
+    <div className="flex items-center justify-center">
+      <div className="max-w-md w-full mt-10">
+        <Heading level={1}>
+          {view === "sign_in" ? "Sign in" : "Sign up"}
+        </Heading>
+        <Auth
+          view={view}
+          redirectToAfterSignIn={redirectToAfterSignIn}
+          redirectToAfterSignUp={redirectToAfterSignUp}
+          redirectToAfterSignOut={redirectToAfterSignOut}
+          supabaseClient={client}
+          onlyThirdPartyProviders={config.onlyThirdPartyProviders}
+          appearance={{
+            theme: ThemeSupa,
+            variables: {
+              default: {
+                colors: {
+                  dividerBackground: "var(--border)",
+                  brand: "var(--primary)",
+                  brandAccent: "hsla(from var(--primary) h s l / 0.8)",
+                  brandButtonText: "var(--primary-foreground)",
+                  defaultButtonBorder: "var(--border)",
+                  inputBorder: "var(--border)",
+                  inputText: "var(--foreground)",
+                  inputBorderHover: "var(--accent)",
+                  defaultButtonBackground: "var(--secondary)",
+                  defaultButtonBackgroundHover: "var(--accent)",
+                },
+                radii: {
+                  borderRadiusButton: "var(--radius)",
+                  buttonBorderRadius: "var(--radius)",
+                  inputBorderRadius: "var(--radius)",
+                },
+              } satisfies ThemeVariables,
+            },
+          }}
+          providers={providers}
+          redirectTo={config.redirectToAfterSignIn ?? "/"}
+        />
+      </div>
+    </div>
+  );
+};

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

@@ -1,51 +1,39 @@
 import {
   createClient,
-  type Provider,
   type Session,
   type SupabaseClient,
 } from "@supabase/supabase-js";
-import { type SupabaseAuthenticationConfig } from "../../../config/config.js";
-import {
-  type AuthenticationPlugin,
-  type AuthenticationProviderInitializer,
-} from "../authentication.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 { useAuthState, type UserProfile } from "../state.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;
-  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")) {
@@ -89,31 +77,55 @@ 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 () => {

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;