Upgraded to Next Auth v5

components/auth/card-wrapper.tsx

@@ -0,0 +1,40 @@
+"use client"
+
+import { LoginForm } from "@/components/auth/login-form";
+import React from "react";
+import { 
+  Card,
+  CardContent,
+  CardHeader,
+  CardFooter,
+  CardTitle
+} from "@/components/ui/card";
+import { Header } from "@/components/auth/header";
+import { Social } from "@/components/auth/social";
+
+
+interface CardWrapperProps {
+  children: React.ReactNode
+  headerLabel: string
+}
+
+export const CardWrapper = ({
+  children,
+  headerLabel
+}: CardWrapperProps) => {
+  return ( 
+    <Card className="w-[400px] shadow-md bg-white text-black">
+      <CardHeader>
+        <Header label={headerLabel} />
+      </CardHeader>
+      <CardContent>
+        {children}
+      </CardContent>
+      <CardFooter>
+        <Social />
+      </CardFooter>
+    </Card>
+   );
+}
+ 
+export default CardWrapper

components/auth/header.tsx

@@ -0,0 +1,25 @@
+import { Poppins } from "next/font/google";
+import { cn } from "@/lib/utils";
+
+
+const font = Poppins({
+  subsets: ["latin"],
+  weight: ["600"]
+})
+
+interface HeaderProps {
+  label: string
+}
+
+export const Header = ({ label }: HeaderProps) => {
+  return (
+    <div className="w-full flex flex-col gap-y-4 items-center justify-center">
+      <h1 className={cn(
+        "text-3xl font-semibold", font.className
+      )}>Login</h1>
+      <p className="text-muted-foreground text-sm">
+        {label}
+      </p>
+    </div>
+  )
+}

components/auth/login-form.tsx

@@ -0,0 +1,11 @@
+import { CardWrapper } from "./card-wrapper"
+
+export const LoginForm = () => {
+  return (
+    <CardWrapper
+      headerLabel="Welcome back"
+    >
+      Login Form
+    </CardWrapper>
+  )
+}

components/auth/social.tsx

@@ -0,0 +1,27 @@
+"use client"
+
+import { signIn } from "next-auth/react"
+import { FaTwitch } from "react-icons/fa"
+import { Button } from "@/components/ui/button"
+import { DEFAULT_REDIRECT } from "@/routes"
+
+export const Social = () => {
+  const onClick = (provider: "twitch") => {
+    signIn(provider, {
+      callbackUrl: DEFAULT_REDIRECT,
+    })
+  }
+
+  return (
+    <div className="flex items-center w-full gap-x-2">
+      <Button
+        size="lg"
+        variant="outline"
+        className="w-full bg-white hover:bg-purple-500"
+        onClick={() => onClick("twitch")}  
+      >
+        <FaTwitch className="h-5 w-5" />
+      </Button>
+    </div>
+  )
+}

components/navigation/userprofile.tsx

@@ -2,40 +2,37 @@
 
 import axios from "axios";
 import * as React from 'react';
-import { User } from "@prisma/client";
 import { useEffect, useState } from "react";
 import { useSession } from "next-auth/react";
-import { usePathname } from 'next/navigation'
 import { cn } from "@/lib/utils";
 
 const UserProfile = () => {
-  const { data: session, status } = useSession();
-    const [previousUsername, setPreviousUsername] = useState<string>()
-    const [user, setUser] = useState<User>()
-    const [loading, setLoading] = useState<boolean>(true)
-    const pathname = usePathname()
+    const { data: session, status } = useSession();
+    const [user, setUser] = useState<{ id: string, username: string }>()
+
+    let previousUsername = ""
 
     useEffect(() => {
       if (status !== "authenticated" || previousUsername == session.user?.name) {
           return
       }
 
-      setPreviousUsername(session.user?.name as string)
+      previousUsername = session.user?.name || ""
       if (session.user) {
         const fetchData = async () => {
-          var userData: User = (await axios.get("/api/account")).data
+          var userData = (await axios.get("/api/account")).data
           setUser(userData)
-          setLoading(false)
+          console.log(userData)
         }
 
         fetchData().catch(console.error)
 
-        // TODO: check cookies if impersonation is in use.
+        // TODO: check session if impersonation is in use.
       }
   }, [session])
 
   return ( 
-    <div className={cn("px-10 py-6 rounded-md bg-blue-300 overflow-hidden wrap", loading && "hidden")}>
+    <div className={cn("px-10 py-6 rounded-md bg-blue-300 overflow-hidden wrap", user == null && "hidden")}>
       <p className="text-xs text-gray-400">Logged in as:</p>
       <p>{user?.username}</p>
     </div>