fix: refactor getAccessToken to prevent async issues

packages/auth-provider/bundlesize.config.js

@@ -9,7 +9,7 @@ export default {
 		 */
 		{
 			path: "dist/index.js",
-			limit: "10 kb",
+			limit: "11 kb",
 		},
 	],
 };

packages/auth-provider/src/common/utilities.ts

@@ -216,3 +216,87 @@ export const getAccessTokenSilently = async ({
 		};
 	}
 };
+
+type RefreshTokenResponse = {
+	status: "success" | "failure";
+	newAccessToken?: string;
+	newRefreshToken?: string;
+};
+type RefreshTokenProps = {
+	clientId: string;
+	userId: string;
+	nonce: string;
+};
+export class TokenManager {
+	private refreshTokenPromise: Promise<any> | null = null;
+	private accessToken: string;
+	private refreshToken: string;
+
+	constructor(
+		accessToken: string | null = null,
+		refreshToken: string | null = null,
+	) {
+		this.accessToken = accessToken || "";
+		this.refreshToken = refreshToken || "";
+	}
+
+	async refreshtoken({
+		clientId,
+		userId,
+		nonce,
+	}: RefreshTokenProps): Promise<RefreshTokenResponse> {
+		if (!this.refreshTokenPromise) {
+			// No existing refresh in progress, start a new one
+			this.refreshTokenPromise = this._refreshToken({
+				clientId,
+				userId,
+				nonce,
+			});
+		}
+
+		try {
+			// Wait for the existing refresh or start a new one
+			return await this.refreshTokenPromise;
+		} finally {
+			// Clear the promise to allow subsequent calls
+			this.refreshTokenPromise = null;
+		}
+	}
+
+	private async _refreshToken({
+		clientId,
+		userId,
+		nonce,
+	}: RefreshTokenProps): Promise<RefreshTokenResponse> {
+		const jwtRefresh = await verifyAndExtractToken(this.refreshToken);
+		if (jwtRefresh && jwtRefresh.payload[JWT.USER_ID_KEY] !== "") {
+			// Refresh token is valid, refreshing access token...
+			const response = await getAccessTokenSilently({
+				clientId,
+				userId,
+				nonce,
+				refreshToken: this.refreshToken,
+				accessToken: this.accessToken,
+			});
+			if (response.status) {
+				this.accessToken = response.accessToken;
+				this.refreshToken = response.refreshToken;
+				return {
+					status: "success",
+					newAccessToken: response.accessToken,
+					newRefreshToken: response.refreshToken,
+				};
+			} else {
+				// Access token could not be refreshed, re-authenticate the user...
+				return {
+					status: "failure",
+				};
+			}
+		} else {
+			// Refresh token is not valid, re-authenticate the user...
+			return {
+				status: "failure",
+			};
+		}
+	}
+}

packages/auth-provider/src/components/AuthProvider/AuthProvider.tsx

@@ -21,8 +21,8 @@ import type {
 	LoginType,
 } from "../../common/types";
 import {
+	TokenManager,
 	authenticateUser,
-	getAccessTokenSilently,
 	getPreAuthCode,
 	logoutUser,
 } from "../../common/utilities";
@@ -47,6 +47,7 @@ export const AuthProvider = ({
 	const [nonce, setNonce, , removeNonce] = useLocalStorage({
 		key: `${LOCAL_STORAGE_PREFIX}::${clientId}::@@nonce@@`,
 	});
+	const tokenManager = new TokenManager(accessToken, refreshToken);
 
 	const [authState, setAuthState] = useState<AuthState>({
 		isLoading: true,
@@ -216,22 +217,15 @@ export const AuthProvider = ({
 				 * accessToken is not valid, so we need to try to refresh it using the
 				 * refreshToken - this is a silent refresh.
 				 */
-				const jwtRefresh = await verifyAndExtractToken(refreshToken);
-				if (jwtRefresh && jwtRefresh.payload[JWT.USER_ID_KEY] !== "") {
-					const response = await getAccessTokenSilently({
-						clientId,
-						userId: user.userId as string,
-						nonce,
-						refreshToken,
-						accessToken,
-					});
-					if (response.status) {
-						setAccessToken(response.accessToken);
-						setRefreshToken(response.refreshToken);
-						return response.accessToken;
-					}
-					removeStateAndLocalStorage(ACCESS_TOKEN_ERROR);
-					return "";
+				const res = await tokenManager.refreshtoken({
+					clientId,
+					userId: user.userId as string,
+					nonce,
+				});
+				if (res.status) {
+					setAccessToken(res.newAccessToken);
+					setRefreshToken(res.newRefreshToken);
+					return res.newAccessToken;
 				}
 				/**
 				 * refreshToken is not valid, so we need to re-authenticate the user.