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

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

@@ -1,5 +1,7 @@
 import type { Auth0AuthenticationConfig } from "../../../config/config.js";
+import { joinUrl } from "../../util/joinUrl.js";
 import type {
+  AuthActionContext,
   AuthenticationPlugin,
   AuthenticationProviderInitializer,
 } from "../authentication.js";
@@ -27,17 +29,25 @@ class Auth0AuthenticationProvider
     url: URL,
     { isSignUp }: { isSignUp: boolean },
   ) => {
-    if (this.options?.alwaysPromptLogin !== false) {
+    if (this.options?.prompt !== undefined) {
+      if (this.options.prompt !== "") {
+        url.searchParams.set("prompt", this.options.prompt);
+      }
+    } else if (this.options?.alwaysPromptLogin !== false) {
       url.searchParams.set("prompt", "login");
     }
+
     if (isSignUp) {
       url.searchParams.set("screen_hint", "signup");
     }
   };
 
-  signOut = async (): Promise<void> => {
+  signOut = async (_: AuthActionContext): Promise<void> => {
     const as = await this.getAuthServer();
-    const idToken = await this.getAccessToken();
+
+    // biome-ignore lint/suspicious/noExplicitAny: We don't have a good way for typing provider-data yet.
+    const providerData = useAuthState.getState().providerData as any;
+    const idToken = providerData?.idToken;
 
     useAuthState.setState({
       isAuthenticated: false,
@@ -47,15 +57,18 @@ class Auth0AuthenticationProvider
     });
 
     const redirectUrl = new URL(window.location.origin);
-    redirectUrl.pathname = this.redirectToAfterSignOut;
+    redirectUrl.pathname = joinUrl(
+      import.meta.env.BASE_URL,
+      this.redirectToAfterSignOut,
+    );
 
     // SEE: https://auth0.com/docs/authenticate/login/logout/log-users-out-of-auth0
     // For Auth0 tenants created on or after 14 November 2023, RP-Initiated
     // Logout End Session Endpoint Discovery is enabled by default.
     // Otherwise we fallback to the old non-compliant logout
 
-    // The endSessionEndpoint is set, the IdP supports some form of logout,
-    // so we use the IdP logout. Otherwise, just redirect the user to home
+    // The end_session_endpoint is set, the IdP supports some form of logout,
+    // so we use auth0 logout. Otherwise, just redirect the user to home
     if (as.end_session_endpoint) {
       const logoutUrl = new URL(as.end_session_endpoint);
       if (idToken) {
@@ -66,12 +79,11 @@ class Auth0AuthenticationProvider
         redirectUrl.toString(),
       );
 
-      // window.location.href = logoutUrl.toString();
+      window.location.href = logoutUrl.toString();
     } else {
-      const _logoutUrl = new URL(
-        `${this.issuer.replace(/\/$/, "")}/oidc/logout`,
-      );
-      // window.location.href = logoutUrl.toString();
+      // const logoutUrl = new URL(`${this.issuer.replace(/\/$/, "")}/v2/logout`);
+      // logoutUrl.searchParams.set("returnTo", redirectUrl.toString());
+      // don't support the deprecated logout today
     }
   };
 }

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

@@ -6,6 +6,7 @@ import { ClientOnly } from "../../components/ClientOnly.js";
 import { joinUrl } from "../../util/joinUrl.js";
 import { CoreAuthenticationPlugin } from "../AuthenticationPlugin.js";
 import type {
+  AuthActionContext,
   AuthenticationPlugin,
   AuthenticationProviderInitializer,
 } from "../authentication.js";
@@ -106,7 +107,10 @@ export class AzureB2CAuthPlugin
     });
   }
 
-  async signUp({ redirectTo }: { redirectTo?: string } = {}) {
+  async signUp(
+    _: AuthActionContext,
+    { redirectTo }: { redirectTo?: string } = {},
+  ) {
     const redirectUri = this.redirectToAfterSignUp ?? redirectTo ?? "/";
     sessionStorage.setItem("redirect-to", redirectUri);
 
@@ -116,7 +120,10 @@ export class AzureB2CAuthPlugin
     });
   }
 
-  async signIn({ redirectTo }: { redirectTo?: string } = {}) {
+  async signIn(
+    _: AuthActionContext,
+    { redirectTo }: { redirectTo?: string } = {},
+  ) {
     const redirectUri = this.redirectToAfterSignIn ?? redirectTo ?? "/";
     sessionStorage.setItem("redirect-to", redirectUri);
 
@@ -156,7 +163,7 @@ export class AzureB2CAuthPlugin
     return request;
   };
 
-  signOut = async () => {
+  signOut = async (_: AuthActionContext) => {
     const account = this.msalInstance.getAllAccounts()[0];
     if (account) {
       await this.msalInstance.logoutRedirect({

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

@@ -3,6 +3,7 @@ import { LogOutIcon } from "lucide-react";
 import type { ZudokuPlugin } from "zudoku/plugins";
 import type { ClerkAuthenticationConfig } from "../../../config/config.js";
 import type {
+  AuthActionContext,
   AuthenticationPlugin,
   AuthenticationProviderInitializer,
 } from "../authentication.js";
@@ -28,32 +29,6 @@ const clerkAuth: AuthenticationProviderInitializer<
 
     await clerkApi.load();
 
-    if (clerkApi.user) {
-      const verifiedEmail = clerkApi.user.emailAddresses.find(
-        (email) => email.verification.status === "verified",
-      );
-      useAuthState.getState().setLoggedIn({
-        profile: {
-          sub: clerkApi.user.id,
-          name: clerkApi.user.fullName ?? undefined,
-          email:
-            verifiedEmail?.emailAddress ??
-            clerkApi.user.emailAddresses[0]?.emailAddress,
-          emailVerified: verifiedEmail !== undefined,
-          pictureUrl: clerkApi.user.imageUrl,
-        },
-        providerData: {
-          user: {
-            publicMetadata: clerkApi.user.publicMetadata,
-            id: clerkApi.user.id,
-            emailAddresses: clerkApi.user.emailAddresses,
-            imageUrl: clerkApi.user.imageUrl,
-            fullName: clerkApi.user.fullName,
-          },
-        },
-      });
-    }
-
     return clerkApi;
   })();
 
@@ -147,7 +122,10 @@ const clerkAuth: AuthenticationProviderInitializer<
       });
       useAuthState.getState().setLoggedOut();
     },
-    signIn: async ({ redirectTo }: { redirectTo?: string } = {}) => {
+    signIn: async (
+      _: AuthActionContext,
+      { redirectTo }: { redirectTo?: string } = {},
+    ) => {
       await ensureLoaded;
       await clerkApi?.redirectToSignIn({
         signInForceRedirectUrl: redirectToAfterSignIn
@@ -158,7 +136,10 @@ const clerkAuth: AuthenticationProviderInitializer<
           : redirectTo,
       });
     },
-    signUp: async ({ redirectTo }: { redirectTo?: string } = {}) => {
+    signUp: async (
+      _: AuthActionContext,
+      { redirectTo }: { redirectTo?: string } = {},
+    ) => {
       await ensureLoaded;
       await clerkApi?.redirectToSignUp({
         signInForceRedirectUrl: redirectToAfterSignIn

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

@@ -0,0 +1,376 @@
+import { type FirebaseApp, initializeApp } from "firebase/app";
+import {
+  type Auth,
+  createUserWithEmailAndPassword,
+  getAuth,
+  sendEmailVerification,
+  sendPasswordResetEmail,
+  signInWithEmailAndPassword,
+  signInWithPopup,
+  signOut,
+  type User,
+} from "firebase/auth";
+import type { FirebaseAuthenticationConfig } from "../../../config/config.js";
+import { ZudokuError } from "../../util/invariant.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 { EmailVerificationUi } from "../ui/EmailVerificationUi.js";
+import {
+  ZudokuPasswordResetUi,
+  ZudokuSignInUi,
+  ZudokuSignUpUi,
+} from "../ui/ZudokuAuthUi.js";
+
+class FirebaseAuthenticationProvider
+  extends CoreAuthenticationPlugin
+  implements AuthenticationPlugin
+{
+  private readonly app: FirebaseApp;
+  private readonly auth: Auth;
+  private readonly providers: string[];
+  private readonly enableUsernamePassword: boolean;
+
+  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?.filter((p) => p !== "password") ?? [];
+    this.enableUsernamePassword =
+      config.providers?.includes("password") ?? false;
+  }
+
+  async initialize() {
+    await this.auth.authStateReady();
+  }
+
+  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`,
+    );
+  };
+
+  requestEmailVerification = async (
+    { navigate }: AuthActionContext,
+    { redirectTo }: AuthActionOptions,
+  ) => {
+    if (!this.auth.currentUser) {
+      throw new ZudokuError("User is not authenticated", {
+        title: "User not authenticated",
+      });
+    }
+
+    await sendEmailVerification(this.auth.currentUser);
+    void navigate(
+      redirectTo
+        ? `/verify-email?redirectTo=${encodeURIComponent(redirectTo)}`
+        : `/verify-email`,
+    );
+  };
+
+  getRoutes = () => {
+    return [
+      {
+        path: "/verify-email",
+        element: (
+          <EmailVerificationUi
+            onResendVerification={async () => {
+              if (!this.auth.currentUser) {
+                throw new ZudokuError("User is not authenticated", {
+                  title: "User not authenticated",
+                });
+              }
+              await sendEmailVerification(this.auth.currentUser);
+            }}
+            onCheckVerification={async () => {
+              if (!this.auth.currentUser) {
+                throw new ZudokuError("User is not authenticated", {
+                  title: "User not authenticated",
+                });
+              }
+              await this.auth.currentUser.reload();
+              const isVerified = this.auth.currentUser.emailVerified;
+
+              if (isVerified) {
+                await this.auth.currentUser.getIdToken(true);
+                await this.setUserLoggedIn(this.auth.currentUser);
+              }
+
+              return isVerified;
+            }}
+          />
+        ),
+      },
+      {
+        path: "/reset-password",
+        element: (
+          <ZudokuPasswordResetUi
+            onPasswordReset={async (email: string) => {
+              try {
+                await sendPasswordResetEmail(this.auth, email);
+              } catch (error) {
+                throw Error(getFirebaseErrorMessage(error), { cause: error });
+              }
+            }}
+          />
+        ),
+      },
+      {
+        path: "/signin",
+        element: (
+          <ZudokuSignInUi
+            providers={this.providers}
+            enableUsernamePassword={this.enableUsernamePassword}
+            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 {
+                useAuthState.setState({ isPending: false });
+                const result = await signInWithEmailAndPassword(
+                  this.auth,
+                  email,
+                  password,
+                );
+                await this.setUserLoggedIn(result.user);
+              } catch (error) {
+                throw Error(getFirebaseErrorMessage(error), { cause: error });
+              }
+            }}
+          />
+        ),
+      },
+      {
+        path: "/signup",
+        element: (
+          <ZudokuSignUpUi
+            providers={this.providers}
+            enableUsernamePassword={this.enableUsernamePassword}
+            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,
+            ) => {
+              useAuthState.setState({ isPending: true });
+              const createUser = await createUserWithEmailAndPassword(
+                this.auth,
+                email,
+                password,
+              );
+              await this.setUserLoggedIn(createUser.user);
+            }}
+          />
+        ),
+      },
+      {
+        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.setUserLoggedIn(user);
+    } else {
+      useAuthState.setState({ isPending: false });
+    }
+  };
+
+  private async setUserLoggedIn(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,11 +1,14 @@
 import logger from "loglevel";
 import * as oauth from "oauth4webapi";
 import { ErrorBoundary } from "react-error-boundary";
+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 { CoreAuthenticationPlugin } from "../AuthenticationPlugin.js";
 import type {
+  AuthActionContext,
+  AuthActionOptions,
   AuthenticationPlugin,
   AuthenticationProviderInitializer,
 } from "../authentication.js";
@@ -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,
@@ -261,7 +264,7 @@ export class OpenIDAuthenticationProvider
     return request;
   };
 
-  signOut = async () => {
+  signOut = async (_: AuthActionContext) => {
     useAuthState.setState({
       isAuthenticated: false,
       isPending: false,

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>
+  );
+};