feat: Sync backend config with II frontend canister (dfinity#3634)

<!-- Make sure you talk to us before submitting changes. See
CONTRIBUTING.md. -->

# Motivation

This is the next step towards the II canister split.

# Changes

- Add `backend_origin` to II init args/types (Rust + Candid + generated
JS/TS bindings).
- Update the II frontend canister HTML fixup to require
`backend_canister_id`/`backend_origin` and preload `/.config.did.bin`.
- Update the web frontend bootstrap to asynchronously fetch and merge
backend-provided OpenID config into the runtime config.

# Tests

Existing OpenID tests should suffice.

---------

Co-authored-by: sea-snake <sea-snake@outlook.com>

Author: aterga

.github/workflows/frontend-checks.yml

@@ -45,40 +45,3 @@ jobs:
             demos/vc_issuer/app/generated
           default_author: github_actions
           message: "🤖 npm run generate auto-update"
-
-  # Deploy the showcase to GitHub Pages
-  showcase:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: ./.github/actions/setup-node
-      - run: npm ci
-
-      # Build the showcase with a special base URL (used in links and esp. routing)
-      # to match the deploy URL: https://dfinity.github.io/internet-identity/
-      - run: npm run build:showcase -- --base '/internet-identity/'
-      - name: Setup Pages
-        uses: actions/configure-pages@v4
-      - name: Upload Pages artifact
-        uses: actions/upload-pages-artifact@v3
-        with:
-          path: "dist-showcase"
-
-  # Deploy the showcase to GitHub Pages
-  showcase-deploy:
-    runs-on: ubuntu-latest
-    needs: showcase
-    if: github.ref == 'refs/heads/main'
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-
-    # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
-    permissions:
-      pages: write
-      id-token: write
-
-    steps:
-      - name: Deploy to GitHub Pages
-        uses: actions/deploy-pages@v4
-        id: deployment

src/frontend/src/hooks.client.ts

@@ -42,7 +42,7 @@ const overrideFeatureFlags = () => {
 };
 
 export const init: ClientInit = async () => {
-  initGlobals();
+  await initGlobals();
   // Initialize them after globals so canister config can be used for defaults
   Object.values(featureFlags).forEach((flag) => flag.initialize());
   overrideFeatureFlags();

src/frontend/src/lib/generated/internet_identity_idl.js

@@ -47,6 +47,7 @@ export const idlFactory = ({ IDL }) => {
   const InternetIdentityInit = IDL.Record({
     'fetch_root_key' : IDL.Opt(IDL.Bool),
     'is_production' : IDL.Opt(IDL.Bool),
+    'backend_canister_id' : IDL.Opt(IDL.Principal),
     'enable_dapps_explorer' : IDL.Opt(IDL.Bool),
     'assigned_user_number_range' : IDL.Opt(IDL.Tuple(IDL.Nat64, IDL.Nat64)),
     'new_flow_origins' : IDL.Opt(IDL.Vec(IDL.Text)),
@@ -55,6 +56,7 @@ export const idlFactory = ({ IDL }) => {
     'analytics_config' : IDL.Opt(IDL.Opt(AnalyticsConfig)),
     'related_origins' : IDL.Opt(IDL.Vec(IDL.Text)),
     'openid_configs' : IDL.Opt(IDL.Vec(OpenIdConfig)),
+    'backend_origin' : IDL.Opt(IDL.Text),
     'captcha_config' : IDL.Opt(CaptchaConfig),
     'dummy_auth' : IDL.Opt(IDL.Opt(DummyAuthConfig)),
     'register_rate_limit' : IDL.Opt(RateLimitConfig),
@@ -370,26 +372,10 @@ export const idlFactory = ({ IDL }) => {
     'headers' : IDL.Vec(HeaderField),
     'certificate_version' : IDL.Opt(IDL.Nat16),
   });
-  const Token = IDL.Record({});
-  const StreamingCallbackHttpResponse = IDL.Record({
-    'token' : IDL.Opt(Token),
-    'body' : IDL.Vec(IDL.Nat8),
-  });
-  const StreamingStrategy = IDL.Variant({
-    'Callback' : IDL.Record({
-      'token' : Token,
-      'callback' : IDL.Func(
-          [Token],
-          [StreamingCallbackHttpResponse],
-          ['query'],
-        ),
-    }),
-  });
   const HttpResponse = IDL.Record({
     'body' : IDL.Vec(IDL.Nat8),
     'headers' : IDL.Vec(HeaderField),
     'upgrade' : IDL.Opt(IDL.Bool),
-    'streaming_strategy' : IDL.Opt(StreamingStrategy),
     'status_code' : IDL.Nat16,
   });
   const IdentityAuthnInfo = IDL.Record({
@@ -945,6 +931,7 @@ export const init = ({ IDL }) => {
   const InternetIdentityInit = IDL.Record({
     'fetch_root_key' : IDL.Opt(IDL.Bool),
     'is_production' : IDL.Opt(IDL.Bool),
+    'backend_canister_id' : IDL.Opt(IDL.Principal),
     'enable_dapps_explorer' : IDL.Opt(IDL.Bool),
     'assigned_user_number_range' : IDL.Opt(IDL.Tuple(IDL.Nat64, IDL.Nat64)),
     'new_flow_origins' : IDL.Opt(IDL.Vec(IDL.Text)),
@@ -953,6 +940,7 @@ export const init = ({ IDL }) => {
     'analytics_config' : IDL.Opt(IDL.Opt(AnalyticsConfig)),
     'related_origins' : IDL.Opt(IDL.Vec(IDL.Text)),
     'openid_configs' : IDL.Opt(IDL.Vec(OpenIdConfig)),
+    'backend_origin' : IDL.Opt(IDL.Text),
     'captcha_config' : IDL.Opt(CaptchaConfig),
     'dummy_auth' : IDL.Opt(IDL.Opt(DummyAuthConfig)),
     'register_rate_limit' : IDL.Opt(RateLimitConfig),

src/frontend/src/lib/generated/internet_identity_types.d.ts

@@ -520,7 +520,6 @@ export interface HttpResponse {
   'body' : Uint8Array | number[],
   'headers' : Array<HeaderField>,
   'upgrade' : [] | [boolean],
-  'streaming_strategy' : [] | [StreamingStrategy],
   'status_code' : number,
 }
 /**
@@ -695,6 +694,10 @@ export interface InternetIdentityInit {
    * For now, this is used only to show or hide the banner.
    */
   'is_production' : [] | [boolean],
+  /**
+   * Backend canister ID, needed for backward compatibility.
+   */
+  'backend_canister_id' : [] | [Principal],
   /**
    * Configuration to show dapps explorer or not
    */
@@ -734,6 +737,10 @@ export interface InternetIdentityInit {
    * Configurations for OpenID clients
    */
   'openid_configs' : [] | [Array<OpenIdConfig>],
+  /**
+   * Backend origin, needed to sync configuration with frontend.
+   */
+  'backend_origin' : [] | [string],
   /**
    * Configuration of the captcha in the registration flow.
    */

src/frontend/src/lib/globals.ts

@@ -1,7 +1,7 @@
 import { Principal } from "@icp-sdk/core/principal";
-import type {
-  _SERVICE,
-  InternetIdentityInit,
+import {
+  type _SERVICE,
+  type InternetIdentityInit,
 } from "$lib/generated/internet_identity_types";
 import { readCanisterConfig, readCanisterId } from "$lib/utils/init";
 import {
@@ -11,8 +11,12 @@ import {
   HttpAgentOptions,
 } from "@icp-sdk/core/agent";
 import { inferHost } from "$lib/utils/iiConnection";
-import { idlFactory as internet_identity_idl } from "$lib/generated/internet_identity_idl";
+import {
+  idlFactory as internet_identity_idl,
+  init as internet_identity_init,
+} from "$lib/generated/internet_identity_idl";
 import { features } from "$lib/legacy/features";
+import { IDL } from "@icp-sdk/core/candid";
 
 export let canisterId: Principal;
 export let canisterConfig: InternetIdentityInit;
@@ -24,9 +28,31 @@ export let parentIFrameOrigin: string | undefined;
 // Search param passed by parent window to indicate its origin to child window
 export const IFRAME_PARENT_PARAM = "parent_origin";
 
-export const initGlobals = () => {
+export const initGlobals = async () => {
   canisterId = Principal.fromText(readCanisterId());
-  canisterConfig = readCanisterConfig();
+  const frontendConfig = readCanisterConfig();
+
+  const backendOrigin = frontendConfig.backend_origin[0];
+
+  if (backendOrigin !== undefined) {
+    // Patch the canister config with the `openid_configs` field from the backend HTTPS response
+    const response = await fetch(`${backendOrigin}/.config.did.bin`);
+    const openidConfigCandid = await response.arrayBuffer();
+
+    const [{ openid_configs }] = IDL.decode(
+      [internet_identity_init({ IDL })[0]._type],
+      new Uint8Array(openidConfigCandid),
+    ) as unknown as [InternetIdentityInit];
+
+    canisterConfig = {
+      ...frontendConfig,
+      openid_configs,
+    };
+  } else {
+    // Legacy flow, when the frontend assets are from the one and only II canister
+    canisterConfig = frontendConfig;
+  }
+
   agentOptions = {
     host: inferHost(),
     shouldFetchRootKey:

src/frontend/src/lib/utils/domainUtils.test.ts

@@ -20,6 +20,8 @@ describe("isOfficialOrigin", () => {
     is_production: [],
     new_flow_origins: [],
     dummy_auth: [],
+    backend_canister_id: [],
+    backend_origin: [],
   });
 
   // Default related origins for most tests

src/frontend/src/lib/utils/iiConnection.test.ts

@@ -80,6 +80,8 @@ const DEFAULT_INIT: InternetIdentityInit = {
   is_production: [],
   new_flow_origins: [],
   dummy_auth: [],
+  backend_canister_id: [],
+  backend_origin: [],
 };
 
 vi.mock("$lib/globals", () => ({

src/frontend/src/lib/utils/isRegistrationAllowed.test.ts

@@ -20,6 +20,8 @@ describe("isRegistrationAllowed", () => {
       is_production: [],
       new_flow_origins: [],
       dummy_auth: [],
+      backend_canister_id: [],
+      backend_origin: [],
     };
   };
 

src/frontend/src/lib/utils/lastUsedIdentity.spec.ts

@@ -19,6 +19,8 @@ const mockInternetIdentityInit = (
   captcha_config: [],
   dummy_auth: [],
   register_rate_limit: [],
+  backend_canister_id: [],
+  backend_origin: [],
   ...overrides,
 });
 

src/frontend/src/routes/legacy/authorize/+page.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import Flow from "$lib/components/utils/Flow.svelte";
   import { Connection } from "$lib/utils/iiConnection";
-  import { readCanisterConfig, readCanisterId } from "$lib/utils/init";
   import { authFlowAuthorize } from "$lib/legacy/flows/authorize";
   import { analytics } from "$lib/utils/analytics/analytics";
   import { canisterConfig, canisterId } from "$lib/globals";