How to Use Firebase Auth with Vue.js

1npm install firebase

1// src/lib/firebase.ts
2import { initializeApp } from 'firebase/app'
3import { getAuth } from 'firebase/auth'
4
5const firebaseConfig = {
6  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
7  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
8  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
9  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
10  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
11  appId: import.meta.env.VITE_FIREBASE_APP_ID
12}
13
14const app = initializeApp(firebaseConfig)
15export const auth = getAuth(app)

1// src/composables/useAuth.ts
2import { ref, onMounted, onUnmounted } from 'vue'
3import { auth } from '@/lib/firebase'
4import {
5  onAuthStateChanged,
6  signInWithPopup,
7  GoogleAuthProvider,
8  signInWithEmailAndPassword,
9  createUserWithEmailAndPassword,
10  signOut,
11  type User
12} from 'firebase/auth'
13
14export function useAuth() {
15  const user = ref<User | null>(null)
16  const loading = ref(true)
17  let unsubscribe: (() => void) | null = null
18
19  onMounted(() => {
20    unsubscribe = onAuthStateChanged(auth, (firebaseUser) => {
21      user.value = firebaseUser
22      loading.value = false
23    })
24  })
25
26  onUnmounted(() => {
27    unsubscribe?.()
28  })
29
30  async function loginWithGoogle() {
31    const provider = new GoogleAuthProvider()
32    await signInWithPopup(auth, provider)
33  }
34
35  async function loginWithEmail(email: string, password: string) {
36    await signInWithEmailAndPassword(auth, email, password)
37  }
38
39  async function registerWithEmail(email: string, password: string) {
40    await createUserWithEmailAndPassword(auth, email, password)
41  }
42
43  async function logout() {
44    await signOut(auth)
45  }
46
47  return { user, loading, loginWithGoogle, loginWithEmail, registerWithEmail, logout }
48}

1<script setup lang="ts">
2import { ref } from 'vue'
3import { useAuth } from '@/composables/useAuth'
4
5const { user, loading, loginWithGoogle, loginWithEmail, logout } = useAuth()
6const email = ref('')
7const password = ref('')
8</script>
9
10<template>
11  <div v-if="loading">Checking auth...</div>
12  <div v-else-if="user">
13    <p>Welcome, {{ user.displayName || user.email }}</p>
14    <button @click="logout">Sign out</button>
15  </div>
16  <div v-else>
17    <button @click="loginWithGoogle">Sign in with Google</button>
18    <form @submit.prevent="loginWithEmail(email, password)">
19      <input v-model="email" type="email" placeholder="Email" />
20      <input v-model="password" type="password" placeholder="Password" />
21      <button type="submit">Sign in</button>
22    </form>
23  </div>
24</template>

1// src/router/index.ts
2import { createRouter, createWebHistory } from 'vue-router'
3import { auth } from '@/lib/firebase'
4import { onAuthStateChanged } from 'firebase/auth'
5
6function getCurrentUser() {
7  return new Promise((resolve) => {
8    const unsubscribe = onAuthStateChanged(auth, (user) => {
9      unsubscribe()
10      resolve(user)
11    })
12  })
13}
14
15const router = createRouter({
16  history: createWebHistory(),
17  routes: [
18    { path: '/', component: () => import('@/views/Home.vue') },
19    { path: '/login', component: () => import('@/views/Login.vue') },
20    { path: '/dashboard', component: () => import('@/views/Dashboard.vue'), meta: { requiresAuth: true } }
21  ]
22})
23
24router.beforeEach(async (to) => {
25  if (to.meta.requiresAuth) {
26    const user = await getCurrentUser()
27    if (!user) return '/login'
28  }
29})
30
31export default router