supabase
componentcurrent-user-avatar-tanstacksource: ok · hit
Current User Avatar
Component which renders the current user's avatar.
npx shadcn add "https://supabase.com/ui/r/current-user-avatar-tanstack.json"free
No selection tags yet — empty means no evidence, not lack of support.
Dependencies
Bundle weight · light@supabase/ssr@latest@supabase/supabase-js@latest
Registry dependencies
avatar
Files5 · source cached 10/14/2026, 11:48:53 AM
registry/default/blocks/current-user-avatar/components/current-user-avatar.tsx
'use client'
import { useCurrentUserImage } from '@/registry/default/blocks/current-user-avatar/hooks/use-current-user-image'
import { useCurrentUserName } from '@/registry/default/blocks/current-user-avatar/hooks/use-current-user-name'
import { Avatar, AvatarFallback, AvatarImage } from '@/registry/default/components/ui/avatar'
export const CurrentUserAvatar = () => {
const profileImage = useCurrentUserImage()
const name = useCurrentUserName()
const initials = name
?.split(' ')
?.map((word) => word[0])
?.join('')
?.toUpperCase()
return (
<Avatar>
{profileImage && <AvatarImage src={profileImage} alt={initials} />}
<AvatarFallback>{initials}</AvatarFallback>
</Avatar>
)
}
registry/default/blocks/current-user-avatar/hooks/use-current-user-name.ts
import { useEffect, useState } from 'react'
import { createClient } from '@/registry/default/clients/tanstack/lib/supabase/client'
export const useCurrentUserName = () => {
const [name, setName] = useState<string | null>(null)
useEffect(() => {
const fetchProfileName = async () => {
const { data, error } = await createClient().auth.getSession()
if (error) {
console.error(error)
}
setName(data.session?.user.user_metadata.full_name ?? '?')
}
fetchProfileName()
}, [])
return name || '?'
}
registry/default/blocks/current-user-avatar/hooks/use-current-user-image.ts
import { useEffect, useState } from 'react'
import { createClient } from '@/registry/default/clients/tanstack/lib/supabase/client'
export const useCurrentUserImage = () => {
const [image, setImage] = useState<string | null>(null)
useEffect(() => {
const fetchUserImage = async () => {
const { data, error } = await createClient().auth.getSession()
if (error) {
console.error(error)
}
setImage(data.session?.user.user_metadata.avatar_url ?? null)
}
fetchUserImage()
}, [])
return image
}
registry/default/clients/tanstack/lib/supabase/client.ts
/// <reference types="vite/types/importMeta.d.ts" />
import { createBrowserClient } from '@supabase/ssr'
export function createClient() {
return createBrowserClient(
import.meta.env.VITE_SUPABASE_URL!,
import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY!
)
}
registry/default/clients/tanstack/lib/supabase/server.ts
import { createServerClient } from '@supabase/ssr'
import { getCookies, setCookie } from '@tanstack/react-start/server'
export function createClient() {
return createServerClient(
process.env.VITE_SUPABASE_URL!,
process.env.VITE_SUPABASE_PUBLISHABLE_KEY!,
{
cookies: {
getAll() {
return Object.entries(getCookies()).map(
([name, value]) =>
({
name,
value,
}) as { name: string; value: string }
)
},
setAll(cookies) {
cookies.forEach((cookie) => {
setCookie(cookie.name, cookie.value)
})
},
},
}
)
}