How to integrate OAuth in Vue

// composables/useOAuth.js
import { ref } from 'vue'
import { useRouter } from 'vue-router'

export function useOAuth() {
    const router = useRouter()
    const isLoading = ref(false)
    const error = ref(null)

    const loginWithGoogle = () => {
        isLoading.value = true
        const clientId = import.meta.env.VITE_GOOGLE_CLIENT_ID
        const redirectUri = encodeURIComponent(window.location.origin + '/auth/callback')
        const scope = encodeURIComponent('openid email profile')

        const authUrl = `https://accounts.google.com/o/oauth2/v2/auth?` +
            `client_id=${clientId}&` +
            `redirect_uri=${redirectUri}&` +
            `scope=${scope}&` +
            `response_type=code&` +
            `state=google`

        window.location.href = authUrl
    }

    const loginWithGitHub = () => {
        isLoading.value = true
        const clientId = import.meta.env.VITE_GITHUB_CLIENT_ID
        const redirectUri = encodeURIComponent(window.location.origin + '/auth/callback')
        const scope = encodeURIComponent('user:email')

        const authUrl = `https://github.com/login/oauth/authorize?` +
            `client_id=${clientId}&` +
            `redirect_uri=${redirectUri}&` +
            `scope=${scope}&` +
            `state=github`

        window.location.href = authUrl
    }

    const handleCallback = async (code, state) => {
        try {
            isLoading.value = true
            const response = await fetch('/api/auth/oauth/callback', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ code, provider: state })
            })

            if (!response.ok) throw new Error('OAuth callback failed')

            const data = await response.json()
            localStorage.setItem('token', data.token)
            localStorage.setItem('user', JSON.stringify(data.user))

            router.push('/dashboard')
        } catch (err) {
            error.value = err.message
        } finally {
            isLoading.value = false
        }
    }

    return {
        isLoading,
        error,
        loginWithGoogle,
        loginWithGitHub,
        handleCallback
    }
}

// components/LoginForm.vue
<template>
  <div class="login-form">
    <button @click="loginWithGoogle" :disabled="isLoading">
      Login with Google
    </button>
    <button @click="loginWithGitHub" :disabled="isLoading">
      Login with GitHub
    </button>
    <div v-if="error" class="error">{{ error }}</div>
  </div>
</template>

<script setup>
import { useOAuth } from '@/composables/useOAuth'

const { isLoading, error, loginWithGoogle, loginWithGitHub } = useOAuth()
</script>