use supabase module

.env.example

@@ -1,4 +1,4 @@
 GITHUB_CLIENT_ID='1234'
 GITHUB_CLIENT_SECRET='1234'
-NUXT_PUBLIC_SUPABASE_URL='https://XY.supabase.co'
-NUXT_PUBLIC_SUPABASE_KEY='1234'
+SUPABASE_URL='https://XY.supabase.co'
+SUPABASE_KEY='1234'

app.vue

@@ -1,10 +1,7 @@
 <script lang="ts" setup>
 import { useUser, login, logout } from '@/store/auth'
 
-const { user, getUser, subscribe } = await useUser()
-
-getUser()
-subscribe()
+const { user } = await useUser()
 
 useHead({
   title: 'Do',
@@ -18,15 +15,10 @@ useHead({
     >
       <NuxtLink to="/" class="text-slate-800">Do</NuxtLink>
       <nav class="flex items-center justify-end gap-2">
-        <ClientOnly>
-          <ActionButton @click="logout" v-if="user">
-            <img
-              :src="user.avatarUrl"
-              class="rounded-full h-5 w-5 mr-2 border"
-            />
-            Logout
-          </ActionButton>
-        </ClientOnly>
+        <ActionButton @click="logout" v-if="user">
+          <img :src="user.avatarUrl" class="rounded-full h-5 w-5 mr-2 border" />
+          Logout
+        </ActionButton>
         <a
           href="https://github.com/visualjerk/do"
           class="flex px-2 py-1 text-slate-600 hover:text-slate-800"
@@ -39,15 +31,13 @@ useHead({
     </header>
 
     <main class="py-6 sm:py-10 px-4 max-w-screen-md m-auto">
-      <ClientOnly>
-        <div v-if="!user">
-          <h1 class="mb-8">Please login</h1>
-          <ActionButton @click="login" v-if="!user">
-            Login with GitHub
-          </ActionButton>
-        </div>
-        <NuxtPage v-else />
-      </ClientOnly>
+      <div v-if="!user">
+        <h1 class="mb-8">Please login</h1>
+        <ActionButton @click="login" v-if="!user">
+          Login with GitHub
+        </ActionButton>
+      </div>
+      <NuxtPage v-else />
     </main>
     <footer class="p-8 flex justify-center items-center gap-1 text-slate-500">
       Built by

nuxt.config.ts

@@ -2,12 +2,6 @@ import { defineNuxtConfig } from 'nuxt'
 
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
-  runtimeConfig: {
-    public: {
-      supabaseUrl: process.env.NUXT_PUBLIC_SUPABASE_URL,
-      supabaseKey: process.env.NUXT_PUBLIC_SUPABASE_KEY,
-    },
-  },
   css: ['@/assets/css/main.css'],
   build: {
     postcss: {
@@ -18,5 +12,5 @@ export default defineNuxtConfig({
   typescript: {
     strict: true,
   },
-  modules: ['@kevinmarrec/nuxt-pwa'],
+  modules: ['@nuxtjs/supabase', '@kevinmarrec/nuxt-pwa'],
 })

package.json

@@ -9,6 +9,7 @@
   },
   "devDependencies": {
     "@kevinmarrec/nuxt-pwa": "^0.4.2",
+    "@nuxtjs/supabase": "^0.1.19",
     "nuxt": "3.0.0-rc.6",
     "tailwindcss": "^3.1.6"
   },

pages/index.vue

@@ -7,12 +7,9 @@ import {
   Todo,
 } from '@/store/todos'
 
-const { todos, getTodos, subscribe } = useTodos()
+const { todos } = await useTodos(true)
 const { newTodo, addTodo } = useTodoForm()
 
-getTodos()
-subscribe()
-
 useHead({
   title: 'Do',
 })

store/auth.ts

@@ -1,46 +1,26 @@
-import { getApi } from '@/store/api'
-
 interface User {
   avatarUrl: string
 }
 
 export function useUser() {
-  const user = useState<User | null>('USER')
-
-  function getUser() {
-    const api = getApi()
-    if (!api) {
-      return
-    }
-    const apiUser = api.auth.user()
-    if (!apiUser) {
-      user.value = null
-      return
+  const supabaseUser = useSupabaseUser()
+  const user = computed<User | null>(() => {
+    if (!supabaseUser.value) {
+      return null
     }
 
-    const identity = apiUser.identities?.at(0)
+    const identity = supabaseUser.value.identities?.at(0)
 
-    user.value = {
+    return {
       avatarUrl: (identity?.identity_data.avatar_url as string) || '',
     }
-  }
-
-  function subscribe() {
-    const api = getApi()
-    if (!api) {
-      return
-    }
-    api.auth.onAuthStateChange(getUser)
-  }
+  })
 
-  return { user, getUser, subscribe }
+  return { user }
 }
 
 export async function login() {
-  const api = getApi()
-  if (!api) {
-    return
-  }
+  const api = useSupabaseClient()
   const appUrl = useRuntimeConfig().app.baseURL
   await api.auth.signIn(
     {
@@ -53,10 +33,7 @@ export async function login() {
 }
 
 export async function logout() {
-  const api = getApi()
-  if (!api) {
-    return
-  }
+  const api = useSupabaseClient()
   await api.auth.signOut()
   await refreshNuxtData()
   useRouter().push('/')

store/todos.ts

@@ -1,60 +1,57 @@
-import { getApi } from '@/store/api'
 import { definitions } from '@/types/supabase'
+import type { RealtimeSubscription } from '@supabase/supabase-js'
 
 export interface Todo {
   id: number
   name: string
   done: boolean
 }
 
-export function useTodos() {
-  const todos = useState<Todo[]>('TODOS', () => [])
+export async function useTodos(subscribe = false) {
+  const api = useSupabaseClient()
+  let subscription: RealtimeSubscription | undefined
 
-  async function getTodos() {
-    const api = getApi()
-    if (!api) {
-      return
-    }
-    const apiTodos = await api
+  if (subscribe && process.client) {
+    onUnmounted(() => {
+      if (subscription) {
+        api.removeSubscription(subscription)
+      }
+    })
+  }
+
+  const { data: todos, refresh } = await useAsyncData('todos', async () => {
+    const { data } = await api
       .from<definitions['todo']>('todo')
       .select('*')
       .order('id')
-    if (!apiTodos.data) {
-      todos.value = []
-      return
-    }
 
-    todos.value = apiTodos.data.map((todo) => ({
+    if (!data) {
+      return []
+    }
+    return data.map((todo) => ({
       id: todo.id,
       name: todo.name,
       done: todo.done,
     }))
-  }
+  })
 
-  function subscribe() {
-    const api = getApi()
-    if (!api) {
-      return
-    }
-    api
+  if (subscribe && process.client) {
+    subscription = api
       .from('todo')
       .on('*', () => {
-        getTodos()
+        refresh()
       })
       .subscribe()
   }
 
-  return { todos, getTodos, subscribe }
+  return { todos }
 }
 
 export function useTodoForm() {
   const newTodo = ref({ name: '' })
 
   async function addTodo() {
-    const api = getApi()
-    if (!api) {
-      return
-    }
+    const api = useSupabaseClient()
     const user = api.auth.user()
     if (!user) {
       return
@@ -72,12 +69,9 @@ export function useTodoForm() {
 }
 
 export async function toggleTodo(todo: Todo) {
-  const api = getApi()
-  if (!api) {
-    return
-  }
+  const api = useSupabaseClient()
   const { done } = todo
-  const { todos } = useTodos()
+  const { todos } = await useTodos()
   const index = todos.value.findIndex(({ id }) => id === todo.id)
   todos.value[index].done = !done
 
@@ -91,12 +85,9 @@ export async function toggleTodo(todo: Todo) {
 }
 
 export async function deleteTodo(todo: Todo) {
-  const api = getApi()
-  if (!api) {
-    return
-  }
+  const api = useSupabaseClient()
   const { id: oldId } = todo
-  const { todos } = useTodos()
+  const { todos } = await useTodos()
   const index = todos.value.findIndex(({ id }) => id === oldId)
   todos.value.splice(index, 1)
 

yarn.lock

@@ -419,7 +419,7 @@
     unimport "^0.1.6"
     untyped "^0.4.4"
 
-"@nuxt/kit@^3.0.0-rc.6":
+"@nuxt/kit@^3.0.0-rc.5", "@nuxt/kit@^3.0.0-rc.6":
   version "3.0.0-rc.6"
   resolved "https://registry.yarnpkg.com/@nuxt/kit/-/kit-3.0.0-rc.6.tgz#b59c10639cb591bdc5a63164fb352b344230a065"
   integrity sha512-+lxSd6dSWlAzMXfGOPcY4856xnMF1Ck1rycFUZ+K2QYiDXphq/fiW2eMaWLVvqgPyL2Box2WzVDZJ6C5ceptcw==
@@ -527,6 +527,16 @@
     vite-node "^0.18.1"
     vite-plugin-checker "^0.4.9"
 
+"@nuxtjs/supabase@^0.1.19":
+  version "0.1.19"
+  resolved "https://registry.yarnpkg.com/@nuxtjs/supabase/-/supabase-0.1.19.tgz#763e9280505565481db280681f32fa837cc79a55"
+  integrity sha512-ntAxxscRblW9NK86U9sabrDVZ2mH9WkmV0p+ej+lpywWudWL4GaSji60YWj4lxckxS8H8ihHTALsIznSjyrBoQ==
+  dependencies:
+    "@nuxt/kit" "^3.0.0-rc.5"
+    "@supabase/supabase-js" "^1.35.4"
+    defu "^6.0.0"
+    pathe "^0.3.2"
+
 "@rollup/plugin-alias@^3.1.9":
   version "3.1.9"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-alias/-/plugin-alias-3.1.9.tgz#a5d267548fe48441f34be8323fb64d1d4a1b3fdf"