How to add Google login in Vue

import { ref, onMounted } from 'vue'

export function useGoogleAuth() {
    const isLoaded = ref(false)
    const user = ref(null)

    const initializeGoogleAuth = () => {
        return new Promise((resolve) => {
            if (window.google) {
                resolve()
                return
            }

            const script = document.createElement('script')
            script.src = 'https://accounts.google.com/gsi/client'
            script.onload = resolve
            document.head.appendChild(script)
        })
    }

    const handleCredentialResponse = async (response) => {
        try {
            const credential = response.credential
            const decoded = JSON.parse(atob(credential.split('.')[1]))

            const authResponse = await fetch('/api/auth/google', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ token: credential })
            })

            const userData = await authResponse.json()
            user.value = userData.user
            localStorage.setItem('token', userData.token)

        } catch (error) {
            console.error('Google auth error:', error)
        }
    }

    const initializeButton = () => {
        window.google.accounts.id.initialize({
            client_id: process.env.VUE_APP_GOOGLE_CLIENT_ID,
            callback: handleCredentialResponse
        })

        window.google.accounts.id.renderButton(
            document.getElementById('google-signin-btn'),
            { theme: 'outline', size: 'large' }
        )
    }

    const signOut = () => {
        window.google.accounts.id.disableAutoSelect()
        user.value = null
        localStorage.removeItem('token')
    }

    onMounted(async () => {
        await initializeGoogleAuth()
        initializeButton()
        isLoaded.value = true
    })

    return { user, isLoaded, signOut }
}