Demo app improvements

Author: mansisampat

packages/auth/demo/public/index.html

@@ -853,15 +853,26 @@
             </div>
             <div class="tab-pane" id="tab-byo-ciam-content">
               <h2>Sign in with your CIAM token</h2>
+
+              <!-- Initialize Regional Auth -->
+              <div class="group">Initialize Regional Auth</div>
               <div class="form-group">
                 <label for="tenant-id-input">Tenant ID</label>
                 <input type="text" class="form-control" id="tenant-id-input" placeholder="Enter Tenant ID">
               </div>
               <button class="btn btn-primary" id="initialize-regional-auth-btn">Initialize Regional Auth</button>
+              <div id="regional-auth-status"></div>
               <hr>
+
+              <!-- Set Token Refresh Handler -->
+              <div class="group">Set Token Refresh Handler</div>
               <button class="btn btn-success" id="set-successful-handler-btn">Set Token Refresh Handler (Success)</button>
               <button class="btn btn-danger" id="set-failure-handler-btn">Set Token Refresh Handler (Failure)</button>
+              <div id="token-handler-status"></div>
               <hr>
+
+              <!-- Exchange Token -->
+              <div class="group">Exchange Token</div>
               <div id="firebase-token-status">No CIAM token found. User not logged in.</div>
               <input type="text" id="idp-config-id" class="form-control" placeholder="IDP Config ID" />
               <input type="text" id="byo-ciam-token"

packages/auth/demo/src/index.js

@@ -1620,6 +1620,8 @@ function onInitializeRegionalAuthClick() {
       popupRedirectResolver: browserPopupRedirectResolver,
       tenantConfig: tenantConfig
     });
+    $('#regional-auth-status').text('✅ regionalAuth is initialized');
+    $('#token-handler-status').text('Token refresh handler is not set.');
     const handlerType = localStorage.getItem('tokenRefreshHandlerType');
     if (handlerType === 'success') {
       onSetSuccessfulHandlerClick();
@@ -1688,6 +1690,7 @@ function onSetSuccessfulHandlerClick() {
   const tokenRefreshHandler = new TokenRefreshHandlerImpl();
   regionalAuth.setTokenRefreshHandler(tokenRefreshHandler);
   localStorage.setItem('tokenRefreshHandlerType', 'success');
+  $('#token-handler-status').text('✅ Token refresh handler is set to success.');
 }
 
 function onSetFailureHandlerClick() {
@@ -1703,6 +1706,7 @@ function onSetFailureHandlerClick() {
   const tokenRefreshHandler = new TokenRefreshHandlerFailureImpl();
   regionalAuth.setTokenRefreshHandler(tokenRefreshHandler);
   localStorage.setItem('tokenRefreshHandlerType', 'failure');
+  $('#token-handler-status').text('✅ Token refresh handler is set to failure.');
 }
 
 /**