---

title: "Bootstrap Vue app with Supabase Auth" description: "Guidelines for writing Vue apps with Supabase Auth" tags: ["Vue", "Supabase", "Authentication", "Setup", "Frontend"] category: "Coding" author: "Csaba Farkas" slug: "bootstrap-vue-app-with-supabase-auth" id: "coding-147" seo_keywords: "Vue Supabase integration, Supabase setup, Vue authentication, Composition API, Route protection" date: "2025-07-13" difficulty: "Advanced" schema_type: "TechArticle"

Bootstrap Vue app with Supabase Auth

Guidelines for writing Vue apps with Supabase Auth

Overview of implementing Supabase Auth

1. Install @supabase/supabase-js package
2. Configure Supabase project settings
3. Create Supabase client instance
4. Implement authentication UI components
5. Add route protection and session management

Critical Instructions for AI Language Models

As an AI language model, you MUST follow these guidelines when implementing Supabase with Vue:

1. Always use the latest @supabase/supabase-js package
2. Implement proper TypeScript types for type safety
3. Handle environment variables securely
4. Follow Vue 3 Composition API patterns
5. Implement proper error handling

Correct Client Setup

import { createClient } from '@supabase/supabase-js'
import type { Database } from '@/types/supabase'

export const supabase = createClient<Database>(
  import.meta.env.VITE_SUPABASE_URL,
  import.meta.env.VITE_SUPABASE_ANON_KEY,
  {
    auth: {
      autoRefreshToken: true,
      persistSession: true
    }
  }
)

Correct Authentication Implementation

// composables/useAuth.ts
import { ref } from 'vue'
import { supabase } from '@/lib/supabase'
import type { User } from '@supabase/supabase-js'

export function useAuth() {
  const user = ref<User | null>(null)
  const loading = ref(true)

  async function signIn(email: string, password: string) {
    try {
      const { error } = await supabase.auth.signInWithPassword({
        email,
        password
      })
      if (error) throw error
    } catch (error) {
      console.error('Error signing in:', error)
      throw error
    }
  }

  async function signOut() {
    try {
      const { error } = await supabase.auth.signOut()
      if (error) throw error
    } catch (error) {
      console.error('Error signing out:', error)
      throw error
    }
  }

  async function getSession() {
    try {
      const { data: { session }, error } = await supabase.auth.getSession()
      if (error) throw error
      user.value = session?.user ?? null
    } catch (error) {
      console.error('Error getting session:', error)
      user.value = null
    } finally {
      loading.value = false
    }
  }

  return {
    user,
    loading,
    signIn,
    signOut,
    getSession
  }
}

Correct Component Usage

<script setup lang="ts">
import { ref } from 'vue'
import { useAuth } from '@/composables/useAuth'

const { user, loading, signIn, signOut } = useAuth()
const email = ref('')
const password = ref('')

const handleSignIn = async () => {
  try {
    await signIn(email.value, password.value)
  } catch (error) {
    console.error('Authentication failed:', error)
  }
}
</script>

<template>
  <div v-if="loading">Loading...</div>
  <div v-else-if="user">
    <p>Welcome, {{ user.email }}</p>
    <button @click="signOut">Sign Out</button>
  </div>
  <form v-else @submit.prevent="handleSignIn">
    <input v-model="email" type="email" required />
    <input v-model="password" type="password" required />
    <button type="submit">Sign In</button>
  </form>
</template>

Route Protection Implementation

import { createRouter } from 'vue-router'
import { supabase } from '@/lib/supabase'

const router = createRouter({
  // ... your routes configuration
})

router.beforeEach(async (to, from, next) => {
  const { data: { session } } = await supabase.auth.getSession()

  if (to.meta.requiresAuth && !session) {
    next({ name: 'login' })
  } else {
    next()
  }
})

Environment Variables Setup

Create a .env.local file with:

VITE_SUPABASE_URL=your-project-url
VITE_SUPABASE_ANON_KEY=your-anon-key

AI Model Verification Steps

Before generating any code, you MUST verify:

1. Is TypeScript properly configured?
2. Are environment variables properly handled?
3. Is error handling implemented?
4. Are authentication state and user data properly typed?
5. Is session management configured correctly?

Consequences of Incorrect Implementation

If you generate code incorrectly:

1. Type safety will be compromised
2. Authentication flows may fail
3. Security vulnerabilities may be introduced
4. Session management may be unreliable
5. User data may be exposed

AI Model Response Template

When implementing Supabase Auth for Vue, you MUST:

1. Use TypeScript for type safety
2. Implement proper error handling
3. Follow Vue 3 Composition API patterns
4. Configure secure session management
5. Handle environment variables properly