nuxt3-supabase

Nuxt 3 module and composables for Supabase.

Installation

$ yarn add nuxt3-supabase
# or
$ npm install --save nuxt3-supabase

Getting Started

Add the following to your nuxt.config.ts file.

export default defineNuxtConfig({
  modules: ['nuxt3-supabase/module'],
  supabase: {
    supabaseUrl: process.env.SUPABASE_URL,
    supabaseKey: process.env.SUPABASE_KEY
  },
  vite: false // temporary workaround for vite build errors
});

Usage

<script setup lang="ts">
  const { $supabase } = useNuxtApp();

  const { data, pending } = await useAsyncData('posts', () => {
    return $supabase.from('posts').select();
  });
</script>

<template>
  <div v-if="pending">Loading...</div>
  <div v-else>{{ data }}</div>
</template>

Composables

useSupabase

Supabase client composable.

import { useSupabase } from 'nuxt3-supabase';

const supabase = useSupabase();

useAuth

Supabase Auth composable.

import { useAuth } from 'nuxt3-supabase';

const { user, signIn, signOut } = useAuth();

useStorage

Supabase Storage composable.

import { useStorage } from 'nuxt3-supabase';

const storage = useStorage();

useFrom

Supabase Database composable.

import { useFrom } from 'nuxt3-supabase';

const from = useFrom();

useOnAuthStateChange

Behaves similarly to onAuthStateChange but also sets/unsets auth cookie to the server.

import { useOnAuthStateChange } from 'nuxt3-supabase';

useOnAuthStateChange((event, session) => {
  console.log(event, session);
});

getServerSession

Get the server session that was set by useOnAuthStateChange.

<script setup lang="ts">
  import { useOnAuthStateChange, getServerSession } from 'nuxt3-supabase';

  const nuxtApp = useNuxtApp();

  const { data } = await useAsyncData('user', () =>
    getServerSession(nuxtApp.ssrContext)
  );

  useOnAuthStateChange();
</script>

TIP: You can use getServerSession to check if a user is authenticated or not before route load.

TODO

• Vite bug https://github.com/nuxt/framework/issues/718
• Composables
• API route authentication check

License

MIT