Skip to content

Demo app improvements. #9299

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Oct 7, 2025
+137 −26
Merged

Demo app improvements. #9299

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9a108ca
Demo app improvements.
mansisampat Oct 7, 2025
5fe9d5f
yarn run format
mansisampat Oct 7, 2025
7585b8a
review comments
mansisampat Oct 7, 2025
b0b2911
add unset RegionalAuth button
mansisampat Oct 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions packages/auth/demo/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -853,6 +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"
Expand Down
135 changes: 109 additions & 26 deletions packages/auth/demo/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,6 +229,12 @@ class TokenRefreshHandlerImpl {
}
}

class TokenRefreshHandlerFailureImpl {
refreshIdpToken() {
return Promise.reject(new Error('Simulated failure to refresh IDP token.'));
}
}

/**
* Refreshes the current user data in the UI, displaying a user info box if
* a user is signed in, or removing it.
Expand Down Expand Up @@ -1594,8 +1600,65 @@ async function exchangeCIAMToken(idpConfigId, token) {
return firebaseToken;
}

function onInitializeRegionalAuthClick() {
const tenantId = $('#tenant-id-input').val();
if (!tenantId) {
alertError('Please enter a Tenant ID.');
return;
}

try {
const tenantConfig = {
location: 'global',
tenantId: tenantId
};

const regionalApp = initializeApp(config, `${auth.name}-rgcip`);

regionalAuth = initializeAuth(regionalApp, {
persistence: indexedDBLocalPersistence,
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();
} else if (handlerType === 'failure') {
onSetFailureHandlerClick();
}
const firebaseTokenStatus = document.getElementById(
'firebase-token-status'
);
setTimeout(async () => {
const firebaseToken = await regionalAuth.getFirebaseAccessToken();
if (firebaseToken) {
firebaseTokenStatus.textContent =
'✅ Firebase token is set: ' + firebaseToken;
} else {
firebaseTokenStatus.textContent =
'No CIAM token found. User not logged in.';
}
console.log('firebaseToken after delay: ', firebaseToken);
}, 1000);
localStorage.setItem('regionalAuthTenantId', tenantId);
} catch (error) {
onAuthError(error);
}
}

function onExchangeToken(event) {
event.preventDefault();
if (!regionalAuth) {
onAuthError({
code: 'auth-not-initialized',
message:
'Regional Auth is not initialized. Please enter a Tenant ID and initialize.'
});
return;
}

const byoCiamInput = document.getElementById('byo-ciam-token');
const idpConfigId = document.getElementById('idp-config-id');
const firebaseTokenStatus = document.getElementById('firebase-token-status');
Expand All @@ -1610,7 +1673,44 @@ function onExchangeToken(event) {
.catch(error => {
(firebaseTokenStatus.textContent = 'Error exchanging token: '), error;
console.error('Error exchanging token:', error);
onAuthError(error);
});
}

function onSetSuccessfulHandlerClick() {
if (!regionalAuth) {
onAuthError({
code: 'auth-not-initialized',
message:
'Regional Auth is not initialized. Please enter a Tenant ID and initialize.'
});
return;
}

const tokenRefreshHandler = new TokenRefreshHandlerImpl();
regionalAuth.setTokenRefreshHandler(tokenRefreshHandler);
localStorage.setItem('tokenRefreshHandlerType', 'success');
$('#token-handler-status').text(
'✅ Token refresh handler is set to success.'
);
}

function onSetFailureHandlerClick() {
if (!regionalAuth) {
onAuthError({
code: 'auth-not-initialized',
message:
'Regional Auth is not initialized. Please enter a Tenant ID and initialize.'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see this is the same at multiple places, do you want to move it to a separate function called, validateRegionalAuth() ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

});
return;
}

const tokenRefreshHandler = new TokenRefreshHandlerFailureImpl();
regionalAuth.setTokenRefreshHandler(tokenRefreshHandler);
localStorage.setItem('tokenRefreshHandlerType', 'failure');
$('#token-handler-status').text(
'✅ Token refresh handler is set to failure.'
);
}

/**
Expand Down Expand Up @@ -2158,32 +2258,11 @@ function initApp() {
connectAuthEmulator(auth, AUTH_EMULATOR_URL);
}

let tenantConfig = {
'location': 'global',
'tenantId': 'Foo-e2e-tenant-001'
};
const regionalApp = initializeApp(config, `${auth.name}-rgcip`);

regionalAuth = initializeAuth(regionalApp, {
persistence: indexedDBLocalPersistence,
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) {
firebaseTokenStatus.textContent =
'✅ Firebase token is set: ' + firebaseToken;
} else {
firebaseTokenStatus.textContent =
'No CIAM token found. User not logged in.';
}
console.log('firebaseToken after delay: ', firebaseToken);
}, 1000);
const persistedTenantId = localStorage.getItem('regionalAuthTenantId');
if (persistedTenantId) {
$('#tenant-id-input').val(persistedTenantId);
onInitializeRegionalAuthClick();
}

tempApp = initializeApp(
{
Expand Down Expand Up @@ -2528,6 +2607,10 @@ function initApp() {

// Performs Exchange Token
$('#exchange-token').click(onExchangeToken);

$('#initialize-regional-auth-btn').click(onInitializeRegionalAuthClick);
$('#set-successful-handler-btn').click(onSetSuccessfulHandlerClick);
$('#set-failure-handler-btn').click(onSetFailureHandlerClick);
}

$(initApp);
Loading