Demo App changes

Author: mansisampat

packages/auth/demo/public/index.html

@@ -170,6 +170,13 @@
                 Action Code Settings
               </a>
             </li>
+            <li role="presentation">
+              <a href="#tab-byo-ciam-content"
+                 aria-controls="tab-byo-ciam-content"
+                 data-toggle="tab" role="tab">
+                BYO-CIAM methods
+              </a>
+            </li>
             <li role="presentation" class="visible-xs">
               <a href="#logs-section"
                  aria-controls="logs-section"
@@ -844,6 +851,16 @@
                         id="action-code-settings-reset">Reset</button>
               </form>
             </div>
+            <div class="tab-pane" id="tab-byo-ciam-content">
+              <h2>Sign in with your CIAM token</h2>
+              <input type="text" id="byo-ciam-token"
+                     class="form-control" placeholder="Enter CIAM token" />
+              <button class="btn btn-block btn-primary"
+                  id="exchange-token">
+                Exchange Token
+              </button>
+              <pre id="byo-ciam-result"></pre>
+            </div>
             <div class="tab-pane" id="logs-section">
               <pre class="well logs"></pre>
               <button class="btn btn-xs btn-default pull-right clear-logs">

packages/auth/demo/src/index.js

@@ -74,7 +74,8 @@ import {
   connectAuthEmulator,
   initializeRecaptchaConfig,
   validatePassword,
-  revokeAccessToken
+  revokeAccessToken,
+  exchangeToken
 } from '@firebase/auth';
 
 import { config } from './config';
@@ -95,6 +96,7 @@ const AUTH_EMULATOR_URL = 'http://localhost:9099';
 
 let app = null;
 let auth = null;
+let regionalAuth = null;
 let currentTab = null;
 let lastUser = null;
 let applicationVerifier = null;
@@ -1506,6 +1508,24 @@ function onFinalizeSignInWithTotpMultiFactor(event) {
   }, onAuthError);
 }
 
+function onExchangeToken(event) {
+  event.preventDefault();
+  const byoCiamInput = document.getElementById("byo-ciam-token");
+  const byoCiamSubmit = document.getElementById("byo-ciam-submit");
+  const byoCiamResult = document.getElementById("byo-ciam-result");
+
+  byoCiamResult.textContent = "Exchanging token...";
+
+  exchangeCIAMToken(byoCiamInput.value)
+  .then((response) => {
+    byoCiamResult.textContent = response.accessToken;
+    console.log("Token:", response);
+  })
+  .catch((error) => {
+    console.error("Error exchanging token:", error);
+  });
+}
+
 /**
  * Adds a new row to insert an OAuth custom parameter key/value pair.
  * @param {!jQuery.Event} _event The jQuery event object.
@@ -1795,6 +1815,14 @@ function revokeAppleTokenAndDeleteUser() {
   });
 }
 
+async function exchangeCIAMToken(token) {
+  const firebaseToken = await exchangeToken(
+    regaionalAuth,
+    idpConfigId = "Bar-e2e-idpconfig-002",
+    token)
+  return firebaseToken;
+}
+
 /**
  * Gets a specific query parameter from the current URL.
  * @param {string} name Name of the parameter.
@@ -2047,6 +2075,20 @@ function initApp() {
   log('Initializing app...');
   app = initializeApp(config);
   auth = getAuth(app);
+  let tenantConfig = {
+    "location": "global",
+    "tenantId": "Foo-e2e-tenant-001"
+  };
+  const regionalApp = initializeApp(
+    config,
+    `${auth.name}-rgcip`
+  );
+
+  regaionalAuth = initializeAuth(regionalApp, {
+    persistence: inMemoryPersistence,
+    popupRedirectResolver: browserPopupRedirectResolver,
+    tenantConfig: tenantConfig
+  });
   if (USE_AUTH_EMULATOR) {
     connectAuthEmulator(auth, AUTH_EMULATOR_URL);
   }
@@ -2379,6 +2421,10 @@ function initApp() {
     onFinalizeSignInWithTotpMultiFactor
   );
 
+  $('#exchange-token').click(
+    onExchangeToken
+  );
+
   // Starts multi-factor enrollment with phone number.
   $('#enroll-mfa-verify-phone-number').click(onStartEnrollWithPhoneMultiFactor);
   // Completes multi-factor enrollment with supplied SMS code.