move to next-auth

components/user.tsx

@@ -1,28 +1,19 @@
-import { useRouter } from 'next/router'
-import { useContext } from 'react'
+import { useSession, signOut } from 'next-auth/react'
 
-import UserContext from '../context/user'
-import fetch from '../helpers/fetch'
 
 export default function User() {
-  const router = useRouter()
-  const { username, role } = useContext(UserContext)
+  const { data, status } = useSession();
 
-  if (!username || !role) {
-    return <div />
-  }
-
-  const onClickLogout = async () => {
-    await fetch('/api/logout', { method: 'POST' })
-    router.reload()
+  if (status === 'loading' || !data?.user?.email) {
+    return null;
   }
 
   return (
     <>
       <div className="font-extrabold bg-red-400 px-2 py-1 mr-3 rounded-sm">
-        {username}
+        {data.user.email}
       </div>
-      <button onClick={onClickLogout} className="btn btn-blue">
+      <button onClick={() => signOut()} className="btn btn-blue">
         Logout
       </button>
     </>