Getting started with Sign in with Vercel using a coding agent
If you use a coding agent like Claude Code, Cursor, or Cline, you can scaffold the full Sign in with Vercel OAuth flow with a single prompt instead of writing each route and component by hand.
For step-by-step manual setup, see the manual quickstart.
Complete these steps in the Vercel dashboard before prompting your agent:
- Create an App from the dashboard
- Generate a client secret
- Set the authorization callback URL to
http://localhost:3000/api/auth/callbackfor local development - Configure permissions your app needs
Add your credentials to .env.local:
NEXT_PUBLIC_VERCEL_APP_CLIENT_ID="your-client-id"
VERCEL_APP_CLIENT_SECRET="your-client-secret"Prompt your agent to create the full sign-in flow:
Add Sign in with Vercel to this Next.js App Router project.
- My client ID and secret are in .env.local as
NEXT_PUBLIC_VERCEL_APP_CLIENT_ID and VERCEL_APP_CLIENT_SECRET
- Create these API routes:
- app/api/auth/authorize (redirect to Vercel OAuth with PKCE)
- app/api/auth/callback (exchange code for tokens, set cookies)
- app/api/auth/signout (revoke token, clear cookies)
- Create a profile page at app/profile that fetches user info
from https://api.vercel.com/login/oauth/userinfo
- Create SignInWithVercel and SignOut button components
- Use secure cookie settings (httpOnly, sameSite: lax, secure only
in production)
- Use PKCE with S256 code challenge
- Include state and nonce parameters for CSRF and replay protectionYour agent will create the route handlers, components, and profile page.
| Detail | Value |
|---|---|
| Authorization URL | https://vercel.com/oauth/authorize |
| Token exchange | POST https://api.vercel.com/login/oauth/token |
| Token revocation | POST https://api.vercel.com/login/oauth/token/revoke |
| User info | GET https://api.vercel.com/login/oauth/userinfo |
| Token introspection | POST https://api.vercel.com/login/oauth/token/introspect |
| Recommended scopes | openid email profile offline_access (openid is required, others are optional) |
| PKCE method | S256 |
| Callback URL format | {origin}/api/auth/callback |
| Client ID env var | NEXT_PUBLIC_VERCEL_APP_CLIENT_ID |
| Client secret env var | VERCEL_APP_CLIENT_SECRET |
Was this helpful?