zudoku 0.0.0-feda542 → 0.0.0-ff27e7ea

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

@@ -0,0 +1,208 @@
+import type { AuthenticationResult, EventMessage } from "@azure/msal-browser";
+import { EventType, PublicClientApplication } from "@azure/msal-browser";
+import { ErrorBoundary } from "react-error-boundary";
+import type { AzureB2CAuthenticationConfig } from "../../../config/config.js";
+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";
+import { CallbackHandler } from "../components/CallbackHandler.js";
+import { OAuthErrorPage } from "../components/OAuthErrorPage.js";
+import { AuthorizationError } from "../errors.js";
+import { useAuthState } from "../state.js";
+
+const AZUREB2C_CALLBACK_PATH = "/oauth/callback";
+
+export class AzureB2CAuthPlugin
+  extends CoreAuthenticationPlugin
+  implements AuthenticationPlugin
+{
+  private msalInstance: PublicClientApplication;
+  private readonly scopes: string[];
+  private readonly redirectToAfterSignUp?: string;
+  private readonly redirectToAfterSignIn?: string;
+  private readonly redirectToAfterSignOut: string;
+
+  constructor({
+    clientId,
+    tenantName,
+    policyName,
+    scopes,
+    redirectToAfterSignUp,
+    redirectToAfterSignIn,
+    redirectToAfterSignOut = "/",
+    basePath = "",
+  }: AzureB2CAuthenticationConfig) {
+    super();
+    this.scopes = scopes ?? ["openid", "profile", "email"];
+    this.redirectToAfterSignUp = redirectToAfterSignUp;
+    this.redirectToAfterSignIn = redirectToAfterSignIn;
+    this.redirectToAfterSignOut = redirectToAfterSignOut;
+
+    const authority = `https://${tenantName}.b2clogin.com/${tenantName}.onmicrosoft.com/${policyName}`;
+    const redirectUri = joinUrl(basePath, AZUREB2C_CALLBACK_PATH);
+
+    this.msalInstance = new PublicClientApplication({
+      auth: {
+        clientId,
+        authority,
+        redirectUri,
+        knownAuthorities: [`${tenantName}.b2clogin.com`],
+      },
+      cache: {
+        cacheLocation: "sessionStorage",
+        storeAuthStateInCookie: false,
+      },
+    });
+
+    void this.msalInstance.initialize().then(async () => {
+      void this.msalInstance
+        .handleRedirectPromise()
+        .then((response: AuthenticationResult | null) => {
+          if (response) {
+            this.handleAuthResponse(response);
+          }
+        });
+
+      // Add event callback
+      void this.msalInstance.addEventCallback((event: EventMessage) => {
+        if (event.eventType === EventType.LOGIN_SUCCESS) {
+          this.handleAuthResponse(event.payload as AuthenticationResult);
+        }
+      });
+    });
+  }
+
+  private handleAuthResponse(response: AuthenticationResult) {
+    const { accessToken, idToken, scopes, account } = response;
+
+    if (!account) {
+      throw new AuthorizationError("No account information in response");
+    }
+
+    // Get the user's name from Azure B2C claims
+    const name =
+      [account.idTokenClaims?.given_name, account.idTokenClaims?.family_name]
+        .filter(Boolean)
+        .join(" ") || account.username;
+
+    useAuthState.getState().setLoggedIn({
+      providerData: {
+        accessToken,
+        idToken,
+        scopes,
+        account,
+      },
+      profile: {
+        sub: account.localAccountId,
+        email: account.username,
+        name,
+        emailVerified: true, // Azure B2C emails are verified
+        pictureUrl: undefined, // Azure B2C doesn't provide profile pictures by default
+      },
+    });
+  }
+
+  async signUp(
+    _: AuthActionContext,
+    { redirectTo }: { redirectTo?: string } = {},
+  ) {
+    const redirectUri = this.redirectToAfterSignUp ?? redirectTo ?? "/";
+    sessionStorage.setItem("redirect-to", redirectUri);
+
+    await this.msalInstance.loginRedirect({
+      scopes: this.scopes,
+      prompt: "select_account",
+    });
+  }
+
+  async signIn(
+    _: AuthActionContext,
+    { redirectTo }: { redirectTo?: string } = {},
+  ) {
+    const redirectUri = this.redirectToAfterSignIn ?? redirectTo ?? "/";
+    sessionStorage.setItem("redirect-to", redirectUri);
+
+    await this.msalInstance.loginRedirect({
+      scopes: this.scopes,
+    });
+  }
+
+  async getAccessToken(): Promise<string> {
+    const account = this.msalInstance.getAllAccounts()[0];
+    if (!account) {
+      throw new AuthorizationError("No active account");
+    }
+
+    try {
+      const response = await this.msalInstance.acquireTokenSilent({
+        scopes: this.scopes,
+        account,
+      });
+      return response.accessToken;
+    } catch {
+      // If silent token acquisition fails, try interactive
+      await this.msalInstance.acquireTokenRedirect({
+        scopes: this.scopes,
+        account,
+      });
+
+      throw new AuthorizationError(
+        "Token acquisition failed after interactive attempt",
+      );
+    }
+  }
+
+  signRequest = async (request: Request): Promise<Request> => {
+    const accessToken = await this.getAccessToken();
+    request.headers.set("Authorization", `Bearer ${accessToken}`);
+    return request;
+  };
+
+  signOut = async (_: AuthActionContext) => {
+    const account = this.msalInstance.getAllAccounts()[0];
+    if (account) {
+      await this.msalInstance.logoutRedirect({
+        account,
+        postLogoutRedirectUri:
+          window.location.origin + this.redirectToAfterSignOut,
+      });
+    }
+
+    useAuthState.getState().setLoggedOut();
+  };
+
+  handleCallback = async () => {
+    const redirectTo = sessionStorage.getItem("redirect-to") ?? "/";
+    sessionStorage.removeItem("redirect-to");
+    return redirectTo;
+  };
+
+  getRoutes() {
+    return [
+      ...super.getRoutes(),
+      {
+        path: AZUREB2C_CALLBACK_PATH,
+        element: (
+          <ClientOnly>
+            <ErrorBoundary
+              fallbackRender={({ error }) => <OAuthErrorPage error={error} />}
+            >
+              <CallbackHandler handleCallback={this.handleCallback} />
+            </ErrorBoundary>
+          </ClientOnly>
+        ),
+      },
+    ];
+  }
+}
+
+const azureB2CAuth: AuthenticationProviderInitializer<
+  AzureB2CAuthenticationConfig
+> = (options) => new AzureB2CAuthPlugin(options);
+
+export default azureB2CAuth;

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

@@ -1,58 +1,26 @@
 import type { Clerk } from "@clerk/clerk-js";
-import { type ClerkAuthenticationConfig } from "../../../config/config.js";
-import { type AuthenticationProviderInitializer } from "../authentication.js";
-import { AuthenticationPlugin } from "../AuthenticationPlugin.js";
+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";
+import { SignIn } from "../components/SignIn.js";
+import { SignOut } from "../components/SignOut.js";
+import { SignUp } from "../components/SignUp.js";
 import { useAuthState } from "../state.js";
 
-class ClerkAuthPlugin extends AuthenticationPlugin {
-  constructor(private clerk: Promise<Clerk | undefined>) {
-    super();
-  }
-  initialize = async () => {
-    const clerk = await this.clerk;
-
-    if (!clerk) {
-      return;
-    }
-
-    if (clerk.session) {
-      const verifiedEmail = clerk.session.user.emailAddresses.find(
-        (email) => email.verification.status === "verified",
-      );
-      useAuthState.setState({
-        isAuthenticated: true,
-        isPending: false,
-        profile: {
-          sub: clerk.session.user.id,
-          name: clerk.session.user.fullName ?? undefined,
-          email:
-            verifiedEmail?.emailAddress ??
-            clerk.session.user.emailAddresses[0]?.emailAddress,
-          emailVerified: verifiedEmail !== undefined,
-          pictureUrl: clerk.session.user.imageUrl,
-        },
-        providerData: {
-          user: clerk.session.user,
-        },
-      });
-    } else {
-      useAuthState.setState({
-        isAuthenticated: false,
-        isPending: false,
-        profile: undefined,
-      });
-    }
-  };
-}
-
 const clerkAuth: AuthenticationProviderInitializer<
   ClerkAuthenticationConfig
 > = ({
   clerkPubKey,
+  jwtTemplateName,
   redirectToAfterSignOut = "/",
-  redirectToAfterSignUp = "/",
-  redirectToAfterSignIn = "/",
-}) => {
+  redirectToAfterSignUp,
+  redirectToAfterSignIn,
+}): AuthenticationPlugin & ZudokuPlugin => {
   let clerkApi: Clerk | undefined;
   const ensureLoaded = (async () => {
     if (typeof window === "undefined") return;
@@ -65,9 +33,7 @@ const clerkAuth: AuthenticationProviderInitializer<
       const verifiedEmail = clerkApi.user.emailAddresses.find(
         (email) => email.verification.status === "verified",
       );
-      useAuthState.setState({
-        isAuthenticated: true,
-        isPending: false,
+      useAuthState.getState().setLoggedIn({
         profile: {
           sub: clerkApi.user.id,
           name: clerkApi.user.fullName ?? undefined,
@@ -97,7 +63,9 @@ const clerkAuth: AuthenticationProviderInitializer<
     if (!clerkApi?.session) {
       throw new Error("No session available");
     }
-    const response = await clerkApi.session.getToken();
+    const response = await clerkApi.session.getToken({
+      template: jwtTemplateName,
+    });
     if (!response) {
       throw new Error("Could not get access token from Clerk");
     }
@@ -111,7 +79,66 @@ const clerkAuth: AuthenticationProviderInitializer<
   }
 
   return {
-    clerk: clerkApi,
+    getRoutes: () => {
+      return [
+        {
+          path: "/signout",
+          element: <SignOut />,
+        },
+        {
+          path: "/signin",
+          element: <SignIn />,
+        },
+        {
+          path: "/signup",
+          element: <SignUp />,
+        },
+      ];
+    },
+
+    getProfileMenuItems() {
+      return [
+        {
+          label: "Logout",
+          path: "/signout",
+          category: "bottom",
+          icon: LogOutIcon,
+        } as const,
+      ];
+    },
+    initialize: async () => {
+      const clerk = await ensureLoaded;
+
+      if (!clerk) {
+        return;
+      }
+
+      if (clerk.session) {
+        const verifiedEmail = clerk.session.user.emailAddresses.find(
+          (email) => email.verification.status === "verified",
+        );
+        useAuthState.getState().setLoggedIn({
+          profile: {
+            sub: clerk.session.user.id,
+            name: clerk.session.user.fullName ?? undefined,
+            email:
+              verifiedEmail?.emailAddress ??
+              clerk.session.user.emailAddresses[0]?.emailAddress,
+            emailVerified: verifiedEmail !== undefined,
+            pictureUrl: clerk.session.user.imageUrl,
+          },
+          providerData: {
+            user: clerk.session.user,
+          },
+        });
+      } else {
+        useAuthState.setState({
+          isAuthenticated: false,
+          isPending: false,
+          profile: undefined,
+        });
+      }
+    },
     getAccessToken,
     signRequest,
     signOut: async () => {
@@ -119,34 +146,36 @@ const clerkAuth: AuthenticationProviderInitializer<
       await clerkApi?.signOut({
         redirectUrl: window.location.origin + redirectToAfterSignOut,
       });
-      useAuthState.setState({
-        isAuthenticated: false,
-        isPending: false,
-        profile: null,
-        providerData: null,
-      });
+      useAuthState.getState().setLoggedOut();
     },
-    signIn: async ({ redirectTo }: { redirectTo?: string } = {}) => {
+    signIn: async (
+      _: AuthActionContext,
+      { redirectTo }: { redirectTo?: string } = {},
+    ) => {
       await ensureLoaded;
       await clerkApi?.redirectToSignIn({
-        signInForceRedirectUrl:
-          redirectTo ?? window.location.origin + redirectToAfterSignIn,
-        signUpForceRedirectUrl:
-          redirectTo ?? window.location.origin + redirectToAfterSignUp,
+        signInForceRedirectUrl: redirectToAfterSignIn
+          ? window.location.origin + redirectToAfterSignIn
+          : redirectTo,
+        signUpForceRedirectUrl: redirectToAfterSignUp
+          ? window.location.origin + redirectToAfterSignUp
+          : redirectTo,
       });
     },
-    signUp: async ({ redirectTo }: { redirectTo?: string } = {}) => {
+    signUp: async (
+      _: AuthActionContext,
+      { redirectTo }: { redirectTo?: string } = {},
+    ) => {
       await ensureLoaded;
       await clerkApi?.redirectToSignUp({
-        signInForceRedirectUrl:
-          redirectTo ?? window.location.origin + redirectToAfterSignIn,
-        signUpForceRedirectUrl:
-          redirectTo ?? window.location.origin + redirectToAfterSignUp,
+        signInForceRedirectUrl: redirectToAfterSignIn
+          ? window.location.origin + redirectToAfterSignIn
+          : redirectTo,
+        signUpForceRedirectUrl: redirectToAfterSignUp
+          ? window.location.origin + redirectToAfterSignUp
+          : redirectTo,
       });
     },
-    getAuthenticationPlugin() {
-      return new ClerkAuthPlugin(ensureLoaded);
-    },
   };
 };
 

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