@asgardeo/auth-react 1.1.15 → 1.1.18

package/dist/src/authenticate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"authenticate.d.ts","sourceRoot":"","sources":["../../src/authenticate.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAEH,iBAAiB,EAQpB,MAAM,oBAAoB,CAAC;AAE5B,OAAc,EACV,iBAAiB,EACjB,iBAAiB,EACjB,SAAS,EAMZ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,UAAU,EAAe,MAAM,GAAG,CAAC;AAE5C,OAAO,EAAE,oBAAoB,EAAE,eAAe,EAAsB,MAAM,UAAU,CAAC;AAcrF,UAAU,0BAA0B;IAChC,MAAM,EAAE,eAAe,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC,UAAU,CAAC,CAAC;IAC1C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAED,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,0BAA0B,CAAC,CAkMlF,CAAC;AAEF,QAAA,MAAM,cAAc,QAAO,oBAE1B,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"authenticate.d.ts","sourceRoot":"","sources":["../../src/authenticate.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAEH,iBAAiB,EAQpB,MAAM,oBAAoB,CAAC;AAE5B,OAAc,EACV,iBAAiB,EAEjB,iBAAiB,EACjB,SAAS,EAOZ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,UAAU,EAAe,MAAM,GAAG,CAAC;AAE5C,OAAO,EAAE,oBAAoB,EAAE,eAAe,EAAsB,MAAM,UAAU,CAAC;AAcrF,UAAU,0BAA0B;IAChC,MAAM,EAAE,eAAe,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC,UAAU,CAAC,CAAC;IAC1C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAED,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,0BAA0B,CAAC,CA+MlF,CAAC;AAEF,QAAA,MAAM,cAAc,QAAO,oBAE1B,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,CAAC"}

package/dist/src/secure-route.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"secure-route.d.ts","sourceRoot":"","sources":["../../src/secure-route.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAc,EAAE,iBAAiB,EAA2B,MAAM,OAAO,CAAC;AAC1E,OAAO,EAAS,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAErD,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAEhD;;;;;;GAMG;AACH,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,oBAAoB,GAAG,UAAU,CAyBrE,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"secure-route.d.ts","sourceRoot":"","sources":["../../src/secure-route.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAc,EAAE,iBAAiB,EAAqD,MAAM,OAAO,CAAC;AACpG,OAAO,EAAS,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAErD,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAEhD;;;;;;GAMG;AACH,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,oBAAoB,GAAG,UAAU,CAsCrE,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/tsconfig.tsbuildinfo

@@ -596,7 +596,7 @@
         "affectsGlobalScope": false
       },
       "../src/secure-route.tsx": {
-        "version": "92d15d49363702e09541828e6f79125a560e4ab94eebb6b7abeb1e085375ddd2",
+        "version": "1adc1b9bb0a3c981da175e3584852e714f2acc9ab987f9158a700e12342eca55",
         "signature": "a7444f6cda6b9d661a122ba8530dc1941173ae0ab22e75d7adca56b6b99bd40c",
         "affectsGlobalScope": false
       },
@@ -621,7 +621,7 @@
         "affectsGlobalScope": false
       },
       "../src/authenticate.tsx": {
-        "version": "3cea96c50c5f0cb0a4f110fe9556aabcf7604b07978cac9e25c9a0d39588941f",
+        "version": "7b80cd0e2b843d12ad19d3c473efa3d95c4ce9854e6ff71dc71e7d131a3824b1",
         "signature": "150d2de23192873482689c0b27ce8d8aa18d83441455f5402821f15f64b59133",
         "affectsGlobalScope": false
       },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@asgardeo/auth-react",
-    "version": "1.1.15",
+    "version": "1.1.18",
     "description": "Asgardeo Auth React SDK for React Applications.",
     "keywords": [
         "WSO2",
@@ -22,6 +22,7 @@
         "fix-lint": "eslint --ext .js,.ts . --fix",
         "build": "rimraf dist && npm run type-check && webpack -p --env.NODE_ENV=production",
         "build:dev": "rimraf dist && npm run type-check && webpack -p --env.NODE_ENV=development",
+        "build:watch": "npm run build:dev -- --watch",
         "type-check": "tsc --emitDeclarationOnly",
         "type-check:watch": "npm run type-check -- --watch"
     },
@@ -36,7 +37,7 @@
     "author": "WSO2",
     "license": "Apache-2.0",
     "dependencies": {
-        "@asgardeo/auth-spa": "^0.4.7"
+        "@asgardeo/auth-spa": "^0.4.8"
     },
     "devDependencies": {
         "@babel/cli": "^7.10.5",

package/src/authenticate.tsx

@@ -30,12 +30,14 @@ import {
 import { SPACustomGrantConfig } from "@asgardeo/auth-spa/src/models/request-custom-grant";
 import React, {
     FunctionComponent,
+    MutableRefObject,
     PropsWithChildren,
     ReactNode,
     createContext,
     useContext,
     useEffect,
     useMemo,
+    useRef,
     useState
 } from "react";
 import { AuthParams, ReactConfig } from ".";
@@ -131,6 +133,7 @@ const AuthProvider: FunctionComponent<PropsWithChildren<AuthProviderPropsInterfa
     const trySignInSilently = () => AuthClient.trySignInSilently(state, dispatch);
     
     const [ error, setError ] = useState<AsgardeoAuthException>();
+    const reRenderCheckRef: MutableRefObject<boolean> = useRef(false);
 
     useEffect(() => {
         if (state.isAuthenticated) {
@@ -146,6 +149,18 @@ const AuthProvider: FunctionComponent<PropsWithChildren<AuthProviderPropsInterfa
      * Try signing in when the component is mounted.
      */
     useEffect(() => {
+        // React 18.x Strict.Mode has a new check for `Ensuring reusable state` to facilitate an upcoming react feature.
+        // https://reactjs.org/docs/strict-mode.html#ensuring-reusable-state
+        // This will remount all the useEffects to ensure that there are no unexpected side effects.
+        // When react remounts the signIn hook of the AuthProvider, it will cause a race condition. Hence, we have to
+        // prevent the re-render of this hook as suggested in the following discussion.
+        // https://github.com/reactwg/react-18/discussions/18#discussioncomment-795623
+        if (reRenderCheckRef.current) {
+            return;
+        }
+
+        reRenderCheckRef.current = true;
+
         (async () => {
             let isSignedOut: boolean = false;
             // If the component was mounted after the user was redirected to the application upon a successful logout,

package/src/secure-route.tsx

@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import React, { FunctionComponent, ReactElement, useEffect } from "react";
+import React, { FunctionComponent, MutableRefObject, ReactElement, useEffect, useRef } from "react";
 import { Route, RouteProps } from "react-router-dom";
 import { useAuthContext } from "./authenticate";
 import { SecureRouteInterface } from "./models";
@@ -31,15 +31,28 @@ import { SecureRouteInterface } from "./models";
 const SecureRoute: FunctionComponent<SecureRouteInterface & RouteProps> = (props: SecureRouteInterface & RouteProps
 ): ReactElement => {
     const { state } = useAuthContext();
+    const reRenderCheckRef: MutableRefObject<boolean> = useRef(false);
 
     const { component: Component, callback, ...rest } = props;
 
     useEffect(() => {
-        if (!state.isAuthenticated) {
-            callback && callback();
+        if (state.isAuthenticated || state.isLoading) {
+            return;
         }
 
-    }, [ state.isAuthenticated ]);
+        // React 18.x Strict.Mode has a new check for `Ensuring reusable state` to facilitate an upcoming react feature.
+        // https://reactjs.org/docs/strict-mode.html#ensuring-reusable-state
+        // This will remount all the useEffects to ensure that there are no unexpected side effects.
+        // When react remounts the signIn hook of the AuthProvider, it will cause a race condition. Hence, we have to
+        // prevent the re-render of this hook as suggested in the following discussion.
+        // https://github.com/reactwg/react-18/discussions/18#discussioncomment-795623
+        if (reRenderCheckRef.current) {
+            return;
+        }
+
+        reRenderCheckRef.current = true;
+        callback && callback();
+    }, [ state.isAuthenticated, state.isLoading ]);
 
     if (!state.isAuthenticated) {
         return null;