User can link generic openID providers (#3304)

* Link open id providers

* Pending commit

* Show multiple buttons one line and remove logs

* Improve loading

* Rename prop

* Change state for authenticating provider id

* CR changes

* Add authScope

Author: Llorenç Muntaner

src/frontend/src/lib/components/views/AccessMethodsPanel.svelte

@@ -71,7 +71,7 @@
       isSameAccessMethod(removableOpenIdCredential, lastUsedAccessMethod),
   );
 
-  const handleGoogleLinked = (credential: OpenIdCredential) => {
+  const handleOpenIDLinked = (credential: OpenIdCredential) => {
     openIdCredentials.push(credential);
     invalidateAll();
   };
@@ -279,7 +279,7 @@
 {#if isAddAccessMethodWizardOpen}
   {#if $ADD_ACCESS_METHOD}
     <AddAccessMethodWizard
-      onGoogleLinked={handleGoogleLinked}
+      onOpenIDLinked={handleOpenIDLinked}
       onPasskeyRegistered={handlePasskeyRegistered}
       onOtherDeviceRegistered={handleOtherDeviceRegistered}
       onClose={() => (isAddAccessMethodWizardOpen = false)}

src/frontend/src/lib/components/wizards/addAccessMethod/AddAccessMethodWizard.svelte

@@ -6,13 +6,14 @@
   import type {
     AuthnMethodData,
     OpenIdCredential,
+    OpenIdConfig,
   } from "$lib/generated/internet_identity_types";
   import AddAccessMethod from "$lib/components/wizards/addAccessMethod/views/AddAccessMethod.svelte";
   import AddPasskey from "$lib/components/wizards/addAccessMethod/views/AddPasskey.svelte";
   import { ConfirmAccessMethodWizard } from "$lib/components/wizards/confirmAccessMethod";
 
   interface Props {
-    onGoogleLinked: (credential: OpenIdCredential) => void;
+    onOpenIDLinked: (credential: OpenIdCredential) => void;
     onPasskeyRegistered: (credential: AuthnMethodData) => void;
     onOtherDeviceRegistered: () => void;
     onClose: () => void;
@@ -22,7 +23,7 @@
   }
 
   const {
-    onGoogleLinked,
+    onOpenIDLinked,
     onPasskeyRegistered,
     onOtherDeviceRegistered,
     onClose,
@@ -42,7 +43,16 @@
 
   const handleContinueWithGoogle = async () => {
     try {
-      onGoogleLinked(await addAccessMethodFlow.linkGoogleAccount());
+      onOpenIDLinked(await addAccessMethodFlow.linkGoogleAccount());
+      onClose();
+    } catch (error) {
+      onError(error);
+    }
+  };
+
+  const handleContinueWithOpenId = async (config: OpenIdConfig) => {
+    try {
+      onOpenIDLinked(await addAccessMethodFlow.linkOpenIdAccount(config));
       onClose();
     } catch (error) {
       onError(error);
@@ -72,6 +82,7 @@
     <AddAccessMethod
       continueWithPasskey={addAccessMethodFlow.continueWithPasskey}
       linkGoogleAccount={handleContinueWithGoogle}
+      linkOpenIdAccount={handleContinueWithOpenId}
     />
   {:else if addAccessMethodFlow.view === "addPasskey"}
     <AddPasskey

src/frontend/src/lib/components/wizards/addAccessMethod/views/AddAccessMethod.svelte

@@ -6,26 +6,48 @@
   import Button from "$lib/components/ui/Button.svelte";
   import GoogleIcon from "$lib/components/icons/GoogleIcon.svelte";
   import { nonNullish } from "@dfinity/utils";
+  import { canisterConfig } from "$lib/globals";
+  import { ENABLE_GENERIC_OPEN_ID } from "$lib/state/featureFlags";
+  import type { OpenIdConfig } from "$lib/generated/internet_identity_types";
 
   interface Props {
     linkGoogleAccount: () => Promise<void>;
+    linkOpenIdAccount: (config: OpenIdConfig) => Promise<void>;
     continueWithPasskey: () => void;
   }
 
-  const { linkGoogleAccount, continueWithPasskey }: Props = $props();
+  const { linkGoogleAccount, linkOpenIdAccount, continueWithPasskey }: Props =
+    $props();
 
-  let authenticating = $state(false);
+  let authenticatingGoogle = $state(false);
+  let authenticatingProviderId = $state<string | null>();
+  let authenticating = $derived(
+    nonNullish(authenticatingProviderId) || authenticatingGoogle,
+  );
 
   const isPasskeySupported = nonNullish(window.PublicKeyCredential);
 
   const handleContinueWithGoogle = async () => {
-    authenticating = true;
+    authenticatingGoogle = true;
     try {
       await linkGoogleAccount();
     } finally {
-      authenticating = false;
+      authenticatingGoogle = false;
     }
   };
+
+  const handleContinueWithOpenId = async (config: OpenIdConfig) => {
+    authenticatingProviderId = config.client_id;
+    try {
+      await linkOpenIdAccount(config);
+    } finally {
+      authenticatingProviderId = null;
+    }
+  };
+
+  const showGoogleButton =
+    canisterConfig.openid_google?.[0]?.[0] && !$ENABLE_GENERIC_OPEN_ID;
+  const openIdProviders = canisterConfig.openid_configs?.[0] ?? [];
 </script>
 
 <div class="mt-4 mb-6 flex flex-col">
@@ -36,7 +58,7 @@
     Add access method
   </h1>
   <p class="text-md text-text-tertiary font-medium text-balance sm:text-center">
-    Add another way to sign in with a passkey or Google account for secure
+    Add another way to sign in with a passkey or third-party account for secure
     access.
   </p>
 </div>
@@ -58,20 +80,42 @@
       <PasskeyIcon />
       Continue with Passkey
     </Button>
-    <Button
-      onclick={handleContinueWithGoogle}
-      variant="secondary"
-      disabled={authenticating}
-      size="xl"
-    >
-      {#if authenticating}
-        <ProgressRing />
-        <span>Authenticating with Google...</span>
-      {:else}
-        <GoogleIcon />
-        <span>Continue with Google</span>
-      {/if}
-    </Button>
+    {#if $ENABLE_GENERIC_OPEN_ID}
+      <div class="flex flex-row flex-nowrap justify-stretch gap-3">
+        {#each openIdProviders as provider}
+          <Button
+            onclick={() => handleContinueWithOpenId(provider)}
+            variant="secondary"
+            disabled={authenticating}
+            size="xl"
+            class="flex-1"
+          >
+            {#if authenticatingProviderId === provider.client_id}
+              <ProgressRing />
+            {:else if provider.logo}
+              <div class="size-6">
+                {@html provider.logo}
+              </div>
+            {/if}
+          </Button>
+        {/each}
+      </div>
+    {:else if showGoogleButton}
+      <Button
+        onclick={handleContinueWithGoogle}
+        variant="secondary"
+        disabled={authenticating}
+        size="xl"
+      >
+        {#if authenticatingGoogle}
+          <ProgressRing />
+          <span>Authenticating with Google...</span>
+        {:else}
+          <GoogleIcon />
+          <span>Continue with Google</span>
+        {/if}
+      </Button>
+    {/if}
   </div>
 </div>
 

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

@@ -12,6 +12,8 @@ import { throwCanisterError } from "$lib/utils/utils";
 import type {
   AuthnMethodData,
   OpenIdCredential,
+  OpenIdConfig,
+  MetadataMapV2,
 } from "$lib/generated/internet_identity_types";
 import { features } from "$lib/legacy/features";
 import { DiscoverableDummyIdentity } from "$lib/utils/discoverableDummyIdentity";
@@ -42,6 +44,53 @@ export class AddAccessMethodFlow {
     }
   }
 
+  linkOpenIdAccount = async (
+    config: OpenIdConfig,
+  ): Promise<OpenIdCredential> => {
+    const { identity, actor, identityNumber } = get(authenticatedStore);
+
+    try {
+      this.#isSystemOverlayVisible = true;
+      const { nonce, salt } = await createAnonymousNonce(
+        identity.getPrincipal(),
+      );
+      const jwt = await requestJWT(
+        {
+          clientId: config.client_id,
+          authURL: config.auth_uri,
+          configURL: config.fedcm_uri?.[0],
+          authScope: config.auth_scope.join(" "),
+        },
+        {
+          nonce,
+          mediation: "required",
+        },
+      );
+      const { iss, sub, aud, name, email } = decodeJWTWithNameAndEmail(jwt);
+      this.#isSystemOverlayVisible = false;
+      await actor
+        .openid_credential_add(identityNumber, jwt, salt)
+        .then(throwCanisterError);
+
+      const metadata: MetadataMapV2 = [];
+      if (nonNullish(name)) {
+        metadata.push(["name", { String: name }]);
+      }
+      if (nonNullish(email)) {
+        metadata.push(["email", { String: email }]);
+      }
+      return {
+        aud,
+        iss,
+        sub,
+        metadata,
+        last_usage_timestamp: [],
+      };
+    } finally {
+      this.#isSystemOverlayVisible = false;
+    }
+  };
+
   linkGoogleAccount = async (): Promise<OpenIdCredential> => {
     const { identity, actor, identityNumber } = get(authenticatedStore);