Develop high-level SessionErrorHandler component

components/Authorize.tsx

@@ -1,7 +1,7 @@
-import { notification, Spin } from "antd";
+import { Spin } from "antd";
 import { useSession, signIn } from "next-auth/react";
 import nProgress from "nprogress";
-import React, { useEffect } from "react";
+import React from "react";
 import { AuthorizationContext, AuthorizationContextData, UserInfo } from "../functions/AuthorizationContext";
 
 export const Authorize: React.FC<{
@@ -15,18 +15,6 @@ export const Authorize: React.FC<{
         },
     });
 
-    useEffect(() => {
-        // this error bubbles up from [...nextauth].ts, refreshAccessToken()
-        if (session?.['error'] === "RefreshAccessTokenError") {
-            notification['warning']({
-                message: 'Login Required',
-                description: 'Your session has ended. Redirecting to login page...'
-            });
-            nProgress.start();
-            signIn('oidc'); // Force sign in to hopefully resolve error
-        }
-    }, [session]);
-
     function getAccessToken(): string {
         const accessToken = session?.['accessToken'];
         if (typeof accessToken === 'string') {

components/SessionErrorHandler.tsx

@@ -0,0 +1,26 @@
+import { notification } from "antd";
+import { signIn, useSession } from "next-auth/react";
+import nProgress from "nprogress";
+import React, { useEffect } from "react";
+
+export const SessionErrorHandler: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+    const { data: session } = useSession();
+
+    useEffect(() => {
+        // this error bubbles up from [...nextauth].ts, refreshAccessToken()
+        if (session?.['error'] === "RefreshAccessTokenError") {
+            notification['warning']({
+                message: 'Login Required',
+                description: 'Your session has ended. Redirecting to login page...'
+            });
+            nProgress.start();
+            signIn('oidc'); // Force sign in to hopefully resolve error
+        }
+    }, [session]);
+
+    return (
+        <>
+            {children}
+        </>
+    );
+};

pages/_app.tsx

@@ -10,6 +10,7 @@ import { config } from '@fortawesome/fontawesome-svg-core';
 config.autoAddCss = false;
 
 import '../css/index.css';
+import { SessionErrorHandler } from '../components/SessionErrorHandler';
 
 type NextPageWithLayout = NextPage & {
     layout?: (page: React.ReactElement) => React.ReactNode;
@@ -28,7 +29,9 @@ function CustomApp({
     const withLayout = Component.layout ?? (page => page);
     return (
         <SessionProvider session={session} refetchInterval={120} refetchOnWindowFocus={false}>
-            {withLayout(<Component {...pageProps} />)}
+            <SessionErrorHandler>
+                {withLayout(<Component {...pageProps} />)}
+            </SessionErrorHandler>
         </SessionProvider>
     );
 }