Vue + Firebase Security Blueprint

To secure a Vue + Firebase SPA, you need to: (1) replace test-mode Firestore rules with production security rules, (2) use VueFire for reactive auth state management, (3) configure Storage rules for file uploads, (4) add production domains to authorized domains, and (5) understand that vue-router guards are UX-only-Firestore rules are your security. This blueprint covers Vue 3 patterns with VueFire integration.

TL;DR

Vue SPAs with Firebase depend on Firestore Security Rules for protection. Key tasks: replace test-mode rules with production rules, use VueFire for reactive auth state, configure Storage rules, and remember that vue-router guards are UX-only-rules are your security.

Firestore Rules Firebase

firestore.rules

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /users/{userId} {
      allow read, update: if request.auth != null
        && request.auth.uid == userId;
    }
    match /posts/{postId} {
      allow read: if true;
      allow write: if request.auth != null
        && request.resource.data.authorId == request.auth.uid;
    }
  }
}

VueFire Auth Vue

composables/useAuth.ts

import { useCurrentUser, useFirebaseAuth } from 'vuefire'
import { signInWithPopup, GoogleAuthProvider, signOut } from 'firebase/auth'

export function useAuth() {
  const user = useCurrentUser()
  const auth = useFirebaseAuth()

  const login = () => signInWithPopup(auth!, new GoogleAuthProvider())
  const logout = () => signOut(auth!)

  return { user, login, logout }
}

Router Guards Vue

router/index.ts - UX only

import { getCurrentUser } from 'vuefire'

router.beforeEach(async (to) => {
  if (to.meta.requiresAuth) {
    const currentUser = await getCurrentUser()
    if (!currentUser) {
      return { path: '/login', query: { redirect: to.fullPath } }
    }
  }
})

Rules are your security. In a Vue SPA, there's no server. Your Firestore rules are the only thing preventing unauthorized access.