How to use the Sign In With Google (Web) agent skill

What the skill makes the agent do

The skill covers Sign In With Google (SiwG) using the Google Identity Services web SDK, loaded from accounts.google.com/gsi/client. It gives the agent guidance for React, Next.js, Angular and plain HTML sites, and for verifying Google ID tokens on Python, Node.js, Go and Java backends.

The agent recommends server-side patterns as the safest default. In the recommended pattern, the browser sends the Google ID token to your backend, the backend checks its signature against Google's public keys, and the backend issues its own HttpOnly session cookie. Browser-only approaches are offered as fallbacks for static sites or offline apps.

The skill also covers nonces, Google Workspace domain restrictions (the hd claim), One Tap, cross-origin iframes via the Intermediate Iframe API, and security headers such as Content Security Policy and COOP.

Install the skill from the ZIP

Download the ZIP for the skill from this page and unzip it. To make it available to Claude Code for your user account, place the unzipped folder in ~/.claude/skills/. To limit it to one project, place it in that project's .claude/skills/ folder.

You can also upload the skill in the Claude apps. Open Settings, go to Capabilities, then Skills, and upload it there.

• Personal: ~/.claude/skills/sign-in-with-google-web
• Project only: .claude/skills/sign-in-with-google-web inside your project folder

Trigger the skill with natural requests

You do not need a special command. The skill is meant to be picked up when your request matches its topic. Describe the job in plain terms and name your stack, so the agent knows which reference to use.

The skill's description lists these triggers: creating Google sign-in buttons, Google One Tap with FedCM, integrating GIS in React, Next.js, Angular or HTML, verifying ID tokens on a backend, enforcing Google Workspace domain restrictions, sign-out and revocation, and configuring CSP and COOP headers.

• Add a Sign in with Google button to my Next.js app and verify the token on a FastAPI backend.
• Verify Google ID tokens correctly in my Node.js Express login route.
• Restrict our Google login to users of our company Google Workspace domain.
• Add Google One Tap to my plain HTML site and set the right security headers.
• Review my existing Google login code and tell me what to harden.

What you need before you start

The skill expects a Google Identity Services web SDK, a Google Cloud OAuth client ID, and backend libraries for ID token verification such as google-auth for Python, depending on your chosen stack. The skill folder also contains reference files with detailed code examples that the agent can read.

The skill does not run scripts and does not use the network itself. The code it helps you write will talk to Google when your site runs, so you still need to set up the OAuth client in Google Cloud.

• Google Identity Services web SDK (accounts.google.com/gsi/client)
• A Google Cloud OAuth client ID
• Backend ID token library, for example google-auth for Python

Safety notes: scripts, network and out-of-scope cases

The skill itself runs no scripts and uses no network access. Its output is code and guidance, which you must read and test before deploying.

The skill explicitly excludes legacy Google Sign-In using gapi.auth2, Google Cloud IAM service accounts, and Android or iOS native Credential Manager. Use different guidance for those. Security-sensitive login code should be reviewed by a qualified engineer, and the agent still needs to be checked when it writes and tests code.

• Do not store raw ID tokens in localStorage or sessionStorage; the skill's guidance says never to do this.
• Prefer the backend pattern whenever your app has a server.
• Treat code that decodes JWTs in the browser as UI-only; backend signature verification is still required.

Tips for better results

Name your framework, backend language and whether you have a server. The skill chooses between backend and client-only patterns based on that, so a precise request gives more useful code.

Ask the agent to show which reference file it followed and to list the claims it checks, such as aud, hd and nonce. Ask it to flag anything it could not verify so you can test it.

• State whether you need a Google Workspace domain restriction.
• Mention if your app is offline-first, since that changes the pattern.
• Ask for the CSP and COOP headers in the same request to avoid a second round of fixes.