Vue + Firebase Authentication with Facebook Login

If you want Facebook Login in a Vue app today, the cleanest stack is Vue 3 + Firebase Auth modular SDK.
You can implement it quickly, but most issues come from configuration mistakes, not code.

This guide walks through the full setup and the production gotchas that usually waste hours.

Quick Setup Summary

1. Create a Facebook app and copy App ID + App Secret.
2. Enable Facebook in Firebase Authentication and paste those credentials.
3. Add Firebase’s OAuth redirect URI to your Facebook Login settings.
4. In Vue, create a FacebookAuthProvider and use signInWithPopup or signInWithRedirect.
5. Handle auth/account-exists-with-different-credential for multi-provider users.

Prerequisites You Need Before Writing Code

Firebase console setup

• Create or open your Firebase project.
• Go to Authentication -> Sign-in method.
• Enable Facebook.
• Add the App ID and App Secret from Facebook Developers.

Facebook app setup and redirect URI

In your Facebook app settings, add Firebase’s redirect handler URL as a valid OAuth redirect URI:

• https://<your-project-id>.firebaseapp.com/__/auth/handler

If this URI is missing or incorrect, login may start but fail before returning to your app.

Install and Configure Firebase in Vue 3

Install Firebase:

npm install firebase

Create src/firebase.ts:

import { initializeApp } from 'firebase/app'
import { getAuth } from 'firebase/auth'

const firebaseConfig = {
  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
  appId: import.meta.env.VITE_FIREBASE_APP_ID,
}

const app = initializeApp(firebaseConfig)
export const auth = getAuth(app)

If you use VueFire, initialize its auth module so auth state is reactive in components and route guards.

Implement Facebook Login in Vue

Popup flow (desktop-first)

Use popup for desktop-heavy apps:

<script setup lang="ts">
import { ref } from 'vue'
import {
  FacebookAuthProvider,
  signInWithPopup,
  type AuthError,
} from 'firebase/auth'
import { auth } from '@/firebase'

const authError = ref<string | null>(null)

const provider = new FacebookAuthProvider()
provider.setCustomParameters({ display: 'popup' })

async function loginWithFacebookPopup() {
  authError.value = null
  try {
    await signInWithPopup(auth, provider)
  } catch (e) {
    const err = e as AuthError
    authError.value = err.code
  }
}
</script>

Redirect flow (mobile-safe fallback)

Redirect is usually more reliable on mobile browsers and strict popup environments:

import {
  FacebookAuthProvider,
  signInWithRedirect,
  getRedirectResult,
} from 'firebase/auth'
import { auth } from '@/firebase'

const provider = new FacebookAuthProvider()

export async function loginWithFacebookRedirect() {
  await signInWithRedirect(auth, provider)
}

export async function handleRedirectResult() {
  const result = await getRedirectResult(auth)
  return result?.user ?? null
}

Run handleRedirectResult() on app startup after redirect.

Handle account linking errors

If one-email-per-account is enabled in Firebase, users may hit:

• auth/account-exists-with-different-credential

This means the email already exists under another provider (for example Google).
Correct flow:

1. Ask the user to sign in with the existing provider.
2. Link the pending Facebook credential to that signed-in account.

Do not silently fail here. This is one of the highest-friction auth bugs in production apps.

Protect Routes and Manage Auth State

At minimum:

• Observe auth state on app boot.
• Gate protected routes until auth is resolved.
• Redirect unauthenticated users to login.

If you use VueFire, getCurrentUser() is useful inside route guards to avoid race conditions during initial page load.

Also set auth persistence intentionally. Default web behavior persists users across browser restarts; that may or may not match your security policy.

Production Checklist (What Usually Breaks)

• Facebook provider is enabled in Firebase Auth.
• Facebook App ID/Secret in Firebase are correct.
• OAuth redirect URI is added exactly in Facebook settings.
• Your app domain is authorized in Firebase Authentication settings.
• You handle popup-blocked scenarios by falling back to redirect.
• You handle account-exists-with-different-credential.
• You test login in an incognito window and a mobile browser.
• You avoid exposing secrets in client-side source.

FAQ

Final Takeaway

Vue + Firebase is still one of the fastest ways to ship social login, and Facebook works well once configuration is correct.

For most teams, the winning approach is simple:

• Start with popup login.
• Add redirect fallback.
• Implement account-linking handling before launch.

That combination removes most production auth pain while keeping your integration easy to maintain.