zudoku 0.0.0-ee328ec → 0.0.0-efc60ba6

package/src/lib/auth/issuer.ts

@@ -0,0 +1,41 @@
+import type { ZudokuConfig } from "../../config/validators/validate.js";
+import invariant from "../util/invariant.js";
+
+export const getIssuer = async (config: ZudokuConfig) => {
+  switch (config.authentication?.type) {
+    case "clerk": {
+      const frontendApiEncoded = config.authentication.clerkPubKey
+        .split("_")
+        .at(-1);
+      invariant(frontendApiEncoded, "Clerk public key is invalid");
+      const frontendApiParts = atob(frontendApiEncoded).split("$");
+
+      if (frontendApiParts.length !== 2) {
+        throw new Error("Clerk public key is invalid");
+      }
+
+      const frontendApi = frontendApiParts.at(0);
+      invariant(frontendApi, "Clerk public key is invalid");
+
+      return `https://${frontendApi}`;
+    }
+    case "auth0": {
+      return `https://${config.authentication.domain}/`;
+    }
+    case "openid": {
+      return config.authentication.issuer;
+    }
+    case "supabase": {
+      return config.authentication.supabaseUrl;
+    }
+    case "azureb2c": {
+      return config.authentication.issuer;
+    }
+    case undefined: {
+      return undefined;
+    }
+    default: {
+      throw new Error(`Unsupported authentication type`);
+    }
+  }
+};

package/src/lib/authentication/AuthenticationPlugin.tsx

@@ -1,8 +1,8 @@
 import { LogOutIcon } from "lucide-react";
 import {
-  CommonPlugin,
-  NavigationPlugin,
-  ProfileMenuPlugin,
+  type CommonPlugin,
+  type NavigationPlugin,
+  type ProfileMenuPlugin,
 } from "../core/plugins.js";
 import { SignIn } from "./components/SignIn.js";
 import { SignOut } from "./components/SignOut.js";
@@ -10,7 +10,7 @@ import { SignUp } from "./components/SignUp.js";
 
 type PluginInterface = NavigationPlugin & CommonPlugin & ProfileMenuPlugin;
 
-export class AuthenticationPlugin implements PluginInterface {
+export class CoreAuthenticationPlugin implements PluginInterface {
   getRoutes() {
     return [
       {

package/src/lib/authentication/authentication.ts

@@ -1,16 +1,13 @@
-import { ZudokuPlugin } from "../core/plugins.js";
-
-export interface AuthenticationProvider {
-  signUp(options?: { redirectTo?: string }): Promise<void>;
-  signIn(options?: { redirectTo?: string }): Promise<void>;
+export interface AuthenticationPlugin {
+  signUp(options?: { redirectTo?: string; replace?: boolean }): Promise<void>;
+  signIn(options?: { redirectTo?: string; replace?: boolean }): Promise<void>;
   signOut(): Promise<void>;
   // @deprecated use signRequest instead
   getAccessToken(): Promise<string>;
-  getAuthenticationPlugin?(): ZudokuPlugin;
   onPageLoad?(): void;
   signRequest(request: Request): Promise<Request>;
 }
 
 export interface AuthenticationProviderInitializer<TConfig> {
-  (config: TConfig): AuthenticationProvider;
+  (config: TConfig): AuthenticationPlugin;
 }

package/src/lib/authentication/components/CallbackHandler.tsx

@@ -1,9 +1,9 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { Navigate } from "react-router";
 import { useZudoku } from "zudoku/components";
-import { ZudokuError } from "../../util/invariant.js";
 import { joinUrl } from "../../util/joinUrl.js";
 import { normalizeRedirectUrl } from "../../util/url.js";
+import { OAuthAuthorizationError, type OAuthErrorType } from "../errors.js";
 
 export function CallbackHandler({
   handleCallback,
@@ -15,24 +15,31 @@ export function CallbackHandler({
     retry: false,
     queryKey: ["oauth-callback"],
     queryFn: async () => {
-      try {
-        return joinUrl(
-          normalizeRedirectUrl(
-            await handleCallback(),
-            window.location.origin,
-            options.basePath,
-          ),
+      const url = new URL(window.location.href);
+
+      const errorParam = url.searchParams.get("error");
+      const errorDescription =
+        url.searchParams.get("error_description") ?? undefined;
+      const errorUri = url.searchParams.get("error_uri") ?? undefined;
+      if (errorParam) {
+        throw new OAuthAuthorizationError(
+          `OAuth error '${errorParam}': ${errorDescription}`,
+          {
+            error: errorParam as OAuthErrorType,
+            error_description: errorDescription,
+            error_uri: errorUri,
+          },
         );
-      } catch (error) {
-        throw new ZudokuError("Could not validate user", {
-          cause: error,
-          title: "Authentication Error",
-          developerHint:
-            "Check the configuration of your authorization provider and ensure all settings such as the callback URL are configured correctly.",
-        });
       }
+      return joinUrl(
+        normalizeRedirectUrl(
+          await handleCallback(),
+          window.location.origin,
+          options.basePath,
+        ),
+      );
     },
   });
 
-  return <Navigate to={executeCallback.data} />;
+  return <Navigate to={executeCallback.data} replace />;
 }

package/src/lib/authentication/components/OAuthErrorPage.tsx

@@ -0,0 +1,171 @@
+import { HomeIcon } from "lucide-react";
+import { Link } from "react-router";
+import { Heading } from "../../components/Heading.js";
+import { Typography } from "../../components/Typography.js";
+import { Button } from "../../ui/Button.js";
+import { OAuthAuthorizationError } from "../errors.js";
+import { useAuth } from "../hook.js";
+
+const errorDetailsMap: Record<string, { message: string }> = {
+  invalid_request: {
+    message:
+      "The authentication request was invalid. Please try signing in again.",
+  },
+  unauthorized_client: {
+    message:
+      "This application is not authorized to access your account. Please contact support.",
+  },
+  access_denied: {
+    message:
+      "You denied access to this application. To continue, please sign in and grant access.",
+  },
+  unsupported_response_type: {
+    message:
+      "The authentication method is not supported. Please contact support.",
+  },
+  invalid_scope: {
+    message: "The requested permissions are invalid. Please contact support.",
+  },
+  server_error: {
+    message:
+      "The authentication server encountered an error. Please try again in a few moments.",
+  },
+  temporarily_unavailable: {
+    message:
+      "The authentication service is temporarily unavailable. Please try again in a few moments.",
+  },
+  // Token errors
+  invalid_client: {
+    message: "Invalid application credentials. Please contact support.",
+  },
+  invalid_grant: {
+    message:
+      "The authentication code has expired or is invalid. Please sign in again.",
+  },
+  unsupported_grant_type: {
+    message:
+      "The authentication method is not supported. Please contact support.",
+  },
+  // Custom errors
+  invalid_state: {
+    message:
+      "Security validation failed. This may be due to a potential security attack. Please try signing in again.",
+  },
+  missing_code_verifier: {
+    message:
+      "Authentication security information is missing. Please clear your browser cache and try again.",
+  },
+  network_error: {
+    message:
+      "A network error occurred during authentication. Please check your connection and try again.",
+  },
+  token_expired: {
+    message: "Your authentication session has expired. Please sign in again.",
+  },
+  configuration_error: {
+    message:
+      "There is an issue with the authentication configuration. Please contact support.",
+  },
+  unknown_error: {
+    message:
+      "An unexpected error occurred during authentication. Please try again or contact support.",
+  },
+};
+
+export function OAuthErrorPage({ error }: { error: any }) {
+  const { login } = useAuth();
+
+  if (!(error instanceof OAuthAuthorizationError)) {
+    throw error;
+  }
+
+  const oauthError = error.error;
+  const type = oauthError.error;
+
+  const details = errorDetailsMap[type] ?? errorDetailsMap.unknown_error;
+
+  return (
+    <div className="min-h-[400px] flex items-center justify-center p-4">
+      <div className="max-w-md w-full text-center space-y-6">
+        <div className="space-y-4 items-center">
+          <Heading level={2} className="text-2xl inline-block font-bold">
+            {titles[type] || "Authentication Error"}
+          </Heading>
+
+          <Typography className="text-gray-600 dark:text-gray-300 leading-relaxed">
+            {details?.message}
+          </Typography>
+
+          {/* Technical details for developers (only in development) */}
+        </div>
+
+        {/* Action Buttons */}
+        <div className="space-y-3 pt-4">
+          <div className="space-y-2">
+            {(type === "access_denied" ||
+              type === "invalid_grant" ||
+              type === "token_expired") && (
+              <Button
+                onClick={login}
+                className="w-full capitalize"
+                variant={"default"}
+              >
+                Sign in again
+              </Button>
+            )}
+          </div>
+
+          <div className="flex gap-2">
+            <Button asChild className="flex-1" variant="outline">
+              <Link to="/">
+                <HomeIcon className="w-4 h-4 mr-2" />
+                Go Home
+              </Link>
+            </Button>
+          </div>
+        </div>
+
+        {/* Additional Help */}
+        {helpMessages[type] && (
+          <Typography className="text-sm text-gray-500 dark:text-gray-400">
+            {helpMessages[type]}
+          </Typography>
+        )}
+      </div>
+    </div>
+  );
+}
+
+const titles: Record<string, string> = {
+  access_denied: "Access Denied",
+  invalid_request: "Invalid Request",
+  unauthorized_client: "Unauthorized Application",
+  unsupported_response_type: "Unsupported Method",
+  invalid_scope: "Invalid Permissions",
+  server_error: "Server Error",
+  temporarily_unavailable: "Service Unavailable",
+  invalid_client: "Invalid Credentials",
+  invalid_grant: "Authentication Expired",
+  unsupported_grant_type: "Unsupported Authentication",
+  invalid_state: "Security Check Failed",
+  missing_code_verifier: "Security Information Missing",
+  network_error: "Network Error",
+  token_expired: "Session Expired",
+  configuration_error: "Configuration Error",
+  unknown_error: "Authentication Failed",
+};
+
+const helpMessages: Record<string, string> = {
+  access_denied:
+    "If you changed your mind, you can try signing in again to grant access.",
+  invalid_state:
+    "This error can occur if you have multiple tabs open or if your session was compromised.",
+  missing_code_verifier:
+    "Try clearing your browser's cache and cookies for this site.",
+  network_error:
+    "Check your internet connection and ensure you can access other websites.",
+  server_error:
+    "The issue is on our end. Our team has been notified and is working to fix it.",
+  temporarily_unavailable:
+    "This is usually temporary. Try again in a few minutes.",
+};

package/src/lib/authentication/components/SignIn.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
-import { Link, useSearchParams } from "react-router";
-import { Button } from "zudoku/ui/Button.js";
+import { useSearchParams } from "react-router";
+import { Spinner } from "zudoku/components";
 import {
   Card,
   CardContent,
@@ -16,6 +16,7 @@ export const SignIn = () => {
   useEffect(() => {
     void context.authentication?.signIn({
       redirectTo: search.get("redirect") ?? undefined,
+      replace: true,
     });
   }, [context.authentication, search]);
 
@@ -30,16 +31,8 @@ export const SignIn = () => {
           </CardDescription>
         </CardHeader>
         <CardContent>
-          <div className="flex flex-col gap-2 justify-center">
-            <Button
-              onClick={() => context.authentication?.signIn()}
-              variant="default"
-            >
-              Login
-            </Button>
-            <Button variant="link" className="text-muted-foreground" asChild>
-              <Link to="/">Go home</Link>
-            </Button>
+          <div className="flex items-center text-sm font-medium gap-2">
+            <Spinner /> Redirecting...
           </div>
         </CardContent>
       </Card>

package/src/lib/authentication/errors.ts

@@ -1,21 +1,35 @@
-export class AuthorizationError extends Error {}
+import type { OAuth2Error } from "oauth4webapi";
+import { ZudokuError, type ZudokuErrorOptions } from "../util/invariant.js";
 
-interface OAuthError {
-  readonly error: string;
-  readonly error_description?: string;
-  readonly error_uri?: string;
-  readonly algs?: string;
-  readonly scope?: string;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  readonly [parameter: string]: any | undefined;
-}
+export class AuthorizationError extends Error {}
 
-export class OAuthAuthorizationError extends AuthorizationError {
+export class OAuthAuthorizationError extends ZudokuError {
   constructor(
     message: string,
-    public error: OAuthError,
-    options?: ErrorOptions,
+    public error: OAuth2Error,
+    options?: ZudokuErrorOptions,
   ) {
     super(message, options);
   }
 }
+
+export type OAuthErrorType =
+  // Authorization errors
+  | "invalid_request"
+  | "unauthorized_client"
+  | "access_denied"
+  | "unsupported_response_type"
+  | "invalid_scope"
+  | "server_error"
+  | "temporarily_unavailable"
+  // Token errors
+  | "invalid_client"
+  | "invalid_grant"
+  | "unsupported_grant_type"
+  // Custom errors
+  | "invalid_state"
+  | "missing_code_verifier"
+  | "network_error"
+  | "token_expired"
+  | "configuration_error"
+  | "unknown_error";

package/src/lib/authentication/hook.ts

@@ -1,6 +1,8 @@
 import { useZudoku } from "../components/context/ZudokuContext.js";
 import { useAuthState } from "./state.js";
 
+export type UseAuthReturn = ReturnType<typeof useAuth>;
+
 export const useAuth = () => {
   const { authentication } = useZudoku();
   const authState = useAuthState();

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

@@ -1,14 +1,20 @@
 import { type Auth0AuthenticationConfig } from "../../../config/config.js";
-import { type AuthenticationProviderInitializer } from "../authentication.js";
+import {
+  type AuthenticationPlugin,
+  type AuthenticationProviderInitializer,
+} from "../authentication.js";
 import { useAuthState } from "../state.js";
 import { OpenIDAuthenticationProvider } from "./openid.js";
 
-class Auth0AuthenticationProvider extends OpenIDAuthenticationProvider {
+class Auth0AuthenticationProvider
+  extends OpenIDAuthenticationProvider
+  implements AuthenticationPlugin
+{
   constructor(config: Auth0AuthenticationConfig) {
     super({
       ...config,
       type: "openid",
-      issuer: `https://${config.domain}`,
+      issuer: `https://${config.domain}/`,
       clientId: config.clientId,
       audience: config.audience,
       scopes: config.scopes,

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

@@ -0,0 +1,201 @@
+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 {
+  type AuthenticationPlugin,
+  type AuthenticationProviderInitializer,
+} from "../authentication.js";
+import { CoreAuthenticationPlugin } from "../AuthenticationPlugin.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({ 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({ 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 () => {
+    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;