Minor changes to Refresh token

Author: mansisampat

packages/auth/demo/public/index.html

@@ -853,6 +853,7 @@
             </div>
             <div class="tab-pane" id="tab-byo-ciam-content">
               <h2>Sign in with your CIAM token</h2>
+              <div id="firebase-token-status">No CIAM token found. User not logged in.</div>
               <input type="text" id="byo-ciam-token"
                      class="form-control" placeholder="Enter CIAM token" />
               <button class="btn btn-block btn-primary"

packages/auth/demo/src/index.js

@@ -149,14 +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.
+   */
   refreshToken() {
-    log("inside here");
-    console.log("inside handler");
-    return;
+    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.
@@ -1528,16 +1627,17 @@ async function exchangeCIAMToken(token) {
 function onExchangeToken(event) {
   event.preventDefault();
   const byoCiamInput = document.getElementById('byo-ciam-token');
-  const byoCiamResult = document.getElementById('byo-ciam-result');
+  const firebaseTokenStatus = document.getElementById('firebase-token-status');
 
-  byoCiamResult.textContent = 'Exchanging token...';
+  firebaseTokenStatus.textContent = 'Exchanging token...';
 
   exchangeCIAMToken(byoCiamInput.value)
     .then(response => {
-      byoCiamResult.textContent = response;
+      firebaseTokenStatus.textContent = '✅ Firebase token is set: ' + response;
       console.log('Token:', response);
     })
     .catch(error => {
+      (firebaseTokenStatus.textContent = 'Error exchanging token: '), error;
       console.error('Error exchanging token:', error);
     });
 }
@@ -2101,6 +2201,19 @@ function initApp() {
   const tokenRefreshHandler = new TokenRefreshHandlerImpl(); 
   regionalAuth.setTokenRefreshHandler(tokenRefreshHandler);
 
+  const firebaseTokenStatus = document.getElementById('firebase-token-status');
+  setTimeout(() => {
+    if (regionalAuth.firebaseToken) {
+      firebaseTokenStatus.textContent =
+        '✅ Firebase token is set: ' + regionalAuth.firebaseToken.token;
+    } else {
+      firebaseTokenStatus.textContent =
+        'No CIAM token found. User not logged in.';
+    }
+    console.log('firebaseToken after delay: ', regionalAuth.firebaseToken);
+  }, 1000);
+
+
   tempApp = initializeApp(
     {
       apiKey: config.apiKey,

packages/auth/src/core/auth/auth_impl.ts

@@ -38,7 +38,9 @@ import {
   Unsubscribe,
   PasswordValidationStatus,
   TenantConfig,
-  FirebaseToken
+  FirebaseToken,
+  TokenRefreshHandler,
+  RefreshIdpTokenResult
 } from '../../model/public_types';
 import {
   createSubscribe,
@@ -49,7 +51,7 @@ import {
   Subscribe
 } from '@firebase/util';
 
-import { AuthInternal, ConfigInternal, TokenRefreshHandler } from '../../model/auth';
+import { AuthInternal, ConfigInternal} from '../../model/auth';
 import { PopupRedirectResolverInternal } from '../../model/popup_redirect';
 import { UserInternal } from '../../model/user';
 import {
@@ -85,14 +87,15 @@ import { PasswordPolicyInternal } from '../../model/password_policy';
 import { PasswordPolicyImpl } from './password_policy_impl';
 import { getAccountInfo } from '../../api/account_management/account';
 import { UserImpl } from '../user/user_impl';
+import { exchangeToken } from '../strategies/exhange_token';
 
 interface AsyncAction {
   (): Promise<void>;
 }
 
 export const enum DefaultConfig {
   TOKEN_API_HOST = 'securetoken.googleapis.com',
-  API_HOST = 'identitytoolkit.googleapis.com',
+  API_HOST = 'staging-identitytoolkit.sandbox.googleapis.com',
   API_SCHEME = 'https',
   // TODO(sammansi): Update the endpoint before BYO-CIAM Private Preview Release.
   REGIONAL_API_HOST = 'autopush-identityplatform.sandbox.googleapis.com/v2alpha/'
@@ -102,7 +105,7 @@ export class AuthImpl implements AuthInternal, _FirebaseService {
   currentUser: User | null = null;
   emulatorConfig: EmulatorConfig | null = null;
   firebaseToken: FirebaseToken | null = null;
-  tokenRefreshHandler?: TokenRefreshHandler;
+  private tokenRefreshHandler?: TokenRefreshHandler;
   private operations = Promise.resolve();
   private persistenceManager?: PersistenceUserManager;
   private redirectPersistenceManager?: PersistenceUserManager;
@@ -236,7 +239,9 @@ export class AuthImpl implements AuthInternal, _FirebaseService {
         await this._updateFirebaseToken(null);
         // Awaits for the callback method to execute. The callback method
         // is responsible for performing the exchangeToken(auth, valid3pIdpToken)
-        await this.tokenRefreshHandler.refreshToken();
+        const result: RefreshIdpTokenResult = await this.tokenRefreshHandler.refreshIdpToken();
+        _assert(result.idToken && result.idpConfigId, AuthErrorCode.INVALID_CREDENTIAL);
+        await exchangeToken(this, result.idpConfigId, result.idToken);
         return this.getFirebaseAccessToken(false);
       }
 

packages/auth/src/core/auth/firebase_internal.ts

@@ -58,7 +58,7 @@ export class AuthInterop implements FirebaseAuthInternal {
           'Refresh token is not a valid operation for Regional Auth instance initialized.'
         );
       }
-      const firebaseAccessToken = (await this.auth.getFirebaseAccessToken())?.token
+      const firebaseAccessToken = (await this.auth.getFirebaseAccessToken())?.token;
       if (!firebaseAccessToken) {
         return null;
       }

packages/auth/src/model/auth.ts

@@ -58,10 +58,6 @@ export interface ConfigInternal extends Config {
   clientPlatform: ClientPlatform;
 }
 
-export interface TokenRefreshHandler {
-  refreshToken(): void | Promise<void>
-}
-
 /**
  * UserInternal and AuthInternal reference each other, so both of them are included in the public typings.
  * In order to exclude them, we mark them as internal explicitly.
@@ -71,7 +67,6 @@ export interface TokenRefreshHandler {
 export interface AuthInternal extends Auth {
   currentUser: User | null;
   emulatorConfig: EmulatorConfig | null;
-  tokenRefreshHandler?: TokenRefreshHandler;
   _agentRecaptchaConfig: RecaptchaConfig | null;
   _tenantRecaptchaConfigs: Record<string, RecaptchaConfig>;
   _projectPasswordPolicy: PasswordPolicy | null;

packages/auth/src/model/public_types.ts

@@ -210,6 +210,7 @@ export interface Auth {
    * @param persistence - The {@link Persistence} to use.
    */
   setPersistence(persistence: Persistence): Promise<void>;
+  setTokenRefreshHandler(tokenRefreshHandler: TokenRefreshHandler): void;
   /**
    * The {@link Auth} instance's language code.
    *
@@ -360,6 +361,14 @@ export interface Persistence {
   readonly type: 'SESSION' | 'LOCAL' | 'NONE' | 'COOKIE';
 }
 
+export interface TokenRefreshHandler {
+  refreshIdpToken(): Promise<RefreshIdpTokenResult>
+}
+export interface RefreshIdpTokenResult {
+  idpConfigId: string;
+  idToken: string;
+} 
+
 /**
  * Interface representing ID token result obtained from {@link User.getIdTokenResult}.
  *