Spaces:

Pepguy
/

terms

Running

App Files Files Community

Pepguy commited on Oct 31, 2025

Commit

c89ea72

verified ·

1 Parent(s): 0299d9a

Update signing.html

Browse files

Files changed (1) hide show

signing.html +145 -67

signing.html CHANGED Viewed

@@ -54,11 +54,17 @@
         color: #d32f2f;
         margin-top: 1rem;
         font-size: 0.9rem;
       }
       .loading {
         margin-top: 1rem;
         opacity: 0.7;
       }
     </style>
   </head>
   <body>
@@ -68,34 +74,40 @@
       <button id="authButton" onclick="handleAuth()">Sign in with Google</button>
       <p class="loading" id="loading" style="display: none;">Processing...</p>
       <p class="error" id="error"></p>
     </div>
-    <!-- Firebase SDK -->
     <script type="module">
       import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js';
-      import { getAuth, signInWithPopup,
-              signInWithRedirect,
-              GoogleAuthProvider, onAuthStateChanged } from 'https://www.gstatic.com/firebasejs/10.7.1/firebase-auth.js';
-      // Firebase configuration - REPLACE WITH YOUR CONFIG
       const firebaseConfig = {
         apiKey: "AIzaSyAJZ5UwyLo4b4L8_G7Nocw0nj7dhyBZ_yU",
-  authDomain: "cartpost-db-06.firebaseapp.com",
-  projectId: "cartpost-db-06",
-  storageBucket: "cartpost-db-06.firebasestorage.app",
-  messagingSenderId: "212802992706",
-  appId: "1:212802992706:web:2a32a453c42cbc3bdfcbdb",
-  measurementId: "G-JYWF6B9MVZ"
       };
-      // Initialize Firebase
       const app = initializeApp(firebaseConfig);
       const auth = getAuth(app);
       const provider = new GoogleAuthProvider();
-      const appScheme = "everydaydresscode"; // Your app's deep link scheme
       // UI elements
       const titleEl = document.getElementById('title');
       const messageEl = document.getElementById('message');
@@ -103,94 +115,160 @@
       const loadingEl = document.getElementById('loading');
       const errorEl = document.getElementById('error');
-      // Check if user is already signed in
       onAuthStateChanged(auth, (user) => {
         if (user) {
           showSuccess(user);
         }
       });
-      // Handle authentication
       window.handleAuth = async function() {
-        try {
-          buttonEl.disabled = true;
-          loadingEl.style.display = 'block';
-          errorEl.textContent = '';
-          const result = signInWithRedirect(auth, provider); // await signInWithPopup(auth, provider);
-          const user = result.user;
-          const credential = GoogleAuthProvider.credentialFromResult(result);
-          const token = await user.getIdToken();
-          showSuccess(user);
-          // Redirect to app with auth data
-          setTimeout(() => {
-            redirectToApp(token, user);
-          }, 2000);
-        } catch (error) {
-          console.error('Auth error:', error);
-          buttonEl.disabled = false;
-          loadingEl.style.display = 'none';
-          let errorMessage = `Authentication failed. Please try again.`;
-          if (error.code === 'auth/popup-closed-by-user') {
-            errorMessage = 'Sign-in cancelled. Please try again.';
-          } else if (error.code === 'auth/popup-blocked') {
-            errorMessage = 'Pop-up blocked. Please allow pop-ups and try again.';
           }
-          errorMessage = error;
-          errorEl.textContent = errorMessage;
         }
       };
-    /*
-    const myButton = document.getElementById('authButton');
-myButton.addEventListener('click', function() {
-    alert('Hello from the button!');
-});
-*/
       function showSuccess(user) {
         titleEl.textContent = 'Sign-in Complete';
         messageEl.innerHTML = `Welcome, <strong>${user.displayName || user.email}</strong>! Redirecting to app...`;
         buttonEl.textContent = 'Open App';
-        buttonEl.onclick = () => redirectToApp(null, user);
         buttonEl.disabled = false;
         loadingEl.style.display = 'none';
       }
       async function redirectToApp(token, user) {
-        // Get fresh token if not provided
         if (!token) {
-          token = await user.getIdToken();
         }
-        // Prepare user data
         const userData = {
           uid: user.uid,
           email: user.email,
           displayName: user.displayName,
           photoURL: user.photoURL,
-          token: token
         };
-        // Encode data for URL
         const encodedData = encodeURIComponent(JSON.stringify(userData));
-        // Try to open the app with deep link
         window.location.href = `${appScheme}://auth?data=${encodedData}`;
-        // Fallback: If app doesn't open in 2 seconds, show manual instructions
         setTimeout(() => {
           messageEl.innerHTML = 'If the app didn\'t open automatically, please open it manually.';
         }, 2000);
       }
     </script>
   </body>
 </html>

         color: #d32f2f;
         margin-top: 1rem;
         font-size: 0.9rem;
+        word-break: break-word;
       }
       .loading {
         margin-top: 1rem;
         opacity: 0.7;
       }
+      .note {
+        margin-top: 12px;
+        font-size: 0.85rem;
+        opacity: 0.85;
+      }
     </style>
   </head>
   <body>
       <button id="authButton" onclick="handleAuth()">Sign in with Google</button>
       <p class="loading" id="loading" style="display: none;">Processing...</p>
       <p class="error" id="error"></p>
+      <p class="note" id="note">Tip: Serve this page over http(s). Add your test domain to Firebase Auth → Authorized domains.</p>
     </div>
+    <!-- Full script: handles popup (desktop) and redirect (mobile/webview) flows -->
     <script type="module">
       import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js';
+      import {
+        getAuth,
+        signInWithPopup,
+        signInWithRedirect,
+        getRedirectResult,
+        GoogleAuthProvider,
+        onAuthStateChanged
+      } from 'https://www.gstatic.com/firebasejs/10.7.1/firebase-auth.js';
+      // ---------- Firebase config (keep or replace with your own) ----------
       const firebaseConfig = {
         apiKey: "AIzaSyAJZ5UwyLo4b4L8_G7Nocw0nj7dhyBZ_yU",
+        authDomain: "cartpost-db-06.firebaseapp.com",
+        projectId: "cartpost-db-06",
+        storageBucket: "cartpost-db-06.firebasestorage.app",
+        messagingSenderId: "212802992706",
+        appId: "1:212802992706:web:2a32a453c42cbc3bdfcbdb",
+        measurementId: "G-JYWF6B9MVZ"
       };
+      // ---------- Init ----------
       const app = initializeApp(firebaseConfig);
       const auth = getAuth(app);
       const provider = new GoogleAuthProvider();
+      // Your app deep-link scheme (used when redirecting to native app)
+      const appScheme = "everydaydresscode";
       // UI elements
       const titleEl = document.getElementById('title');
       const messageEl = document.getElementById('message');
       const loadingEl = document.getElementById('loading');
       const errorEl = document.getElementById('error');
+      // ---------- Helpers ----------
+      function isLikelyWebViewOrInApp() {
+        const ua = navigator.userAgent || '';
+        // common markers for in-app browsers / webviews
+        const webviewMarkers = /wv|WebView|FBAN|FBAV|Instagram|KAKAOTALK|Line|MicroMessenger/i;
+        // On Android, some webviews don't include "Chrome" in UA
+        return webviewMarkers.test(ua) || (/Android/i.test(ua) && !/Chrome/i.test(ua));
+      }
+      function resetUI() {
+        buttonEl.disabled = false;
+        loadingEl.style.display = 'none';
+      }
+      function safeSetError(msg) {
+        // ensure we never put an object directly into DOM
+        errorEl.textContent = String(msg || 'Authentication failed.');
+      }
+      // ---------- Handle redirect result (page load after signInWithRedirect) ----------
+      getRedirectResult(auth)
+        .then(async (result) => {
+          if (result && result.user) {
+            // Successful redirect result
+            const user = result.user;
+            try {
+              const token = await user.getIdToken();
+              showSuccess(user);
+              // small delay to let user see success message
+              setTimeout(() => redirectToApp(token, user), 1000);
+            } catch (tokenErr) {
+              console.error('Token error after redirect:', tokenErr);
+              safeSetError('Signed in but failed to retrieve token. See console for details.');
+            }
+          }
+        })
+        .catch((err) => {
+          console.error('getRedirectResult error:', err.code, err.message);
+          // Friendly message but keep details in console
+          safeSetError('Authentication after redirect failed. See console for details.');
+          resetUI();
+        });
+      // ---------- Persisted state detection ----------
       onAuthStateChanged(auth, (user) => {
         if (user) {
+          // Already signed-in (session persisted)
           showSuccess(user);
         }
       });
+      // ---------- Main auth handler (called on button click) ----------
       window.handleAuth = async function() {
+        // disable UI while we try
+        buttonEl.disabled = true;
+        loadingEl.style.display = 'block';
+        errorEl.textContent = '';
+        try {
+          if (isLikelyWebViewOrInApp()) {
+            // Use redirect flow in environments where popup is unreliable
+            console.log('Detected webview/in-app: using signInWithRedirect.');
+            // signInWithRedirect will redirect the browser away; getRedirectResult will handle the result on return.
+            await signInWithRedirect(auth, provider);
+            // After this line the browser navigates away; no further code executes in most cases.
+          } else {
+            // Desktop / normal browsers: popup flow
+            console.log('Using signInWithPopup for desktop browser.');
+            const result = await signInWithPopup(auth, provider);
+            if (result && result.user) {
+              const user = result.user;
+              const token = await user.getIdToken();
+              showSuccess(user);
+              // Wait briefly so user sees success then redirect to app.
+              setTimeout(() => redirectToApp(token, user), 800);
+            } else {
+              // Defensive fallback, shouldn't normally happen
+              console.warn('signInWithPopup returned no user:', result);
+              safeSetError('Sign-in did not complete. Check console for details.');
+              resetUI();
+            }
           }
+        } catch (err) {
+          // Common Firebase errors: log full details and show human message
+          console.error('Auth error:', err.code, err.message, err);
+          let msg = 'Authentication failed. See console for details.';
+          if (err && err.code === 'auth/popup-closed-by-user') msg = 'Sign-in cancelled. Please try again.';
+          else if (err && err.code === 'auth/popup-blocked') msg = 'Pop-up blocked. Allow pop-ups and try again.';
+          else if (err && err.code === 'auth/cancelled-popup-request') msg = 'Popup request cancelled (race). Try again.';
+          else if (err && err.code === 'auth/unauthorized-domain') msg = 'Unauthorized domain — add this domain in Firebase Console (Auth → Authorized domains).';
+          safeSetError(msg);
+          resetUI();
         }
       };
+      // ---------- UI helpers ----------
       function showSuccess(user) {
         titleEl.textContent = 'Sign-in Complete';
         messageEl.innerHTML = `Welcome, <strong>${user.displayName || user.email}</strong>! Redirecting to app...`;
         buttonEl.textContent = 'Open App';
+        buttonEl.onclick = async () => {
+          // ensure currentUser exists and get a token before redirecting
+          const current = auth.currentUser;
+          if (!current) {
+            safeSetError('No signed-in user available. Reload and try again.');
+            return;
+          }
+          try {
+            const token = await current.getIdToken();
+            redirectToApp(token, current);
+          } catch (e) {
+            console.error('Failed to get token on manual Open App:', e);
+            safeSetError('Failed to get token. See console.');
+          }
+        };
         buttonEl.disabled = false;
         loadingEl.style.display = 'none';
       }
       async function redirectToApp(token, user) {
+        if (!user) {
+          safeSetError('No signed-in user available to redirect.');
+          return;
+        }
+        // If token not provided, fetch it
         if (!token) {
+          try {
+            token = await user.getIdToken();
+          } catch (e) {
+            console.error('Failed to fetch token before redirect:', e);
+            safeSetError('Failed to fetch token. See console.');
+            return;
+          }
         }
         const userData = {
           uid: user.uid,
           email: user.email,
           displayName: user.displayName,
           photoURL: user.photoURL,
+          token
         };
         const encodedData = encodeURIComponent(JSON.stringify(userData));
+        // Attempt to open native app via deep link
         window.location.href = `${appScheme}://auth?data=${encodedData}`;
+        // Fallback: after 2s, give user manual instructions
         setTimeout(() => {
           messageEl.innerHTML = 'If the app didn\'t open automatically, please open it manually.';
         }, 2000);
       }
+      // ---------- End of script ----------
     </script>
   </body>
 </html>