v4/auth-handler.html at main · 4simpleproblems/v4 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Authenticating...</title>
    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-auth-compat.js"></script>
    <script src="firebase-config.js"></script>
    <style>
        body { font-family: sans-serif; background-color: #f4f4f4; text-align: center; padding-top: 50px; }
        .spinner {
            border: 4px solid #f3f3f3; border-top: 4px solid #6720bd;
            border-radius: 50%; width: 40px; height: 40px;
            animation: spin 1s linear infinite; margin: 20px auto;
        }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
    </style>
</head>
<body>
    <h3>Connecting to Secure Sign-In...</h3>
    <p>Please wait while we complete your request.</p>
    <div class="spinner"></div>

    <script>
        document.addEventListener('DOMContentLoaded', async () => {
            const auth = firebase.auth();

            // This function sends a message back to the main window that opened this popup.
            const postResult = (data) => {
                if (window.opener) {
                    // Use '*' for origin in dev, but for production, you should use your actual domain e.g., 'https://your-site.com'
                    window.opener.postMessage(data, window.location.origin);
                }
            };

            try {
                const result = await auth.getRedirectResult();

                if (result && result.user) {
                    // SUCCESS: We have returned from the provider with a user.
                    console.log("Redirect successful. User found:", result.user);
                    const userData = {
                        uid: result.user.uid,
                        email: result.user.email,
                        displayName: result.user.displayName,
                        emailVerified: result.user.emailVerified,
                        isNewUser: result.additionalUserInfo.isNewUser
                    };
                    postResult({ user: userData });
                    window.close(); // Close the popup
                } else {
                    // This is the first load. We need to INITIATE the redirect.
                    const params = new URLSearchParams(window.location.search);
                    const providerName = params.get('provider');

                    let provider;
                    if (providerName === 'Google') {
                        provider = new firebase.auth.GoogleAuthProvider();
                    } else if (providerName === 'GitHub') {
                        provider = new firebase.auth.GithubAuthProvider();
                    } else {
                        throw new Error("No valid provider specified.");
                    }

                    // This will navigate this popup window to the provider's sign-in page.
                    await auth.signInWithRedirect(provider);
                }
            } catch (error) {
                // An error occurred during the process.
                console.error("Auth Handler Error:", error);
                postResult({ error: error.message || "An unknown authentication error occurred." });
                window.close(); // Close the popup
            }
        });
    </script>
</body>
</html>