Added 'Simulate cross-tab token renew' in test app

[denysoblohin-okta]

Internal ref: https://oktainc.atlassian.net/browse/OKTA-456240
Added button 'Simulate cross-tab token renew' in test app that opens 20 iframes that tries to autorenew tokens simultaneously.
Practically system allows to run 15 simultaneous renew requests, next ones will result in HTTP 429.
See video

cross-tab-test-app.mov

[denysoblohin-okta]

Added config in UI for tabs count and cross-tab sync storage:

Improved output in iframes to show auth state and renew state (Wating for renew, Expired, Renewed, Updated from other tab) with colors:

[denysoblohin-okta]

Noticed the side effect after #1087: there can be situations during cross-tab token renewal when renew fails in one tab with HTTP 429 but can be retried successfully.
See screenshot above - AuthApiError / Expired / Not authenticated vs AuthApiError / Renewed / Authenticated. In second case there are 2 attempts to renew token.

Explanation:

In TokenManager.renew() HTTP 429 error (AuthApiError) is caught here:

okta-auth-js/lib/TokenManager.ts

Lines 425 to 427 in 4d8a7b9

	.catch(err => {
	// If renew fails, remove token from storage and emit error
	this.remove(key);

Expired token is removed from storage and triggers EVENT_REMOVED.

okta-auth-js/lib/TokenManager.ts

Lines 379 to 384 in 4d8a7b9

	var tokenStorage = this.storage.getStorage();
	var removedToken = tokenStorage[key];
	delete tokenStorage[key];
	this.storage.setStorage(tokenStorage);
	this.emitRemoved(key, removedToken);

AuthStateManager listens to this event and calls updateAuthState() here:

okta-auth-js/lib/AuthStateManager.ts

Lines 71 to 74 in 4d8a7b9

	sdk.tokenManager.on(EVENT_REMOVED, (key, token) => {
	this._setLogOptions({ event: EVENT_REMOVED, key, token });
	this.updateAuthState();
	});

In updateAuthState() call to isAuthenticated() will be performed:

okta-auth-js/lib/AuthStateManager.ts

Line 158 in 4d8a7b9

this._sdk.isAuthenticated()

In isAuthenticated() token can be renewed if autoRenew options is set:

okta-auth-js/lib/OktaAuth.ts

Lines 572 to 579 in 4d8a7b9

	let { accessToken, idToken } = this.tokenManager.getTokensSync();
	const { autoRenew, autoRemove } = this.tokenManager.getOptions();
	if (accessToken && this.tokenManager.hasExpired(accessToken)) {
	accessToken = undefined;
	if (autoRenew) {
	try {
	accessToken = await this.tokenManager.renew('accessToken') as AccessToken;

Note two things:

1. we are renewing accessToken and idToken with one API call (TokenManager.renew(key) calls sdk.token.renewTokens())
2. localStorage is shared across tabs

When TokenManager.renew() is called for idToken and renew fails, ID token is removed from storage - but it could be valid token just renewed from another tab, see (2), we don't check and compare actual token value we're removing.

During isAuthenticated() accessToken is checked first for expiration and renew can be triggered here because we've just removed ID token but not Access token, see (1)

Proposals?

• when removing token from storage, check that value is same (has not been updated from another tab)
• ignore autoRenew and autoRemove in isAuthenticated() if we caught error from renewTokens()