core: fix sign-in hot reloading issues and unmounted component access

packages/core-api/src/app/App.tsx

@@ -17,7 +17,6 @@ import React, {
   ComponentType,
   FC,
   useMemo,
-  useCallback,
   useState,
   ReactElement,
 } from 'react';
@@ -258,24 +257,14 @@ export class PrivateAppImpl implements BackstageApp {
       component: ComponentType<SignInPageProps>;
       children: ReactElement;
     }> = ({ component: Component, children }) => {
-      const [done, setDone] = useState(false);
+      const [result, setResult] = useState<SignInResult>();
 
-      const onResult = useCallback(
-        (result: SignInResult) => {
-          if (done) {
-            throw new Error('Identity result callback was called twice');
-          }
-          this.identityApi.setSignInResult(result);
-          setDone(true);
-        },
-        [done],
-      );
-
-      if (done) {
+      if (result) {
+        this.identityApi.setSignInResult(result);
         return children;
       }
 
-      return <Component onResult={onResult} />;
+      return <Component onResult={setResult} />;
     };
 
     const AppRouter: FC<{}> = ({ children }) => {

packages/core/src/layout/Sidebar/Settings/OAuthProviderSettings.tsx

@@ -41,22 +41,29 @@ export const OAuthProviderSettings: FC<OAuthProviderSidebarProps> = ({
   const [signedIn, setSignedIn] = useState(false);
 
   useEffect(() => {
+    let didCancel = false;
+
     const checkSession = async () => {
       const session = await api.getAccessToken('', { optional: true });
-      setSignedIn(!!session);
+      if (!didCancel) {
+        setSignedIn(!!session);
+      }
     };
     let subscription: Subscription;
     const observeSession = () => {
       subscription = api
         .sessionState$()
         .subscribe((sessionState: SessionState) => {
-          setSignedIn(sessionState === SessionState.SignedIn);
+          if (!didCancel) {
+            setSignedIn(sessionState === SessionState.SignedIn);
+          }
         });
     };
 
     checkSession();
     observeSession();
     return () => {
+      didCancel = true;
       subscription.unsubscribe();
     };
   }, [api]);

packages/core/src/layout/Sidebar/Settings/OIDCProviderSettings.tsx

@@ -41,9 +41,13 @@ export const OIDCProviderSettings: FC<OIDCProviderSidebarProps> = ({
   const [signedIn, setSignedIn] = useState(false);
 
   useEffect(() => {
+    let didCancel = false;
+
     const checkSession = async () => {
       const session = await api.getIdToken({ optional: true });
-      setSignedIn(!!session);
+      if (!didCancel) {
+        setSignedIn(!!session);
+      }
     };
 
     let subscription: Subscription;
@@ -51,13 +55,16 @@ export const OIDCProviderSettings: FC<OIDCProviderSidebarProps> = ({
       subscription = api
         .sessionState$()
         .subscribe((sessionState: SessionState) => {
-          setSignedIn(sessionState === SessionState.SignedIn);
+          if (!didCancel) {
+            setSignedIn(sessionState === SessionState.SignedIn);
+          }
         });
     };
 
     checkSession();
     observeSession();
     return () => {
+      didCancel = true;
       subscription.unsubscribe();
     };
   }, [api]);

packages/core/src/layout/SignInPage/providers.tsx

@@ -93,8 +93,9 @@ export const useSignInProviders = (
         }
         if (result) {
           handleWrappedResult(result);
+        } else {
+          setLoading(false);
         }
-        setLoading(false);
       })
       .catch(error => {
         if (didCancel) {