Learn how to use auto-imported composables inside your vue files.
Checkout the Nuxt3 documentation for auto-imported composables to learn more.
useSupabaseClientThis composable is using supabase-js under the hood, it gives acces to the Supabase client.
The client is initialized with the
SUPABASE_KEYyou must have in your.envfile. It establishes the connection with the database and make use of user JWT to apply RLS Policies implemented in Supabase. If you want to bypass policies, you can use the serverSupabaseServiceRole.
<script setup>const client = useSupabaseClient()// Example: client.from('librairies').eq('name', 'Vue').single()</script>All authentification methods are available on Supabase Auth Documentation.
Here is an example of the login using the signIn method with third-party providers.
<script setup lang="ts">const user = useSupabaseUser()const client = useSupabaseClient()const router = useRouter()// Login method using providersconst login = async (provider: 'github' | 'google' | 'gitlab' | 'bitbucket') => { const { error } = await client.auth.signIn({ provider }) if (error) { return alert('Something went wrong !') } router.push('/dashboard')}</script><template> <button @click="login('github')">Login with GitHub</button></template>Take a look at the advanced section to learn how to leverage Nuxt middleware to protect your routes for unauthenticated users.
Please check Supabase documentation to fully use the power of Supabase client.
Here is an example of a fetch using the select method with Nuxt 3 useAsyncData composable.
<script setup lang="ts">const client = useSupabaseClient()const { data: restaurant } = await useAsyncData('restaurant', async () => { const { data } = await client.from('restaurants').select('name, location').eq('name', 'My Restaurant Name').single() return data})</script>useSupabaseUserOnce logged in, you can access your user everywhere:
<script setup>const user = useSupabaseUser()</script>Learn how to protect your routes by writing your own auth middleware composable.