How to Use Supabase with Nuxt.js

1# Install the module
2npm install @nuxtjs/supabase
3
4# nuxt.config.ts
5export default defineNuxtConfig({
6  modules: ['@nuxtjs/supabase'],
7  supabase: {
8    redirectOptions: {
9      login: '/login',
10      callback: '/confirm',
11      exclude: ['/', '/about'],
12    },
13  },
14})

1# .env
2SUPABASE_URL=https://your-project.supabase.co
3SUPABASE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

1<script setup lang="ts">
2const client = useSupabaseClient()
3
4const { data: posts, error } = await useAsyncData('posts', async () => {
5  const { data, error } = await client
6    .from('posts')
7    .select('id, title, content, created_at')
8    .eq('published', true)
9    .order('created_at', { ascending: false })
10
11  if (error) throw error
12  return data
13})
14</script>
15
16<template>
17  <div>
18    <h1>Blog Posts</h1>
19    <p v-if="error">Failed to load posts.</p>
20    <article v-for="post in posts" :key="post.id">
21      <h2>{{ post.title }}</h2>
22      <p>{{ post.content }}</p>
23    </article>
24  </div>
25</template>

1<script setup lang="ts">
2const client = useSupabaseClient()
3const user = useSupabaseUser()
4const email = ref('')
5const password = ref('')
6const errorMsg = ref('')
7
8async function handleLogin() {
9  const { error } = await client.auth.signInWithPassword({
10    email: email.value,
11    password: password.value,
12  })
13  if (error) {
14    errorMsg.value = error.message
15  } else {
16    navigateTo('/dashboard')
17  }
18}
19
20async function handleSignup() {
21  const { error } = await client.auth.signUp({
22    email: email.value,
23    password: password.value,
24  })
25  if (error) {
26    errorMsg.value = error.message
27  } else {
28    navigateTo('/confirm')
29  }
30}
31
32async function handleLogout() {
33  await client.auth.signOut()
34  navigateTo('/login')
35}
36</script>
37
38<template>
39  <div v-if="user">
40    <p>Logged in as {{ user.email }}</p>
41    <button @click="handleLogout">Log out</button>
42  </div>
43  <form v-else @submit.prevent="handleLogin">
44    <input v-model="email" type="email" placeholder="Email" required />
45    <input v-model="password" type="password" placeholder="Password" required />
46    <p v-if="errorMsg" class="text-red-500">{{ errorMsg }}</p>
47    <button type="submit">Log in</button>
48    <button type="button" @click="handleSignup">Sign up</button>
49  </form>
50</template>

1<script setup lang="ts">
2const client = useSupabaseClient()
3const user = useSupabaseUser()
4const title = ref('')
5const content = ref('')
6
7async function createPost() {
8  if (!user.value) return
9
10  const { data, error } = await client
11    .from('posts')
12    .insert({
13      title: title.value,
14      content: content.value,
15      author_id: user.value.id,
16      published: false,
17    })
18    .select()
19
20  if (error) {
21    console.error('Insert failed:', error.message)
22  } else {
23    navigateTo(`/posts/${data[0].id}`)
24  }
25}
26</script>

1// middleware/auth.ts
2export default defineNuxtRouteMiddleware(async (to) => {
3  const user = useSupabaseUser()
4
5  if (!user.value) {
6    return navigateTo('/login')
7  }
8})
9
10// middleware/admin.ts
11export default defineNuxtRouteMiddleware(async (to) => {
12  const user = useSupabaseUser()
13  const client = useSupabaseClient()
14
15  if (!user.value) {
16    return navigateTo('/login')
17  }
18
19  // Check admin role from profiles table
20  const { data } = await client
21    .from('profiles')
22    .select('role')
23    .eq('id', user.value.id)
24    .single()
25
26  if (data?.role !== 'admin') {
27    return navigateTo('/unauthorized')
28  }
29})
30
31// pages/admin.vue
32<script setup lang="ts">
33definePageMeta({
34  middleware: 'admin',
35})
36</script>