Docs
Current User Avatar

Current User Avatar

Supabase Auth-aware avatar

Loading...

Installation

Open in

Folder structure

  • components
  • hooks
  • lib
    • supabase
1'use client' 2 3import { useCurrentUserImage } from '@/hooks/use-current-user-image' 4import { useCurrentUserName } from '@/hooks/use-current-user-name' 5import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar' 6 7export const CurrentUserAvatar = () => { 8 const profileImage = useCurrentUserImage() 9 const name = useCurrentUserName() 10 const initials = name 11 ?.split(' ') 12 ?.map((word) => word[0]) 13 ?.join('') 14 ?.toUpperCase() 15 16 return ( 17 <Avatar> 18 {profileImage && <AvatarImage src={profileImage} alt={initials} />} 19 <AvatarFallback>{initials}</AvatarFallback> 20 </Avatar> 21 ) 22}

Introduction

The CurrentUserAvatar component connects to Supabase Auth to fetch the user data and show an avatar. It uses the user_metadata property which gets populated automatically by Supabase Auth if the user logged in via a provider. If the user doesn't have a profile image, it renders their initials. If the user is logged out, it renders a ? as a fallback, which you can change.

Usage

The CurrentUserAvatar component is designed to be used anywhere in your app. Add the <CurrentUserAvatar /> component to your page and it will render the avatar of the current user, with a fallback.

'use client'   import { CurrentUserAvatar } from '@/components/current-user-avatar'   const CurrentUserAvatarDemo = () => {  return (  <Header className="flex items-center justify-between">  <h1>Lumon Industries</h1>  <CurrentUserAvatar />  </Header>  ) }   export default CurrentUserAvatarDemo

Props

This component doesn't accept any props. If you wish to change the fallback, you can do so by changing the CurrentUserAvatar component directly.

Further reading