Authentication is crucial for many types of applications:

• Content Platforms: Protect premium content
• Social Apps: Personalize user experiences
• E-commerce: Secure user data and orders
• Business Tools: Control access to sensitive information

Without authentication, anyone could access any content or feature in your app. That's not what you want for a professional application.

When building login systems, I follow these principles:

• Keep it Simple: Start with basic email/password or social login
• User Experience First: Make login frictionless
• Security Matters: Use established providers when possible
• Progressive Enhancement: Add features as needed

For this project, we'll use Supabase Auth because it's secure, easy to implement, and provides a great developer experience.

We'll build a video list application where:

• Anyone can see the video titles
• Only logged-in users can watch the videos
• Users can save their favorite videos
• Admin users can add new videos

Here's a basic structure for our video list component:

<script setup>
import { ref, onMounted } from 'vue'
import { supabase } from '@/lib/supabase'

const videos = ref([])
const user = ref(null)

async function fetchVideos() {
  const { data, error } = await supabase
    .from('videos')
    .select('*')
  
  if (error) {
    console.error('Error fetching videos:', error)
    return
  }
  
  videos.value = data
}

onMounted(fetchVideos)
</script>

<template>
  <div class="video-list">
    <h2>Featured Videos</h2>
    <div v-for="video in videos" :key="video.id" class="video-card">
      <h3></h3>
      <p></p>
      <div v-if="user">
        <video :src="video.url" controls></video>
      </div>
      <div v-else>
        <p>Please log in to watch this video</p>
      </div>
    </div>
  </div>
</template>

What Is It?

Supabase is an open-source Firebase alternative that provides:

• Authentication: User management and social logins
• Database: PostgreSQL-based database
• Storage: File storage for videos and images
• Real-time: Live updates and subscriptions

To get started with Supabase:

# Install Supabase client
npm install @supabase/supabase-js

# Create a new project at supabase.com
# Then initialize the client:

// lib/supabase.js
import { createClient } from '@supabase/supabase-js'

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
const supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY

export const supabase = createClient(supabaseUrl, supabaseKey)

Let's add Google authentication to our app:

<script setup>
import { ref } from 'vue'
import { supabase } from '@/lib/supabase'

const user = ref(null)

async function signInWithGoogle() {
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: 'google',
    options: {
      redirectTo: window.location.origin
    }
  })
  
  if (error) {
    console.error('Error signing in:', error)
  }
}

async function signOut() {
  const { error } = await supabase.auth.signOut()
  if (error) {
    console.error('Error signing out:', error)
  }
}
</script>

<template>
  <div class="auth-buttons">
    <button v-if="!user" @click="signInWithGoogle">
      Sign in with Google
    </button>
    <button v-else @click="signOut">
      Sign Out
    </button>
  </div>
</template>

To deploy your app with authentication:

• Set up your environment variables in Netlify
• Configure your OAuth providers in Supabase
• Add your production URLs to the allowed redirects
• Test the authentication flow in production