move to next-auth

pages/_app.tsx

@@ -1,14 +1,40 @@
-import '../styles/index.css'
-import UserContext from '../context/user'
+import { useEffect } from 'react';
 
-export default function MyApp({ Component, pageProps }) {
-  const { username, role } = pageProps?.user || {}
+import { useSession, signIn, SessionProvider } from "next-auth/react"
+import '../styles/index.css'
+
+function Auth({ children }) {
+  const { data: session, status } = useSession()
+  const isUser = !!session?.user
+
+  useEffect(() => {
+    if (status === 'loading') return // Do nothing while loading
+    if (!isUser) signIn() // If not authenticated, force log in
+  }, [isUser, status])
+
+  if (isUser) {
+    return children
+  }
+
+  // Session is being fetched, or no user.
+  // If no user, useEffect() will redirect.
+  return <div>Loading...</div>
+}
+
+export default function MyApp({ Component, pageProps: { session, ...pageProps } }) {
 
   return (
     <div className="wrapper">
-      <UserContext.Provider value={{ username, role }}>
-        <Component {...pageProps} />
-      </UserContext.Provider>
+      <SessionProvider session={session}>
+        {Component.auth ? (
+          <Auth>
+            <Component {...pageProps} />
+          </Auth>
+        ) : (
+          <Component {...pageProps} />
+        )}
+      </SessionProvider>
     </div>
   )
 }
+