# Current User Avatar

Supabase Auth-aware avatar

## Files

- `app/`
  - `components/`
    - `current-user-avatar.vue`
  - `composables/`
    - `useCurrentUserImage.ts`
    - `useCurrentUserName.ts`

External registry dependencies: avatar.

Full source: https://supabase.com/library/r/current-user-avatar-nuxtjs.json

## Installation

### Set up the Supabase client

This block requires a Supabase client for Nuxt.js. If your project already has one, reuse it and update the block's imports to match your client. Otherwise, install the client:

Install this block:

```bash
npx shadcn-vue@latest add https://supabase.com/library/r/supabase-client-nuxtjs.json
```

Configure the environment variables described in the [Nuxt.js client guide](https://supabase.com/library/docs/nuxtjs/client.md#getting-started) before using the block.

### Install the block

Install this block:

```bash
npx shadcn-vue@latest add https://supabase.com/library/r/current-user-avatar-nuxtjs.json
```

## 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.

```vue
<script setup lang="ts">
// Assumes you have Header component created
import CurrentUserAvatar from '@/components/CurrentUserAvatar.vue'
import Header from '@/components/Header.vue'
</script>

<template>
  <Header class="flex items-center justify-between">
    <h1>Lumon Industries</h1>
    <CurrentUserAvatar />
  </Header>
</template>
```

## 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

- [Auth users](https://supabase.com/docs/guides/auth/users)