Clean and refactor oauth redirect

Author: MartinBraquet

web/lib/firebase/oauth.ts

@@ -0,0 +1,49 @@
+import {unauthedApi} from "common/util/api";
+import {GoogleAuthProvider, signInWithCredential} from "firebase/auth";
+import {auth} from "web/lib/firebase/users";
+
+export async function fetchToken() {
+  const params = new URLSearchParams(window.location.search);
+  console.log('/auth/callback', params);
+  const code = params.get('code');
+
+  if (code) {
+    // Send code back to the native app
+    window.location.href = `com.compassmeet://auth?code=${encodeURIComponent(code)}}`;
+  } else {
+    document.body.textContent = 'Missing code in redirect.';
+  }
+}
+
+export 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;
+  }
+
+  try {
+    const {result} = await unauthedApi('auth-google', {code})
+    const googleTokens = result.tokens
+    // console.log('/auth-google tokens', googleTokens);
+    // Create a Firebase credential from the Google tokens
+    const credential = GoogleAuthProvider.credential(googleTokens.id_token, googleTokens.access_token)
+    // Sign in with Firebase using the credential
+    const userCredential = await signInWithCredential(auth, credential)
+    // console.log('Creds:', userCredential)
+    // console.log('Firebase user:', userCredential.user)
+    return userCredential
+  } catch (e) {
+    console.error('Error during OAuth flow:', e);
+    return
+  }
+}

web/lib/firebase/users.ts

@@ -57,15 +57,13 @@ export function writeReferralInfo(
  * @public
  */
 export async function webviewGoogleSignin() {
-
   const params = {
     client_id: GOOGLE_CLIENT_ID,
     redirect_uri: REDIRECT_URI,
     response_type: 'code',
     scope: 'openid email profile',
   }
   console.log('params', params)
-
   window.open(`https://accounts.google.com/o/oauth2/v2/auth?${new URLSearchParams(params)}`, '_system');
 }
 

web/pages/_app.tsx

@@ -12,12 +12,10 @@ 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 {unauthedApi} from "common/util/api";
-import {GoogleAuthProvider, signInWithCredential} from "firebase/auth";
-import {auth} from "web/lib/firebase/users";
 import {isAndroidWebView} from "web/lib/util/webview";
 import {Capacitor} from '@capacitor/core';
 import {StatusBar, Style} from '@capacitor/status-bar';
+import {oauthRedirect} from "web/lib/firebase/oauth";
 
 if (Capacitor.isNativePlatform()) {
   // Only runs on iOS/Android native
@@ -79,39 +77,6 @@ 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;
-      }
-
-      try {
-        const {result} = await unauthedApi('auth-google', {code})
-        const googleTokens = result.tokens
-        // console.log('/auth-google tokens', googleTokens);
-        // Create a Firebase credential from the Google tokens
-        const credential = GoogleAuthProvider.credential(googleTokens.id_token, googleTokens.access_token)
-        // Sign in with Firebase using the credential
-        const userCredential = await signInWithCredential(auth, credential)
-        // console.log('Creds:', userCredential)
-        // console.log('Firebase user:', userCredential.user)
-        return userCredential
-      } catch (e) {
-        console.error('Error during OAuth flow:', e);
-        return
-      }
-    }
-
     // Expose globally for native bridge
     (window as any).oauthRedirect = oauthRedirect;
   }, []);

web/pages/auth/callback.tsx

@@ -1,20 +1,8 @@
 import {useEffect} from "react";
+import {fetchToken} from "web/lib/firebase/oauth";
 
 export default function GoogleAuthCallback() {
   useEffect(() => {
-    async function fetchToken() {
-      const params = new URLSearchParams(window.location.search);
-      console.log('/auth/callback', params);
-      const code = params.get('code');
-
-      if (code) {
-        // Send code back to the native app
-        window.location.href = `com.compassmeet://auth?code=${encodeURIComponent(code)}}`;
-      } else {
-        document.body.textContent = 'Missing code in redirect.';
-      }
-    }
-
     fetchToken()
   }, []);
 }