fix: Google Sign-In - Firebase Admin credentials via env var + mobile redirect flow

This commit is contained in:
2026-02-23 19:31:47 -05:00
parent b75c4cc0a7
commit f5fa086356
4 changed files with 96 additions and 15 deletions

View File

@ -1,5 +1,11 @@
import { initializeApp } from 'firebase/app';
import { getAuth, GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
import {
getAuth,
GoogleAuthProvider,
signInWithPopup,
signInWithRedirect,
getRedirectResult
} from 'firebase/auth';
const firebaseConfig = {
apiKey: "AIzaSyAG8nmGLHYmXGkl018NjW2sMcIiutM4ne0",
@ -14,17 +20,46 @@ const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const googleProvider = new GoogleAuthProvider();
export const signInWithGoogle = async () => {
try {
// Detect if the user is on a mobile device
const isMobile = () => {
return /Android|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i.test(navigator.userAgent);
};
/**
* Signs in with Google.
* - Uses signInWithPopup on desktop (fast, no page reload)
* - Uses signInWithRedirect on mobile (avoids popup blocking on mobile browsers)
*/
export const signInWithGoogle = async (): Promise<{ user: any; token: string }> => {
if (isMobile()) {
// On mobile, redirect flow is more reliable
await signInWithRedirect(auth, googleProvider);
// The page will reload; the result is handled by getGoogleRedirectResult() on app load
// We return a never-resolving promise to keep the UI in loading state
return new Promise(() => { });
} else {
// On desktop, use popup
const result = await signInWithPopup(auth, googleProvider);
// This gives you a Google Access Token. You can use it to access the Google API.
const token = await result.user.getIdToken();
return {
user: result.user,
token: token
};
} catch (error) {
console.error("Error signing in with Google", error);
throw error;
return { user: result.user, token };
}
};
/**
* Call this once when the app loads (e.g., in App.vue or main.ts) to
* handle the result from a Google redirect login on mobile.
* Returns null if there is no pending redirect result.
*/
export const getGoogleRedirectResult = async (): Promise<{ user: any; token: string } | null> => {
try {
const result = await getRedirectResult(auth);
if (result && result.user) {
const token = await result.user.getIdToken();
return { user: result.user, token };
}
return null;
} catch (error) {
console.error("Error getting redirect result:", error);
return null;
}
};

View File

@ -1,10 +1,36 @@
<script setup lang="ts">
import { ref } from 'vue'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import LoginForm from '@/components/auth/LoginForm.vue'
import RegisterForm from '@/components/auth/RegisterForm.vue'
import { getGoogleRedirectResult } from '@/firebaseConfig'
import { authService } from '@/services/authService'
import { useAuthStore } from '@/stores/auth'
const isLogin = ref(true)
const toggleAuth = () => { isLogin.value = !isLogin.value }
const router = useRouter()
const authStore = useAuthStore()
// Handle redirect result from Google Sign-In on mobile
// (signInWithRedirect reloads the page; we catch the result here on load)
onMounted(async () => {
try {
const result = await getGoogleRedirectResult()
if (result) {
const response = await authService.googleLogin(result.token)
authStore.login(response.access_token, response.role, response.full_name)
const role = response.role.toUpperCase()
if (role === 'ADMIN') router.push('/admin')
else if (role === 'DRIVER') router.push('/driver')
else if (role === 'PROMOTER') router.push('/promoter')
else router.push('/map')
}
} catch (e) {
// No redirect result pending, or error — ignore silently
console.warn('Google redirect result:', e)
}
})
</script>
<template>