Auth with Generic Open ID (#3297)

Author: Llorenç Muntaner

src/frontend/src/lib/components/wizards/auth/AuthWizard.svelte

@@ -14,6 +14,7 @@
   import { MigrationWizard } from "$lib/components/wizards/migration";
   import { isWebAuthnCancelError } from "$lib/utils/webAuthnErrorUtils";
   import { isOpenIdCancelError } from "$lib/utils/openID";
+  import type { OpenIdConfig } from "$lib/generated/internet_identity_types";
 
   interface Props {
     isAuthenticating?: boolean;
@@ -105,6 +106,25 @@
       isAuthenticating = false;
     }
   };
+
+  const handleContinueWithOpenId = async (
+    config: OpenIdConfig,
+  ): Promise<void | "cancelled"> => {
+    isAuthenticating = true;
+    try {
+      const { identityNumber, type } =
+        await authFlow.continueWithOpenId(config);
+      (type === "signUp" ? onSignUp : onSignIn)(identityNumber);
+    } catch (error) {
+      if (isOpenIdCancelError(error)) {
+        return "cancelled";
+      }
+      onError(error); // Propagate unhandled errors to parent component
+    } finally {
+      isAuthenticating = false;
+    }
+  };
+
   const handleRegistered = async (identityNumber: bigint) => {
     if (canisterConfig.feature_flag_continue_from_another_device[0] === true) {
       onSignIn(identityNumber);
@@ -152,6 +172,7 @@
     <PickAuthenticationMethod
       setupOrUseExistingPasskey={authFlow.setupOrUseExistingPasskey}
       continueWithGoogle={handleContinueWithGoogle}
+      continueWithOpenId={handleContinueWithOpenId}
       migrate={() => (isMigrating = true)}
     />
   {/if}

src/frontend/src/lib/components/wizards/auth/views/PickAuthenticationMethod.svelte

@@ -6,21 +6,31 @@
   import Alert from "$lib/components/ui/Alert.svelte";
   import ProgressRing from "$lib/components/ui/ProgressRing.svelte";
   import { canisterConfig } from "$lib/globals";
-  import { ENABLE_MIGRATE_FLOW } from "$lib/state/featureFlags";
+  import {
+    ENABLE_GENERIC_OPEN_ID,
+    ENABLE_MIGRATE_FLOW,
+  } from "$lib/state/featureFlags";
   import { waitFor } from "$lib/utils/utils";
   import Tooltip from "$lib/components/ui/Tooltip.svelte";
+  import type { OpenIdConfig } from "$lib/generated/internet_identity_types";
 
   interface Props {
     setupOrUseExistingPasskey: () => void;
     continueWithGoogle: () => Promise<void | "cancelled">;
+    continueWithOpenId: (config: OpenIdConfig) => Promise<void | "cancelled">;
     migrate: () => void;
   }
 
-  const { setupOrUseExistingPasskey, continueWithGoogle, migrate }: Props =
-    $props();
+  const {
+    setupOrUseExistingPasskey,
+    continueWithGoogle,
+    continueWithOpenId,
+    migrate,
+  }: Props = $props();
 
   let isAuthenticating = $state(false);
   let isCancelled = $state(false);
+  let cancelledProviderId = $state<string | null>(null);
 
   const handleContinueWithGoogle = async () => {
     isAuthenticating = true;
@@ -34,8 +44,22 @@
     }
   };
 
+  const handleContinueWithOpenId = async (config: OpenIdConfig) => {
+    isAuthenticating = true;
+    const result = await continueWithOpenId(config);
+    isAuthenticating = false;
+
+    if (result === "cancelled") {
+      cancelledProviderId = config.client_id;
+      await waitFor(4000);
+      cancelledProviderId = null;
+    }
+  };
+
   const supportsPasskeys = nonNullish(window.PublicKeyCredential);
-  const showGoogleButton = canisterConfig.openid_google?.[0]?.[0];
+  const showGoogleButton =
+    canisterConfig.openid_google?.[0]?.[0] && !ENABLE_GENERIC_OPEN_ID;
+  const openIdProviders = canisterConfig.openid_configs?.[0] || [];
 </script>
 
 <div class="flex flex-col items-stretch gap-6">
@@ -47,10 +71,36 @@
     />
   {/if}
   <div class="flex flex-col items-stretch gap-3">
+    {#if $ENABLE_GENERIC_OPEN_ID}
+      <div class="flex flex-row flex-nowrap justify-stretch gap-3">
+        {#each openIdProviders as provider}
+          <Tooltip
+            label="Interaction canceled. Please try again."
+            hidden={cancelledProviderId !== provider.client_id}
+            manual
+          >
+            <Button
+              onclick={() => handleContinueWithOpenId(provider)}
+              variant="secondary"
+              disabled={isAuthenticating}
+              size="xl"
+              class="flex-1"
+            >
+              {#if isAuthenticating}
+                <ProgressRing />
+              {:else if provider.logo}
+                {@html provider.logo}
+              {/if}
+            </Button>
+          </Tooltip>
+        {/each}
+      </div>
+    {/if}
     <Button
       onclick={setupOrUseExistingPasskey}
       disabled={!supportsPasskeys || isAuthenticating}
       size="xl"
+      variant={$ENABLE_GENERIC_OPEN_ID ? "secondary" : "primary"}
     >
       <PasskeyIcon />
       Continue with Passkey

src/frontend/src/lib/flows/authFlow.svelte.ts

@@ -27,8 +27,13 @@ import {
   IdRegFinishError,
   IdRegStartError,
   OpenIdDelegationError,
+  OpenIdConfig,
 } from "$lib/generated/internet_identity_types";
-import { createGoogleRequestConfig, requestJWT } from "$lib/utils/openID";
+import {
+  createGoogleRequestConfig,
+  requestJWT,
+  RequestConfig,
+} from "$lib/utils/openID";
 
 export class AuthFlow {
   #view = $state<
@@ -201,7 +206,73 @@ export class AuthFlow {
           AuthenticationV2Events.RegisterWithGoogle,
         );
         await this.#startRegistration();
-        const identityNumber = await this.#registerWithGoogle(jwt);
+        const identityNumber = await this.#registerWithOpenId(jwt);
+        return { identityNumber, type: "signUp" };
+      }
+      this.#view = "chooseMethod";
+      throw error;
+    }
+  };
+
+  continueWithOpenId = async (
+    config: OpenIdConfig,
+  ): Promise<{
+    identityNumber: bigint;
+    type: "signIn" | "signUp";
+  }> => {
+    let jwt: string | undefined = undefined;
+    // Convert OpenIdConfig to RequestConfig
+    const requestConfig: RequestConfig = {
+      clientId: config.client_id,
+      authURL: config.auth_uri,
+      configURL: config.fedcm_uri?.[0],
+    };
+    // Create two try-catch blocks to avoid double-triggering the analytics.
+    try {
+      this.#systemOverlay = true;
+      jwt = await requestJWT(requestConfig, {
+        nonce: get(sessionStore).nonce,
+        mediation: "required",
+      });
+    } catch (error) {
+      this.#view = "chooseMethod";
+      throw error;
+    } finally {
+      this.#systemOverlay = false;
+      // Moved after `requestJWT` to avoid Safari from blocking the popup.
+      authenticationV2Funnel.trigger(AuthenticationV2Events.ContinueWithGoogle);
+    }
+    try {
+      const { identity, identityNumber, iss, sub } = await authenticateWithJWT({
+        canisterId,
+        session: get(sessionStore),
+        jwt,
+      });
+      // If the previous call succeeds, it means the OpenID user already exists in II.
+      // Therefore, they are logging in.
+      // If the call fails, it means the OpenID user does not exist in II.
+      // In that case, we register them.
+      authenticationV2Funnel.trigger(AuthenticationV2Events.LoginWithGoogle);
+      authenticationStore.set({ identity, identityNumber });
+      const info =
+        await get(authenticatedStore).actor.get_anchor_info(identityNumber);
+      lastUsedIdentitiesStore.addLastUsedIdentity({
+        identityNumber,
+        name: info.name[0],
+        authMethod: { openid: { iss, sub } },
+      });
+      return { identityNumber, type: "signIn" };
+    } catch (error) {
+      if (
+        isCanisterError<OpenIdDelegationError>(error) &&
+        error.type === "NoSuchAnchor" &&
+        nonNullish(jwt)
+      ) {
+        authenticationV2Funnel.trigger(
+          AuthenticationV2Events.RegisterWithGoogle,
+        );
+        await this.#startRegistration();
+        const identityNumber = await this.#registerWithOpenId(jwt);
         return { identityNumber, type: "signUp" };
       }
       this.#view = "chooseMethod";
@@ -335,7 +406,7 @@ export class AuthFlow {
     }
   };
 
-  #registerWithGoogle = async (jwt: string): Promise<bigint> => {
+  #registerWithOpenId = async (jwt: string): Promise<bigint> => {
     try {
       await get(sessionStore)
         .actor.openid_identity_registration_finish({
@@ -372,7 +443,7 @@ export class AuthFlow {
           await this.#solveCaptcha(
             `data:image/png;base64,${nextStep.CheckCaptcha.captcha_png_base64}`,
           );
-          return this.#registerWithGoogle(jwt);
+          return this.#registerWithOpenId(jwt);
         }
       }
       throw error;