Google Auth Source Code

📋 How It Works

This implementation uses Google Identity Services (GIS) to authenticate users. When a user clicks "Continue with Google", it triggers the Google One Tap prompt or opens a sign-in popup. After successful authentication, the user's profile information is retrieved from the JWT token. Client ID: 202854936129-eet7543dkvmo4t72jcrhbcnn66gl1k19.apps.googleusercontent.com

📄 HTML - Google Script & Button

index.html (head section)

<!-- Load Google Identity Services -->
<script src="https://accounts.google.com/gsi/client" async defer></script>

🎨 CSS - Google Button Styling

styles.css

/* Google Sign-In Button */
.google-btn {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: all 0.3s ease;
}

.google-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
  transform: translateY(-2px);
}

.google-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 20px 0;
  color: #94a3b8;
}

.google-divider::before,
.google-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.1);
}

🔘 HTML - Google Button with SVG Logo

index.html (button)

<button type="button" class="google-btn" onclick="triggerGoogleSignIn()">
  <svg viewBox="0 0 24 24" width="20" height="20">
    <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
    <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
    <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
    <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
  </svg>
  Continue with Google
</button>
<div class="google-divider">or</div>

⚡ JavaScript - Google Sign-In Logic

script.js

// ===== GOOGLE SIGN IN =====
const GOOGLE_CLIENT_ID = '202854936129-eet7543dkvmo4t72jcrhbcnn66gl1k19.apps.googleusercontent.com';
let googleInitialized = false;

function initializeGoogle() {
  if (typeof google !== 'undefined' && google.accounts && !googleInitialized) {
    google.accounts.id.initialize({
      client_id: GOOGLE_CLIENT_ID,
      callback: handleGoogleSignIn,
      auto_select: false,
      cancel_on_tap_outside: true
    });
    googleInitialized = true;
  }
}

function triggerGoogleSignIn() {
  initializeGoogle();
  
  if (typeof google !== 'undefined' && google.accounts) {
    // Use One Tap prompt
    google.accounts.id.prompt((notification) => {
      if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
        // Fallback: render Google button
        const tempDiv = document.createElement('div');
        tempDiv.id = 'g_id_temp';
        document.body.appendChild(tempDiv);
        
        google.accounts.id.renderButton(tempDiv, {
          theme: 'outline',
          size: 'large',
          width: 280
        });
      }
    });
  }
}

function handleGoogleSignIn(response) {
  try {
    const credential = response.credential;
    // Decode JWT token to get user info
    const payload = JSON.parse(atob(credential.split('.')[1]));
    const userName = payload.name || 'Google User';
    const userEmail = payload.email || '';
    
    // Success! User is authenticated
    console.log('Welcome,', userName);
    console.log('Email:', userEmail);
    
    // Hide login overlay and show main content
    document.getElementById('authOverlay').style.display = 'none';
    
  } catch (err) {
    console.error('Google Sign-In error:', err);
  }
}

// Initialize when Google script loads
function waitForGoogle() {
  if (typeof google !== 'undefined' && google.accounts) {
    initializeGoogle();
  } else {
    setTimeout(waitForGoogle, 100);
  }
}
waitForGoogle();

⚙️ Setup Instructions