Login with X — OAuth 2.0 Sample

A minimal Next.js app that implements the X API OAuth 2.0 Authorization Code flow with PKCE ("Login with X") and then displays the signed-in user's account info by calling GET /2/users/me.

The OAuth authorize step uses the twitter.com host; the token exchange and API calls use api.twitter.com.

PKCE logic lives in lib/oauth.ts.

1. Go to the X Developer Portal → your Project → app settings → User authentication settings.
2. Enable OAuth 2.0.
3. Type of App:
   • Web App = confidential client → you get a Client ID and Client Secret.
   • Native App / SPA = public client → Client ID only (no secret).
4. Callback URI / Redirect URL — add both:
   • http://127.0.0.1:3000/api/auth/callback (local dev)
   • https://<your-app>.vercel.app/api/auth/callback (production)
5. Copy the Client ID (and Client Secret if you have one).

The callback URL must match exactly what the app sends. This sample derives it from the request origin, or you can pin it with X_REDIRECT_URI.

npm install
cp .env.example .env.local   # then fill in X_CLIENT_ID (and X_CLIENT_SECRET)
npm run dev

Open http://127.0.0.1:3000

Use 127.0.0.1 (not localhost) so it matches the registered callback URL.

1. Commit and push to GitHub:

   git add .
   git commit -m "Login with X OAuth 2.0 sample"
   git push

2. In Vercel, Import the GitHub repo. Next.js is auto-detected — no build config needed.
3. Add Environment Variables in the Vercel project settings:
   • X_CLIENT_ID — required
   • X_CLIENT_SECRET — only for confidential (Web App) clients
   • X_REDIRECT_URI — optional; set to https://<your-app>.vercel.app/api/auth/callback to pin it
4. Deploy. Then make sure your production callback URL is registered in the X developer portal (step 1.4).

tweet.read, users.read, offline.access — the minimum needed to log in and read the authenticated user's profile.