Current User Avatar

Installation

Folder structure

This block assumes that you have already installed a Supabase client for Vue from the previous step.

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.

<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