Auto-import your client inside your vue files.

This composable is using supabase-js under the hood, it gives acces to the Supabase client in order to handle authentification actions, all methods are available on Supabase Auth Documentation.

The client is initialized with the SUPABASE_KEY you must have in your .env file.

This client is dedicated to authentification purpose only. It won't be recreate if your token expires, it is used in the client plugin to listen to onAuthStateChange events. If you want to fetch data from the db, please use the useSupabaseClient instead.


Here is an example of the login using the signInWithOAuth method with third-party providers.

<script setup lang="ts">const user = useSupabaseUser()const client = useSupabaseAuthClient()const router = useRouter()// Login method using providersconst login = async (provider: 'github' | 'google' | 'gitlab' | 'bitbucket') => {  const { error } = await client.auth.signInWithOAuth({ provider })  if (error) {    return alert('Something went wrong !')  }  router.push('/dashboard')}</script><template>  <button @click="login('github')">Login with GitHub</button></template>
Thanks to the Nuxt plugin, we are listening to the onAuthStateChange listener in order to update the user value according to the received event. We also keep the session consistency between client and server side.

Take a look at the auth middleware section to learn how to leverage Nuxt middleware to protect your routes for unauthenticated users.


Check Supabase Documentation for further details.

<template>  <button @click="client.auth.signOut()">Logout</button></template><script>const client = useSupabaseAuthClient()</script>