mirror of
https://github.com/SrIzan10/next-auth.git
synced 2026-05-01 10:55:20 +00:00
Next.js 13.4 [is out](https://nextjs.org/blog/next-13-4). For discussing project-related issues, please use https://github.com/nextauthjs/next-auth/discussions/8487 The new version of NextAuth.js is based on `@auth/core`. If you want to test it out, you can do so already, installing `next-auth@experimental`: - **Documentation**: https://authjs.dev/reference/nextjs - **Migration guide**: https://authjs.dev/guides/upgrade-to-v5 BREAKING CHANGE: Follow the [migration guide](https://authjs.dev/guides/upgrade-to-v5)
50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar"
|
|
import { Button } from "./ui/button"
|
|
import { auth } from "auth"
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuTrigger,
|
|
} from "./ui/dropdown-menu"
|
|
import { SignIn, SignOut } from "./auth-components"
|
|
|
|
export default async function UserButton() {
|
|
const session = await auth()
|
|
return session ? (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" className="relative w-8 h-8 rounded-full">
|
|
<Avatar className="w-8 h-8">
|
|
{session.user?.picture && (
|
|
<AvatarImage
|
|
src={session.user?.picture}
|
|
alt={session.user?.name ?? ""}
|
|
/>
|
|
)}
|
|
<AvatarFallback>{session.user?.email}</AvatarFallback>
|
|
</Avatar>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent className="w-56" align="end" forceMount>
|
|
<DropdownMenuLabel className="font-normal">
|
|
<div className="flex flex-col space-y-1">
|
|
<p className="text-sm font-medium leading-none">
|
|
{session.user?.name}
|
|
</p>
|
|
<p className="text-xs leading-none text-muted-foreground">
|
|
{session.user?.email}
|
|
</p>
|
|
</div>
|
|
</DropdownMenuLabel>
|
|
<DropdownMenuItem>
|
|
<SignOut />
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
) : (
|
|
<SignIn />
|
|
)
|
|
}
|