fix: concurrent credential storage errors by preventing unnecessary state updates (#1302)

Author: subhankarmaiti

src/core/utils/deepEqual.ts

@@ -0,0 +1,21 @@
+export function deepEqual<T>(x: T, y: T): boolean {
+  if (x === y) {
+    return true;
+  } else if (
+    typeof x == 'object' &&
+    x != null &&
+    typeof y == 'object' &&
+    y != null
+  ) {
+    if (Object.keys(x).length != Object.keys(y).length) return false;
+
+    for (const prop in x) {
+      if (Object.prototype.hasOwnProperty.call(y, prop)) {
+        if (!deepEqual(x[prop], y[prop])) return false;
+      } else return false;
+    }
+    return true;
+  } else {
+    return false;
+  }
+}

src/hooks/Auth0Provider.tsx

@@ -146,21 +146,31 @@ export const Auth0Provider = ({
   );
 
   const getCredentials = useCallback(
-    (
+    async (
       scope?: string,
       minTtl?: number,
       parameters?: Record<string, unknown>,
       forceRefresh?: boolean
-    ) =>
-      loginFlow(
-        client.credentialsManager.getCredentials(
+    ) => {
+      try {
+        const credentials = await client.credentialsManager.getCredentials(
           scope,
           minTtl,
           parameters,
           forceRefresh
-        )
-      ),
-    [client, loginFlow]
+        );
+        if (credentials.idToken) {
+          const user = Auth0User.fromIdToken(credentials.idToken);
+          dispatch({ type: 'SET_USER', user });
+        }
+        return credentials;
+      } catch (e) {
+        const error = e as AuthError;
+        dispatch({ type: 'ERROR', error });
+        throw error;
+      }
+    },
+    [client]
   );
 
   const hasValidCredentials = useCallback(

src/hooks/reducer.ts

@@ -1,5 +1,6 @@
 import type { User } from '../types';
 import type { AuthError } from '../core/models';
+import { deepEqual } from '../core/utils/deepEqual';
 
 /**
  * The shape of the authentication state managed by the Auth0Provider.
@@ -18,7 +19,8 @@ export type AuthAction =
   | { type: 'LOGIN_COMPLETE'; user: User }
   | { type: 'LOGOUT_COMPLETE' }
   | { type: 'ERROR'; error: AuthError }
-  | { type: 'INITIALIZED'; user: User | null };
+  | { type: 'INITIALIZED'; user: User | null }
+  | { type: 'SET_USER'; user: User | null };
 
 /**
  * A pure function that calculates the new state based on the previous state and a dispatched action.
@@ -34,5 +36,10 @@ export const reducer = (state: AuthState, action: AuthAction): AuthState => {
       return { ...state, isLoading: false, error: action.error };
     case 'INITIALIZED':
       return { ...state, isLoading: false, user: action.user };
+    case 'SET_USER':
+      if (deepEqual(state.user, action.user)) {
+        return state;
+      }
+      return { ...state, user: action.user };
   }
 };