Skip to demo content

OAuth2 Social Login with Google

OTS authenticates with Google via OAuth 2.0 and OpenID Connect

This is a static, self-contained demo for educational purposes. It does not connect to any live systems and is not intended as a reference implementation.

Step 1 of 7: User clicks Sign in with Google
Keyboard:
Navigate Space Autoplay R Restart 123 Speed T Transcript
1

User clicks Sign in with Google

User navigates to the OTS dashboard or clicks 'Sign in with Google'. OTS checks for a valid session and finds none, so it generates PKCE parameters (code_verifier + code_challenge), a random state for CSRF protection, and a nonce for token replay prevention, then redirects to Google's authorization endpoint.

PKCE (Proof Key for Code Exchange, RFC 7636) protects against authorization code interception attacks. OTS generates a random code_verifier (43-128 chars), computes code_challenge = BASE64URL(SHA256(code_verifier)), and sends only the challenge to Google. The verifier is stored server-side and sent during token exchange. The state parameter prevents CSRF; the nonce prevents ID token replay.

What the user sees

https://secrets.example.com/dashboard
Demo simulation — do not enter real credentials
Redirecting to login...

What's happening (HTTP)

REQUEST Browser → OTS
GET https://secrets.example.com/dashboard
Cookie: (none)
💡 No session cookie present
INTERNAL OTS → OTS
Generate OAuth2 parameters
💡 Generate code_verifier (random 43-char string), compute code_challenge = BASE64URL(SHA256(code_verifier)), generate random state and nonce. Store all three server-side keyed by session.
RESPONSE OTS → Browser
302 Found
Location: https://accounts.google.com/o/oauth2/v2/auth?
client_id=123456789.apps.googleusercontent.com
&redirect_uri=https://secrets.example.com/auth/callback
&response_type=code
&scope=openid email profile
&state=xYz9Kp2mN7qR4sT1
&nonce=aB3cD5eF7gH9iJ1k
&code_challenge=E9Melhoa2OwvFrEMTJguCHaoeK1t8URWbuGJSstw-cM
&code_challenge_method=S256
&access_type=offline
&prompt=consent
💡 Redirect to Google with PKCE challenge, state, and nonce

Legend

Browser request
Server response
Server-to-server
Internal process

Protocol Stack

🔐
OTS
Application
OAuth2
(+ OIDC)
🌐
Google
OAuth2 / OIDC Provider
← All demos
An Authentication Flow Demo v0.1.0