Fix

Author: MartinBraquet

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

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<PageProps>) {
 
   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 code = url.searchParams.get('code');
-      if (!code) {
-        console.error('No code found in URL');
-        return;
-      }
-
-      const codeVerifier = localStorage.getItem('pkce_verifier');
-
-      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);
+      const {idToken, accessToken} = event
+      // Create a Firebase credential from the Google tokens
+      const credential = GoogleAuthProvider.credential(idToken, accessToken)
+
+      // Sign in with Firebase using the credential
+      const userCredential = await signInWithCredential(auth, credential)
+
+      console.log('Firebase user:', userCredential.user)
+
+      return userCredential
     }
 
     // Expose globally for native bridge

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()
   }, []);
 }