diff --git a/common/src/envs/constants.ts b/common/src/envs/constants.ts index 795ccf40..db83abb4 100644 --- a/common/src/envs/constants.ts +++ b/common/src/envs/constants.ts @@ -58,6 +58,8 @@ console.debug(`Running in ${HOSTING_ENV} (${ENV})`,); // } export const DOMAIN = IS_LOCAL ? LOCAL_WEB_DOMAIN : ENV_CONFIG.domain +const protocol = IS_LOCAL ? 'http' : 'https' +export const WEB_URL = `${protocol}://${DOMAIN}` export const BACKEND_DOMAIN = IS_LOCAL ? LOCAL_BACKEND_DOMAIN : ENV_CONFIG.backendDomain export const FIREBASE_CONFIG = ENV_CONFIG.firebaseConfig export const PROJECT_ID = ENV_CONFIG.firebaseConfig.projectId diff --git a/web/pages/_app.tsx b/web/pages/_app.tsx index 1103ff4d..4d6414cb 100644 --- a/web/pages/_app.tsx +++ b/web/pages/_app.tsx @@ -12,7 +12,8 @@ import clsx from 'clsx' import {initTracking} from 'web/lib/service/analytics' import WebPush from "web/lib/service/web-push"; import AndroidPush from "web/lib/service/android-push"; -import {GOOGLE_CLIENT_ID} from "web/lib/firebase/users"; +import {GoogleAuthProvider, signInWithCredential} from "firebase/auth"; +import {auth} from "web/lib/firebase/users"; // See https://nextjs.org/docs/basic-features/font-optimization#google-fonts // and if you add a font, you must add it to tailwind config as well for it to work. @@ -66,37 +67,16 @@ function MyApp({Component, pageProps}: AppProps) { useEffect(() => { async function oauthRedirect(event: any) { - console.log('Received oauthRedirect event:', event); - const detail = event.data - console.log('OAuth data:', detail); - if (!detail) { - console.error('No detail found in event'); - return; - } - const url = new URL(detail); + const {idToken, accessToken} = event + // Create a Firebase credential from the Google tokens + const credential = GoogleAuthProvider.credential(idToken, accessToken) - const code = url.searchParams.get('code'); - if (!code) { - console.error('No code found in URL'); - return; - } + // Sign in with Firebase using the credential + const userCredential = await signInWithCredential(auth, credential) - const codeVerifier = localStorage.getItem('pkce_verifier'); + console.log('Firebase user:', userCredential.user) - const tokenResponse = await fetch('https://oauth2.googleapis.com/token', { - method: 'POST', - headers: {'Content-Type': 'application/x-www-form-urlencoded'}, - body: new URLSearchParams({ - client_id: GOOGLE_CLIENT_ID, - code, - code_verifier: codeVerifier!, - redirect_uri: 'com.compassmeet://auth', - grant_type: 'authorization_code', - }), - }); - - const tokens = await tokenResponse.json(); - console.log('Tokens:', tokens); + return userCredential } // Expose globally for native bridge diff --git a/web/pages/auth/callback.tsx b/web/pages/auth/callback.tsx index 66127f86..7d9f3426 100644 --- a/web/pages/auth/callback.tsx +++ b/web/pages/auth/callback.tsx @@ -1,18 +1,41 @@ import {useEffect} from "react"; +import {GOOGLE_CLIENT_ID} from "web/lib/firebase/users"; export default function GoogleAuthCallback() { useEffect(() => { - const params = new URLSearchParams(window.location.search); - const code = params.get('code'); - const state = params.get('state'); - console.log('/auth/callback code', code); + async function fetchToken() { + const params = new URLSearchParams(window.location.search); + const code = params.get('code'); + const state = params.get('state'); + console.log('/auth/callback code', code); - if (code) { - // Send code back to native app - const deepLink = `com.compassmeet://auth?code=${encodeURIComponent(code)}&state=${encodeURIComponent(state || '')}`; - window.location.href = deepLink; - } else { - document.body.textContent = 'Missing code in redirect.'; + if (code) { + const codeVerifier = localStorage.getItem('pkce_verifier'); + const body = new URLSearchParams({ + client_id: GOOGLE_CLIENT_ID, + code, + code_verifier: codeVerifier!, + redirect_uri: 'com.compassmeet://auth', + grant_type: 'authorization_code', + }); + console.log('Body:', body); + const tokenResponse = await fetch('https://oauth2.googleapis.com/token', { + method: 'POST', + headers: {'Content-Type': 'application/x-www-form-urlencoded'}, + body: body, + }); + const tokens = await tokenResponse.json(); + console.log('Tokens:', tokens); + + // Send code back to the native app + // const deepLink = `com.compassmeet://auth?tokens=${encodeURIComponent(tokens)}}`; + // window.location.href = deepLink; + + } else { + document.body.textContent = 'Missing code in redirect.'; + } } + + fetchToken() }, []); }