Merge pull request #283 from brionmario/fix-react-240

Retry the initialisation incase if the config data is not saved in the storage

Author: brionmario

lib/package.json

@@ -44,7 +44,7 @@
         "LICENSE"
     ],
     "dependencies": {
-        "@asgardeo/auth-spa": "^3.1.4"
+        "@asgardeo/auth-spa": "^3.1.5"
     },
     "devDependencies": {
         "@babel/cli": "^7.19.3",

lib/src/api.ts

@@ -63,8 +63,17 @@ class AuthAPI {
      *
      * @param {Config} config - `dispatch` function from React Auth Context.
      */
-    public init(config: AuthClientConfig<Config>): Promise<boolean> {
-        return this._client.initialize(config);
+    public async init(config: AuthClientConfig<Config>): Promise<boolean> {
+        return await this._client.initialize(config);
+    }
+
+    /**
+     * Method to get the configuration data.
+     *
+     * @returns {Promise<AuthClientConfig<Config>>} - A promise that resolves with the configuration data. 
+     */
+    public async getConfigData(): Promise<AuthClientConfig<Config>> {
+        return await this._client.getConfigData();
     }
 
     /**

lib/src/authenticate.tsx

@@ -76,7 +76,7 @@ const AuthProvider: FunctionComponent<PropsWithChildren<AuthProviderPropsInterfa
     const [ state, dispatch ] = useState<AuthStateInterface>(AuthClient.getState());
     const [ initialized, setInitialized ] = useState(false);
 
-    const config = useMemo(
+    const mergedConfig = useMemo(
         (): AuthReactConfig => ({ ...defaultConfig, ...passedConfig }), [ passedConfig ]
     );
 
@@ -90,6 +90,16 @@ const AuthProvider: FunctionComponent<PropsWithChildren<AuthProviderPropsInterfa
             params: Record<string, unknown>
         }
     ): Promise<BasicUserInfo> => {
+        const _config = await AuthClient.getConfigData();
+
+        // NOTE: With React 19 strict mode, the initialization logic runs twice, and there's an intermittent
+        // issue where the config object is not getting stored in the storage layer with Vite scaffolding.
+        // Hence, we need to check if the client is initialized but the config object is empty, and reinitialize.
+        // Tracker: https://github.com/asgardeo/asgardeo-auth-react-sdk/issues/240
+        if (!_config || Object.keys(_config).length === 0) {
+            await AuthClient.init(mergedConfig);
+        }
+
         try {
             setError(null);
             return await AuthClient.signIn(
@@ -147,12 +157,12 @@ const AuthProvider: FunctionComponent<PropsWithChildren<AuthProviderPropsInterfa
         if (state.isAuthenticated) {
             return;
         }
+
         (async () => {
-            setInitialized(await AuthClient.init(config));
+            setInitialized(await AuthClient.init(mergedConfig));
             checkIsAuthenticated();
         })();
-
-    }, [ config ]);
+    }, [ mergedConfig ]);
 
     /**
      * Try signing in when the component is mounted.
@@ -189,19 +199,21 @@ const AuthProvider: FunctionComponent<PropsWithChildren<AuthProviderPropsInterfa
 
             // If `skipRedirectCallback` is not true, check if the URL has `code` and `session_state` params.
             // If so, initiate the sign in.
-            if (!config.skipRedirectCallback) {
+            if (!mergedConfig.skipRedirectCallback) {
                 let authParams: AuthParams = null;
                 if (getAuthParams && typeof getAuthParams === "function") {
                     authParams = await getAuthParams();
                 }
 
                 const url = new URL(location.href);
 
-                if ((SPAUtils.hasAuthSearchParamsInURL()
-                    && new URL(url.origin + url.pathname).toString() === new URL(config?.signInRedirectURL).toString())
-                    || authParams?.authorizationCode
-                    || url.searchParams.get("error") )
-                {
+                if (
+                    (SPAUtils.hasAuthSearchParamsInURL() &&
+                      new URL(url.origin + url.pathname).toString() ===
+                        new URL(mergedConfig?.signInRedirectURL).toString()) ||
+                    authParams?.authorizationCode ||
+                    url.searchParams.get("error")
+                ) {
                     try{
                         await signIn(
                             { callOnlyOnRedirect: true }, 
@@ -222,11 +234,11 @@ const AuthProvider: FunctionComponent<PropsWithChildren<AuthProviderPropsInterfa
                 return;
             }
 
-            if (!config.disableAutoSignIn && await AuthClient.isSessionActive()) {
+            if (!mergedConfig.disableAutoSignIn && await AuthClient.isSessionActive()) {
                 signIn();
             }  
 
-            if (config.disableTrySignInSilently || isSignedOut) {
+            if (mergedConfig.disableTrySignInSilently || isSignedOut) {
                 dispatch({ ...state, isLoading: false });
 
                 return;
@@ -249,7 +261,7 @@ const AuthProvider: FunctionComponent<PropsWithChildren<AuthProviderPropsInterfa
                 });
         })();
 
-    }, [ config ]);
+    }, [ mergedConfig ]);
 
     /**
      * Check if the user is authenticated and update the state.isAuthenticated value.
@@ -291,6 +303,7 @@ const AuthProvider: FunctionComponent<PropsWithChildren<AuthProviderPropsInterfa
                 value={ {
                     disableHttpHandler,
                     enableHttpHandler,
+                    error,
                     getAccessToken,
                     getBasicUserInfo,
                     getDecodedIDPIDToken,
@@ -309,8 +322,7 @@ const AuthProvider: FunctionComponent<PropsWithChildren<AuthProviderPropsInterfa
                     signOut,
                     state,
                     trySignInSilently,
-                    updateConfig,
-                    error
+                    updateConfig
                 } }
             >
                 { initialized ? children : fallback ?? null }

yarn.lock

@@ -15,10 +15,10 @@
   resolved "https://registry.yarnpkg.com/@asgardeo/auth-js/-/auth-js-5.1.1.tgz#aa7454224a3dd45fc85add3eb4d32229f30232d1"
   integrity sha512-yIgBKvHbt9ENczm2n3FGPET/Xf0I9H+Jm6oMXb8ClB/5m5qygHLoF3bsiDlzNuw3wuz8RH8F+waRudVI+IoLtQ==
 
-"@asgardeo/auth-spa@^3.1.4":
-  version "3.1.4"
-  resolved "https://registry.yarnpkg.com/@asgardeo/auth-spa/-/auth-spa-3.1.4.tgz#0fc5c7d3484be43c0273d1a6a2cedbdaa7036400"
-  integrity sha512-ToDPbwNUY7hOK+vQbZWILe1n1gCxs6s+qZAUCjR0SmAEzf72rFHN6wv0Xg4e91MI8pb4xVJ3JmtJhDX4To8Tog==
+"@asgardeo/auth-spa@^3.1.5":
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/@asgardeo/auth-spa/-/auth-spa-3.1.5.tgz#d6a2c9e46b8fec7e26bd543803f6afd28936a25c"
+  integrity sha512-LoQA96oFQ7wegN9RoeYrhUsdxDPGcC8ys6drA5XstrupsM1tQ1698Dsfx4Pt22AEpiw4JwWoITZpIEVJzd4FvA==
   dependencies:
     "@asgardeo/auth-js" "^5.1.1"
     await-semaphore "^0.1.3"