feat: load user info on components after authenticate

brunosllz · Aug 30, 2023 · fe1a0f7 · fe1a0f7
1 parent fd2fd22
commit fe1a0f7
Show file tree

Hide file tree

Showing 12 changed files with 101 additions and 50 deletions.
diff --git a/src/@types/next-auth.d.ts b/src/@types/next-auth.d.ts
@@ -12,9 +12,18 @@ declare module 'next-auth' {
 
   interface Session {
     accessToken: string
+    user: {
+      name: string
+      email: string
+      avatarUrl: string
+    }
   }
+}
+
 
-  interface DefaultJWT {
-    uid: string
+declare module 'next-auth/jwt' {
+  interface JWT {
+    accessToken: string   
+    avatarUrl: string
   }
-}
+}
diff --git a/src/app/api/auth/[...nextauth]/route.ts b/src/app/api/auth/[...nextauth]/route.ts
@@ -26,7 +26,7 @@ export const handler: NextAuthOptions = NextAuth({
     }),
   ],
   callbacks: {
-    jwt({ token }) {
+    jwt({ token, user }) {
       const payload = {
         uid: token.sub,
       }
@@ -37,11 +37,16 @@ export const handler: NextAuthOptions = NextAuth({
       })
 
       token.accessToken = encodedToken
+      if (user) {
+        token.avatarUrl = user.avatarUrl
+      }
 
       return token
     },
     session({ session, token }) {
-      session.accessToken = token.accessToken as string
+      session.accessToken = token.accessToken
+      session.user = { ...session.user, avatarUrl: token.avatarUrl }
+
       return session
     },
   },

diff --git a/src/app/auth/sign-in/components/sign-in-github-button.tsx b/src/app/auth/sign-in/components/sign-in-github-button.tsx
@@ -21,7 +21,7 @@ export function SignInGithubButton() {
       disabled={isLoading}
       onClick={signInWithGithub}
     >
-      <span className="flex items-center gap-1">
+      <span className="flex items-center gap-3">
         {isLoading ? (
           <Icons.spinner className="h-4 w-4 animate-spin" />
         ) : (

diff --git a/src/app/auth/sign-in/page.tsx b/src/app/auth/sign-in/page.tsx
@@ -17,10 +17,12 @@ export const metadata: Metadata = {
 export default function AuthenticationPage() {
   return (
     <main className="flex h-screen w-full flex-col justify-center">
-      <Card className="mx-auto w-full max-w-[456px]">
+      <Card className="mx-auto w-full max-w-[400px]">
         <CardHeader>
-          <CardTitle>Sign In</CardTitle>
-          <CardDescription>to continue to Dev Xperience</CardDescription>
+          <CardTitle className="text-xl">Sign In</CardTitle>
+          <CardDescription className="text-base">
+            to continue to Dev Xperience
+          </CardDescription>
         </CardHeader>
         <CardContent>
           <SignInGithubButton />

diff --git a/src/app/favicon.ico b/src/app/favicon.ico
diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -20,9 +20,7 @@ export function Header() {
 
         <nav className="flex items-center space-x-6">
           <NavLink href="/projects">Projects</NavLink>
-          <NavLink href="/events">Events</NavLink>
-          <NavLink href="/monitoring">Monitoring</NavLink>
-          <NavLink href="/settings">Settings</NavLink>
+          <NavLink href="/forum">Forum</NavLink>
         </nav>
       </div>
 

diff --git a/src/components/logo.tsx b/src/components/logo.tsx
@@ -13,8 +13,8 @@ export function Logo(props: ComponentProps<'svg'>) {
       <rect width="79" height="79" rx="26" fill="url(#paint0_linear_246_4)" />
       <g filter="url(#filter0_d_246_4)">
         <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M62.5963 19.6646H62.5918L44.3831 45.0626L55.1069 62L51.1651 62L42.1823 48.1325L41.2074 49.4923L49.0816 62L44.5205 62L38.617 52.8113L32.5263 62H28.0777L36.3605 49.7058L35.4068 48.269L28.3593 58.3354L25.6563 62H14.1689L16.6466 58.3354L29.5981 39.3382L16.4214 19.6646L14 16L25.9379 16L28.3029 19.6646H28.3026L35.3953 30.867L43.2531 19.6246L43.2555 19.6247L46.0013 16L65.4118 16L62.5963 19.6646ZM33.0331 34.3211L23.7418 19.6646L21.4893 19.6646L32.0546 35.6467L33.0331 34.3211ZM35.6207 38.0029L36.5743 39.4751L35.5421 40.9224L34.5853 39.4751L35.6207 38.0029ZM38.8369 36.3028L37.8797 34.791L48.5183 19.6646L57.2984 19.6646L42.1048 41.4641L41.1418 39.7328L54.4312 21.1299H49.5884L38.8369 36.3028ZM38.972 43.1766L37.9743 44.6016L38.9205 46.0329L39.9061 44.6187L38.972 43.1766ZM32.0051 43.1438L21.3206 58.3354L23.2913 58.3354L32.9463 44.5618L32.0051 43.1438Z"
           fill="white"
         />
@@ -27,9 +27,9 @@ export function Logo(props: ComponentProps<'svg'>) {
           width="59.4121"
           height="54"
           filterUnits="userSpaceOnUse"
-          color-interpolation-filters="sRGB"
+          colorInterpolationFilters="sRGB"
         >
-          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
           <feColorMatrix
             in="SourceAlpha"
             type="matrix"
@@ -63,7 +63,7 @@ export function Logo(props: ComponentProps<'svg'>) {
           y2="80.9006"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stop-color="#212121" stop-opacity="0.19" />
+          <stop stopColor="#212121" stopOpacity="0.19" />
           <stop offset="1" />
         </linearGradient>
       </defs>

diff --git a/src/components/sign-out-button.tsx b/src/components/sign-out-button.tsx
@@ -0,0 +1,24 @@
+'use client'
+
+import { signOut } from 'next-auth/react'
+import { HTMLAttributes } from 'react'
+import { twMerge } from 'tailwind-merge'
+
+type SignOutButtonProps = HTMLAttributes<HTMLButtonElement>
+
+export function SignOutButton(props: SignOutButtonProps) {
+  function handleSignOut() {
+    signOut({ callbackUrl: '/' })
+  }
+
+  return (
+    <button
+      onClick={handleSignOut}
+      className={twMerge(
+        'flex w-full items-center justify-between',
+        props.className,
+      )}
+      {...props}
+    />
+  )
+}
diff --git a/src/components/user-avatar.tsx b/src/components/user-avatar.tsx
@@ -0,0 +1,16 @@
+'use client'
+
+import { useSession } from 'next-auth/react'
+import { Avatar, AvatarImage } from './ui/avatar'
+
+export function UserAvatar() {
+  const { data } = useSession()
+
+  const user = data?.user
+
+  return (
+    <Avatar className="h-8 w-8">
+      {user?.avatarUrl && <AvatarImage src={user.avatarUrl} alt="" />}
+    </Avatar>
+  )
+}
diff --git a/src/components/user-info-label.tsx b/src/components/user-info-label.tsx
@@ -0,0 +1,18 @@
+'use client'
+
+import { useSession } from 'next-auth/react'
+
+export function UserInfoLabel() {
+  const { data } = useSession()
+
+  const user = data?.user
+
+  return (
+    <div className="flex flex-col space-y-2">
+      <p className="text-sm font-medium leading-none">{user?.name}</p>
+      <p className="text-xs leading-none text-muted-foreground">
+        {user?.email}
+      </p>
+    </div>
+  )
+}
diff --git a/src/components/user-nav.tsx b/src/components/user-nav.tsx
@@ -1,5 +1,3 @@
-import { useSession } from 'next-auth/react'
-import { Avatar, AvatarImage } from './ui/avatar'
 import { Button } from './ui/button'
 import {
   DropdownMenu,
@@ -12,59 +10,39 @@ import {
   DropdownMenuTrigger,
 } from './ui/dropdown-menu'
 import Link from 'next/link'
+import { SignOutButton } from './sign-out-button'
+import { UserInfoLabel } from './user-info-label'
+import { UserAvatar } from './user-avatar'
 
 export function UserNav() {
-  // const { data } = useSession()
-
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button
           variant="ghost"
           className="relative h-8 w-8 select-none rounded-full bg-primary/10"
         >
-          <Avatar className="h-8 w-8">
-            {/* <AvatarImage src={data?.user.image!} alt="" /> */}
-          </Avatar>
+          <UserAvatar />
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-56" align="end" forceMount>
         <DropdownMenuLabel className="font-normal">
-          {/* <div className="flex flex-col space-y-2">
-            <p className="text-sm font-medium leading-none">
-              {user.firstName + ' ' + user.lastName}
-            </p>
-            <p className="text-xs leading-none text-muted-foreground">
-              {
-                user.emailAddresses.find(
-                  (email) => email.id === user.primaryEmailAddressId,
-                )?.emailAddress
-              }
-            </p>
-          </div> */}
+          <UserInfoLabel />
         </DropdownMenuLabel>
         <DropdownMenuSeparator />
         <DropdownMenuGroup>
           <DropdownMenuItem asChild>
-            <Link href="/settings">Profile</Link>
-          </DropdownMenuItem>
-          <DropdownMenuItem asChild>
-            <Link href="/settings/teams">My teams</Link>
-          </DropdownMenuItem>
-          <DropdownMenuItem asChild>
-            <Link href="/settings/billing">Billing</Link>
-          </DropdownMenuItem>
-          <DropdownMenuItem asChild>
-            <Link href="/settings/keys">API Keys</Link>
+            <Link href="/me">Profile</Link>
           </DropdownMenuItem>
         </DropdownMenuGroup>
         <DropdownMenuSeparator />
-        <Button className="w-full" variant="ghost">
-          <DropdownMenuItem>
+
+        <DropdownMenuItem>
+          <SignOutButton>
             Log out
             <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
-          </DropdownMenuItem>
-        </Button>
+          </SignOutButton>
+        </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
   )

diff --git a/src/libs/next-auth/prisma-adapter.ts b/src/libs/next-auth/prisma-adapter.ts
@@ -10,6 +10,7 @@ export function CustomPrismaAdapter(prisma: PrismaClient): Adapter {
           name: user.name,
           email: user.email,
           avatarUrl: user.avatarUrl,
+          userName: user.userName,
           githubLink: user.githubLink,
         },
       })