Vue Firebase Auth Setup

yarn create vue
# or
npm init vue@latest

# Then choose:
# - Vue 3
# - Vite
# - TypeScript or JavaScript (your choice)
# - Router (yes)
# - Pinia (yes)
# - Linter / Prettier (optional)

cd your-project
yarn install
yarn add firebase
yarn add vuetify

yarn add vuetify@next

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
import { createVuetify } from 'vuetify'
import 'vuetify/styles'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import router from './router'

const vuetify = createVuetify({ components, directives })

const app = createApp(App)
app.use(createPinia())
app.use(router)
app.use(vuetify)
app.mount('#app')

// src/firebase.ts
import { initializeApp } from 'firebase/app'
import { getAuth, GoogleAuthProvider, GithubAuthProvider } from 'firebase/auth'

const firebaseConfig = {
  apiKey: 'YOUR_KEY',
  authDomain: 'YOUR_DOMAIN',
  projectId: 'YOUR_PROJECT_ID',
  appId: 'YOUR_APP_ID',
}

const app = initializeApp(firebaseConfig)

export const auth = getAuth(app)
export const googleProvider = new GoogleAuthProvider()
export const githubProvider = new GithubAuthProvider()

// src/stores/auth.ts
import { defineStore } from 'pinia'
import { auth } from '@/firebase'
import { onAuthStateChanged, signOut, signInWithEmailAndPassword, createUserWithEmailAndPassword, signInWithPopup } from 'firebase/auth'

export const useAuthStore = defineStore('auth', {
  state: () => ({
    user: null as null | any,
    loading: false,
  }),
  actions: {
    async register(email: string, password: string) {
      this.loading = true
      const res = await createUserWithEmailAndPassword(auth, email, password)
      this.user = res.user
      this.loading = false
    },
    async login(email: string, password: string) {
      this.loading = true
      const res = await signInWithEmailAndPassword(auth, email, password)
      this.user = res.user
      this.loading = false
    },
    async loginWithProvider(provider: any) {
      const res = await signInWithPopup(auth, provider)
      this.user = res.user
    },
    async logout() {
      await signOut(auth)
      this.user = null
    },
    fetchUser() {
      onAuthStateChanged(auth, (user) => {
        this.user = user
      })
    },
  },
})

<template>
  <v-container>
    <v-card class="mx-auto mt-10" max-width="400">
      <v-card-title>Login</v-card-title>
      <v-card-text>
        <v-form @submit.prevent="handleLogin">
          <v-text-field v-model="email" label="Email" />
          <v-text-field v-model="password" type="password" label="Password" />
          <v-btn type="submit" color="primary" block>Login</v-btn>
        </v-form>

        <v-divider class="my-4"></v-divider>

        <v-btn color="red" block @click="googleLogin">Login with Google</v-btn>
        <v-btn color="black" block @click="githubLogin">Login with GitHub</v-btn>
      </v-card-text>
    </v-card>
  </v-container>
</template>

<script setup>
import { ref } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { googleProvider, githubProvider } from '@/firebase'

const authStore = useAuthStore()
const email = ref('')
const password = ref('')

const handleLogin = async () => {
  await authStore.login(email.value, password.value)
}

const googleLogin = async () => {
  await authStore.loginWithProvider(googleProvider)
}

const githubLogin = async () => {
  await authStore.loginWithProvider(githubProvider)
}
</script>

{
  path: '/dashboard',
  name: 'Dashboard',
  component: () => import('@/views/Dashboard.vue'),
  meta: { requiresAuth: true }
}

router.beforeEach((to, from, next) => {
  const authStore = useAuthStore()
  if (to.meta.requiresAuth && !authStore.user) {
    next({ name: 'Login' })
  } else {
    next()
  }
})