Fix local authorization (#164)

* Fix local authorization

* Fix authentication

* Moe signIn and SignOut to its original place

* Not set state when component unmounts

* Remove component unmount changes

app/frontend/package.json

@@ -65,7 +65,7 @@
     "monaco-editor": "^0.40.0",
     "monaco-editor-webpack-plugin": "^7.1.0",
     "npm-run-all": "^4.1.5",
-    "oidc-client-ts": "^3.0.1",
+    "oidc-client-ts": "^3.1.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-error-boundary": "^4.0.13",

app/frontend/src/app/Authorization.tsx

@@ -53,11 +53,24 @@ export function createAuthorizationProvider(config: AuthorizationProviderConfig)
   const demoAuthorizationClient = new DemoAuthClient();
 
   const signIn = async () => {
-    await userManager.signinRedirect({
-      state: window.location.pathname + window.location.search + window.location.hash,
-    });
+    try {
+      await userManager.signinRedirect({
+        state: window.location.pathname + window.location.search + window.location.hash,
+      });
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.warn(err);
+    }
+  };
+
+  const signOut = async () => {
+    try {
+      await userManager.signoutRedirect();
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.warn(err);
+    }
   };
-  const signOut = async () => userManager.signoutRedirect();
 
   return function AuthorizationProvider(props: React.PropsWithChildren<{}>): React.ReactElement {
     const [authorizationContextValue, setAuthorizationContextValue] = React.useState<AuthorizationContext>({
@@ -98,43 +111,24 @@ export function createAuthorizationProvider(config: AuthorizationProviderConfig)
       userManager.events.addUserLoaded(handleUserLoaded);
       userManager.events.addUserUnloaded(handleUserUnloaded);
 
-      return () => {
-        userManager.events.removeUserLoaded(handleUserLoaded);
-        userManager.events.removeUserUnloaded(handleUserUnloaded);
-      };
-    }, []);
-
-    React.useEffect(() => {
-      if (window.self !== window.top) {
-        // It could be that parent document has already initiated silent sign-in in an invisible iframe, and now the
-        // identity provider has redirected the iframe back to the app.
-        return;
-      }
-
-      let disposed = false;
-      void (async () => {
-        try {
-          await userManager.signinSilent();
-          await userManager.clearStaleState();
-        } catch (error) {
-          if (disposed) {
+      userManager
+        .getUser()
+        .then((user) => {
+          if (user === null) {
+            handleUserUnloaded();
             return;
           }
-
-          setAuthorizationContextValue({
-            userManager,
-            demoAuthorizationClient,
-            state: AuthorizationState.SignedOut,
-            user: undefined,
-            userAuthorizationClient: undefined,
-            signIn,
-            signOut,
-          });
-        }
-      })();
+          handleUserLoaded(user);
+        })
+        .catch((e) => {
+          // eslint-disable-next-line no-console
+          console.warn(e);
+          handleUserUnloaded();
+        });
 
       return () => {
-        disposed = true;
+        userManager.events.removeUserLoaded(handleUserLoaded);
+        userManager.events.removeUserUnloaded(handleUserUnloaded);
       };
     }, []);