demo app

Author: mansisampat

packages/auth/demo/src/index.js

@@ -149,6 +149,113 @@ async function getActiveUserBlocking() {
   }
 }
 
+class RefreshIdpTokenResult {
+    idpConfigId;
+    idToken;
+}
+
+class TokenRefreshHandlerImpl {
+  /**
+   * Opens a popup to get a 3P ID token and Config ID from the user.
+   * @returns {Promise<RefreshIdpTokenResult>} A promise that resolves with the result object.
+   */
+  refreshIdpToken() {
+    log('inside here');
+    console.log('inside handler - opening popup for 3p token');
+
+    // This function handles the popup logic and returns the required object
+    return this.promptForTokenAndConfigId();
+  }
+
+  /**
+   * Opens a Bootstrap modal to ask the user for an ID token and IDP Config ID.
+   *
+   * This function dynamically creates a modal, shows it, and waits for
+   * user input. It returns a Promise that resolves or rejects based
+   * on the user's action.
+   *
+   * @returns {Promise<RefreshIdpTokenResult>} A promise that resolves with the
+   * RefreshIdpTokenResult object, or rejects if the user cancels.
+   */
+  promptForTokenAndConfigId() {
+    // We return a Promise that will be resolved/rejected by the modal's buttons
+    return new Promise((resolve, reject) => {
+      // A flag to track if the promise has been settled
+      let isSubmitted = false;
+      const modalId = 'third-party-token-modal';
+
+      // 1. Define Modal HTML with two input fields
+      const modalHtml = `
+        <div class="modal fade" id="${modalId}" tabindex="-1" role="dialog" aria-labelledby="tokenModalLabel">
+          <div class="modal-dialog" role="document">
+            <div class="modal-content">
+              <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                  <span aria-hidden="true">&times;</span>
+                </button>
+                <h4 class="modal-title" id="tokenModalLabel">Enter 3P Token Details</h4>
+              </div>
+              <div class="modal-body">
+                <p>Please enter the third-party token details:</p>
+                <div class="form-group">
+                  <label for="idp-config-id-input-field">IDP Config ID</label>
+                  <input type="text" class="form-control" id="idp-config-id-input-field" placeholder="eg: idp.example.com">
+                </div>
+                <div class="form-group">
+                  <label for="id-token-input-field">ID Token</label>
+                  <input type="text" class="form-control" id="id-token-input-field" placeholder="Paste ID Token here">
+                </div>
+              </div>
+              <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+                <button type="button" class="btn btn-primary" id="token-submit-btn">Submit</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      `;
+
+      // 2. Append modal to body and get a jQuery reference
+      $('body').append(modalHtml);
+      const $modal = $(`#${modalId}`);
+
+      // 3. Setup Event Handlers
+      
+      // Handle Submit button click
+      $modal.find('#token-submit-btn').on('click', () => {
+        isSubmitted = true;
+        
+        // Read values from *both* input fields
+        const configId = $modal.find('#idp-config-id-input-field').val();
+        const token = $modal.find('#id-token-input-field').val();
+
+        $modal.modal('hide'); // Hide the modal
+
+        // Create the result object as requested
+        const result = new RefreshIdpTokenResult();
+        result.idpConfigId = configId;
+        result.idToken = token;
+        
+        resolve(result); // Resolve the promise with the object
+      });
+
+      // Handle modal being closed (by 'x', 'Cancel' button, backdrop click, or ESC)
+      $modal.on('hidden.bs.modal', () => {
+        $modal.remove(); // Clean up the modal from the DOM
+        
+        // If the modal was hidden *without* submitting, reject the promise
+        if (!isSubmitted) {
+          reject(new Error('User cancelled token input.'));
+        }
+      });
+
+      // 4. Show the modal
+      $modal.modal('show');
+    });
+  }
+}
+
+
 /**
  * Refreshes the current user data in the UI, displaying a user info box if
  * a user is signed in, or removing it.
@@ -1305,7 +1412,6 @@ function onRefreshToken() {
 function onSignOut() {
   setLastUser(auth.currentUser);
   auth.signOut().then(signOut, onAuthError);
-  regionalAuth.signOut();
 }
 
 /**
@@ -2092,20 +2198,22 @@ function initApp() {
     popupRedirectResolver: browserPopupRedirectResolver,
     tenantConfig: tenantConfig
   });
+  const tokenRefreshHandler = new TokenRefreshHandlerImpl(); 
+  regionalAuth.setTokenRefreshHandler(tokenRefreshHandler);
 
   const firebaseTokenStatus = document.getElementById('firebase-token-status');
-  setTimeout(async () => {
-    const firebaseToken = await regionalAuth.getFirebaseAccessToken();
-    if (firebaseToken) {
+  setTimeout(() => {
+    if (regionalAuth.firebaseToken) {
       firebaseTokenStatus.textContent =
-        '✅ Firebase token is set: ' + firebaseToken;
+        '✅ Firebase token is set: ' + regionalAuth.firebaseToken.token;
     } else {
       firebaseTokenStatus.textContent =
         'No CIAM token found. User not logged in.';
     }
-    console.log('firebaseToken after delay: ', firebaseToken);
+    console.log('firebaseToken after delay: ', regionalAuth.firebaseToken);
   }, 1000);
 
+
   tempApp = initializeApp(
     {
       apiKey: config.apiKey,