Getting error in google sign in using javascript

when im trying to sign in through google I'm able to proceed but at this point its showing blank strong text

    {% block content %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="strict-origin-when-cross-origin">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="google-signin-client_id" content="my client id">
    <title>Google Sign-In with JWT</title>
    <script src="https://accounts.google.com/gsi/client" async defer></script>
</head>
<body>
    <h1>Google Sign-In</h1>
    
    <div id="g_id_onload"
         data-client_id = "my client id"
         data-callback ="handleCredentialResponse"
         data-login-uri = "http://127.0.0.1:8000/user/login/"
         data-auto_prompt ="false">
    </div>
    
    <div class="g_id_signin"
         data-type="standard"
         data-size="large"
         data-theme="outline"
         data-text="sign_in_with"
         data-shape="rectangular"
         data-logo_alignment="left">
    </div>

    <script>
        console.log("Current origin:", window.location.origin);

        function handleCredentialResponse(response) {
            console.log("Received response from Google Sign-In");
            const idToken = response.credential;
            console.log("ID Token:", idToken);

            fetch('http://127.0.0.1:8000/user/login/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: JSON.stringify({ token: idToken }),
                credentials: 'include'
            })
            .then(response => {
                console.log("Received response from server");
                return response.json();
            })
            .then(data => {
                if (data.access) {
                    console.log("JWT Token:", data.access);
                    localStorage.setItem('jwt', data.access);
                    alert('Login successful!');
                } else {
                    console.error("Login failed:", data);
                    alert('Login failed!');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('An error occurred during login');
            });
        }

        window.onload = function() {
            console.log("Page loaded. Google Sign-In should initialize soon.");
        };
    </script>
</body>
</html>

tried everything but not move ahead using javascript more specifically HTML page to just get idToken from google and then sending it to backend for verification and other jwt generation

put your id here

<meta name="google-signin-client_id" content="my client id">

in content="my client id"

also in your console there is an error of favicon not found. So load your favicon properly

Back to Top