Skip to content

Sign In With Google (Web)

Guides an agent to build secure Google sign-in for web apps using Google Identity Services.

Repository
google/skills
Stars
21,782
Licence
Apache-2.0
Files
6 files

What it does

This skill gives an AI agent detailed guidance for adding a 'Sign in with Google' button to a website and handling the login securely. Once installed, the agent recommends server-side patterns (a backend that checks Google's signed login token and issues its own session cookie) as the safest default, and only falls back to purely browser-based approaches for static sites or offline apps. It also covers details like nonces, Google Workspace domain restrictions, One Tap, iframes and security headers.

Great for

  • Web developers adding Google sign-in to a React, Next.js, Angular or plain HTML site
  • Teams with a Python, Node.js, Go or Java backend who need to verify Google ID tokens correctly
  • Developers reviewing or hardening an existing Google login implementation

Skip it if

  • Legacy Google Sign-In using gapi.auth2, which this skill explicitly excludes; the guidance may lead to outdated code
  • Android or iOS native apps, or Google Cloud IAM service accounts, which are out of scope and need different guidance
  • Non-developers who want a finished login system; the agent still needs to write and test code carefully, and security-sensitive code should be reviewed by a qualified engineer

Try asking

  • “Add a Sign in with Google button to my React app and verify the token on my FastAPI backend”
  • “Restrict my web login to users from our Google Workspace domain using the hd claim”
  • “Review my current Google login code for nonce and token-verification mistakes”
  • “Set up Google One Tap with a Content Security Policy that allows the GIS script”
Step-by-step guide: how to use Sign In With Google (Web)Install, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 6 original files, the Apache-2.0 licence and an attribution note.

    sign-in-with-google-web.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip sign-in-with-google-web.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip sign-in-with-google-web.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Tell the agent your architecture up front (has backend or static only, offline PWA or not) so it picks the right pattern
  • Ask the agent to check the aud, hd and nonce claims and the session cookie flags, since these are the most common mistakes
  • Test the flow in a staging environment and verify Google's current API documentation, because client libraries and browser login behaviour change over time

What's inside

  • references/bff_fastapi_verification.md
  • references/in_memory_spa_nonce.md
  • references/intermediate_iframe.md
  • references/offline_pwa_encryption.md
  • references/tmb_login_uri_redirect.md
  • SKILL.md

Redistributed unmodified from google/skills under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.