@mehdad67/apitogo 0.1.24

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

@@ -0,0 +1,223 @@
+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 {
+  AuthActionContext,
+  AuthenticationPlugin,
+  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";
+
+export type AzureB2CProviderData = {
+  type: "azureb2c";
+  accessToken: string;
+  idToken: string;
+  scopes: string[];
+  account: AuthenticationResult["account"];
+};
+
+declare module "../state.js" {
+  interface ProviderDataRegistry {
+    azureb2c: AzureB2CProviderData;
+  }
+}
+
+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: {
+        type: "azureb2c",
+        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

@@ -0,0 +1,224 @@
+import type { Clerk } from "@clerk/clerk-js";
+import type { ApitogoPlugin } from "@lukoweb/apitogo/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 { type UserProfile, useAuthState } from "../state.js";
+import { getClerkFrontendApi } from "./util.js";
+
+export type ClerkProviderData = {
+  type: "clerk";
+  user: NonNullable<Clerk["session"]>["user"] | undefined;
+};
+
+declare module "../state.js" {
+  interface ProviderDataRegistry {
+    clerk: ClerkProviderData;
+  }
+}
+
+let clerkPromise: Promise<Clerk> | undefined;
+
+const loadClerk = (publishableKey: string): Promise<Clerk> => {
+  if (clerkPromise) return clerkPromise;
+
+  clerkPromise = new Promise<void>((resolve, reject) => {
+    const frontendApiUrl = getClerkFrontendApi(publishableKey);
+
+    const script = document.createElement("script");
+    script.src = `https://${frontendApiUrl}/npm/@clerk/clerk-js@5/dist/clerk.browser.js`;
+    script.async = true;
+    script.crossOrigin = "anonymous";
+    script.dataset.clerkPublishableKey = publishableKey;
+    script.onload = () => resolve();
+    script.onerror = () => {
+      clerkPromise = undefined;
+      reject(new Error("Failed to load Clerk from CDN"));
+    };
+    document.head.appendChild(script);
+  }).then(async () => {
+    const clerk = (window as { Clerk?: Clerk }).Clerk;
+    if (!clerk) {
+      throw new Error("Clerk script loaded but window.Clerk is not available");
+    }
+    await clerk.load();
+    return clerk;
+  });
+
+  return clerkPromise;
+};
+
+const clerkAuth: AuthenticationProviderInitializer<
+  ClerkAuthenticationConfig
+> = ({
+  clerkPubKey,
+  jwtTemplateName,
+  redirectToAfterSignOut = "/",
+  redirectToAfterSignUp,
+  redirectToAfterSignIn,
+}): AuthenticationPlugin & ApitogoPlugin => {
+  const getClerk = (): Promise<Clerk> => {
+    if (typeof window === "undefined") {
+      return Promise.reject(new Error("Clerk is not available during SSR"));
+    }
+    return loadClerk(clerkPubKey);
+  };
+
+  async function getAccessToken() {
+    const clerk = await getClerk();
+
+    if (!clerk.session) {
+      throw new Error("No session available");
+    }
+    const response = await clerk.session.getToken({
+      template: jwtTemplateName,
+    });
+    if (!response) {
+      throw new Error("Could not get access token from Clerk");
+    }
+    return response;
+  }
+
+  async function getUserProfile(
+    clerk: Clerk,
+  ): Promise<UserProfile | undefined> {
+    const user = clerk.session?.user;
+    if (!user) return undefined;
+
+    const verifiedEmail = user.emailAddresses.find(
+      (email) => email.verification.status === "verified",
+    );
+
+    return {
+      sub: user.id ?? "",
+      email:
+        verifiedEmail?.emailAddress ??
+        user.emailAddresses[0]?.emailAddress ??
+        "",
+      name: user.fullName ?? "",
+      emailVerified: !!verifiedEmail?.emailAddress,
+      pictureUrl: user.imageUrl ?? "",
+    };
+  }
+
+  async function refreshUserProfile() {
+    const clerk = await getClerk().catch((e) => {
+      // biome-ignore lint/suspicious/noConsole: Intentional warning
+      console.warn("Clerk unavailable during profile refresh:", e);
+      return undefined;
+    });
+    if (!clerk) return false;
+
+    await clerk.session?.user?.reload();
+
+    const profile = await getUserProfile(clerk);
+
+    if (!profile) {
+      return false;
+    }
+
+    useAuthState.setState({
+      isAuthenticated: true,
+      isPending: false,
+      profile,
+      providerData: {
+        type: "clerk",
+        user: clerk.session?.user,
+      },
+    });
+
+    return true;
+  }
+
+  async function signRequest(request: Request): Promise<Request> {
+    const response = await getAccessToken();
+    request.headers.set("Authorization", `Bearer ${response}`);
+    return request;
+  }
+
+  return {
+    getRoutes: () => [
+      { path: "/signout", element: <SignOut /> },
+      { path: "/signin", element: <SignIn /> },
+      { path: "/signup", element: <SignUp /> },
+    ],
+    refreshUserProfile,
+    getProfileMenuItems() {
+      return [];
+    },
+    initialize: async () => {
+      if (typeof window === "undefined") return;
+
+      const clerk = await getClerk().catch((e) => {
+        // biome-ignore lint/suspicious/noConsole: Intentional error logging
+        console.error("Clerk failed to initialize:", e);
+        return undefined;
+      });
+      if (!clerk) return;
+
+      if (clerk.session) {
+        const profile = await getUserProfile(clerk);
+
+        if (!profile) {
+          useAuthState.getState().setLoggedOut();
+          return;
+        }
+
+        useAuthState.getState().setLoggedIn({
+          profile,
+          providerData: {
+            type: "clerk",
+            user: clerk.session.user,
+          },
+        });
+      } else {
+        useAuthState.getState().setLoggedOut();
+      }
+    },
+    getAccessToken,
+    signRequest,
+    signOut: async () => {
+      const clerk = await getClerk();
+      useAuthState.getState().setLoggedOut();
+      await clerk.signOut({
+        redirectUrl: window.location.origin + redirectToAfterSignOut,
+      });
+    },
+    signIn: async (
+      _: AuthActionContext,
+      { redirectTo }: { redirectTo?: string } = {},
+    ) => {
+      const clerk = await getClerk();
+      await clerk.redirectToSignIn({
+        signInForceRedirectUrl: redirectToAfterSignIn
+          ? window.location.origin + redirectToAfterSignIn
+          : redirectTo,
+        signUpForceRedirectUrl: redirectToAfterSignUp
+          ? window.location.origin + redirectToAfterSignUp
+          : redirectTo,
+      });
+    },
+    signUp: async (
+      _: AuthActionContext,
+      { redirectTo }: { redirectTo?: string } = {},
+    ) => {
+      const clerk = await getClerk();
+      await clerk.redirectToSignUp({
+        signInForceRedirectUrl: redirectToAfterSignIn
+          ? window.location.origin + redirectToAfterSignIn
+          : redirectTo,
+        signUpForceRedirectUrl: redirectToAfterSignUp
+          ? window.location.origin + redirectToAfterSignUp
+          : redirectTo,
+      });
+    },
+  };
+};
+
+export default clerkAuth;