How to add GitHub login in Vue

import { ref, onMounted } from 'vue'

export function useGitHubAuth() {
    const user = ref(null)
    const isLoading = ref(false)
    const error = ref(null)

    const GITHUB_CLIENT_ID = process.env.VUE_APP_GITHUB_CLIENT_ID
    const REDIRECT_URI = `${window.location.origin}/auth/callback`

    const initiateGitHubLogin = () => {
        const scope = 'user:email'
        const authUrl = `https://github.com/login/oauth/authorize?client_id=${GITHUB_CLIENT_ID}&redirect_uri=${REDIRECT_URI}&scope=${scope}`
        window.location.href = authUrl
    }

    const exchangeCodeForToken = async (code) => {
        try {
            isLoading.value = true
            error.value = null

            const response = await fetch('/api/auth/github', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ code, redirect_uri: REDIRECT_URI })
            })

            if (!response.ok) {
                throw new Error('Authentication failed')
            }

            const data = await response.json()
            user.value = data.user
            localStorage.setItem('github_token', data.access_token)

        } catch (err) {
            error.value = err.message
        } finally {
            isLoading.value = false
        }
    }

    const fetchUserProfile = async (token) => {
        try {
            const response = await fetch('https://api.github.com/user', {
                headers: { Authorization: `Bearer ${token}` }
            })

            if (response.ok) {
                const userData = await response.json()
                user.value = userData
            }
        } catch (err) {
            console.error('Failed to fetch user profile:', err)
        }
    }

    const logout = () => {
        user.value = null
        localStorage.removeItem('github_token')
        error.value = null
    }

    onMounted(() => {
        const token = localStorage.getItem('github_token')
        if (token) {
            fetchUserProfile(token)
        }

        // Handle OAuth callback
        const urlParams = new URLSearchParams(window.location.search)
        const code = urlParams.get('code')
        if (code) {
            exchangeCodeForToken(code)
            // Clean up URL
            window.history.replaceState({}, document.title, window.location.pathname)
        }
    })

    return {
        user,
        isLoading,
        error,
        initiateGitHubLogin,
        logout
    }
}