How do I add Sign in with Google to my web app?

To add Sign in with Google to a web app, the easiest modern approach is to use Google Identity Services (GIS).

1) Create a Google Cloud project

1. Go to the Google Cloud Console
2. Create a new project
3. Set up the OAuth consent screen
4. Create OAuth 2.0 Client ID credentials
   • Application type: Web application
   • Add your authorized JavaScript origins
   • Add your authorized redirect URIs if you use redirect flow

2) Add the Google Identity Services script

Include this in your page:

<script src="https://accounts.google.com/gsi/client" async defer></script>

3) Choose your sign-in flow

Option A: One Tap / button flow with a token response

Google handles the UI and returns an ID token to your frontend.

Example:

<div id="g_id_onload"
     data-client_id="YOUR_GOOGLE_CLIENT_ID"
     data-callback="handleCredentialResponse">
</div>

<div class="g_id_signin" data-type="standard"></div>

<script>
  function handleCredentialResponse(response) {
    // response.credential is the ID token (JWT)
    console.log("ID token:", response.credential);

    // Send token to your backend for verification
    fetch("/auth/google", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ id_token: response.credential })
    });
  }
</script>

Option B: OAuth redirect flow

If you need server-side authorization access, use the standard OAuth flow with redirects.

4) Verify the token on your backend

Do not trust the frontend alone. Send the ID token to your server and verify it using Google libraries.

Example in Node.js:

import { OAuth2Client } from "google-auth-library";

const client = new OAuth2Client(process.env.GOOGLE_CLIENT_ID);

app.post("/auth/google", async (req, res) => {
  const { id_token } = req.body;

  const ticket = await client.verifyIdToken({
    idToken: id_token,
    audience: process.env.GOOGLE_CLIENT_ID,
  });

  const payload = ticket.getPayload();
  const userId = payload.sub;
  const email = payload.email;

  // Create session / JWT for your app here
  res.json({ success: true, userId, email });
});

5) Create your app session

After verifying Google’s token, create your own:

• session cookie, or
• JWT for your app

This is what your app uses after login.

6) Important security notes

• Always verify tokens on the backend
• Restrict by your Google client ID
• Use HTTPS in production
• Store secrets safely
• If you request Google API access beyond sign-in, use the correct OAuth scopes and consent setup

7) If you use a framework

Common integrations exist for:

• React
• Next.js
• Vue
• Angular
• Firebase Auth (simpler if you want Google sign-in plus auth/session handling)

If you want, I can give you a copy-paste example for React, Next.js, or plain HTML/Node.js.