Code & Dev Compatible: claude

OAuth Authorization Code With PKCE

Complexity Level: Intermediate
Prompt Code Block

Specify OAuth login for a public client (a SPA or a native app) using authorization code with PKCE. No implicit flow. No client secret in the app. PROVIDER [GOOGLE | GITHUB | A GENERIC OIDC] App type: [SPA | NATIVE] Redirect URI: [URL] Scopes: [LIST — MINIMAL] DELIVER 1) The authorize request: code challenge from a verifier stored in the session or a platform-safe place, state for CSRF, the exact parameters. 2) The code exchange on a server or the protected token endpoint the platform recommends. If the client is a SPA and the provider supports it, say where the exchange happens and why the verifier never becomes a secret in the repo. 3) How we bind the login to our user record (the stable subject id, not the email alone, and what we do when the email changes). 4) The state and nonce checks and the failure the user sees. 5) Token storage: httpOnly cookie for a web session we create, not the provider refresh token in localStorage. If a refresh token is unavoidable, say the constraint. Do not use the implicit grant. Do not log the authorization code.

🌟 Example Output / Preview

### Generated Component Preview: ```typescript // Fully validated modern structure import { z } from 'zod'; export const RequestSchema = z.object({ id: z.string().uuid(), createdAt: z.date().default(() => new Date()), data: z.record(z.string(), z.any()) }); export type ValidatedRequest = z.infer<typeof RequestSchema>; ```

Prompt Metadata

DifficultyIntermediate
Compatibilityclaude

Primary Use Cases:

  • •Legacy code modernization & technical refactoring
  • •Full-stack layout generation & component structuring
  • •CI/CD workflow automation & unit/E2E testing suites

Associated Tags:

#oauth #pkce #auth #typescript

💡 Pro Tips & Advice

1. Use bracketed items: Be sure to fill out all [PLACEHOLDER] elements with specific details before sending the prompt to the AI model.

2. Adjust temperature: For creative tasks, set AI temperature higher (e.g., 0.8), or lower (e.g., 0.2) for strict coding/technical tasks.

🔗 Related AI Prompts

Code & Dev
★ Featured

Full SaaS Landing Page Build Spec (SEO + Conversion)

You are a Staff Product Designer + Frontend Engineer + SEO strategist. Build a complete, production-ready marketing landing page f...

Compatible:claudeDiff:Advanced
#landing-page #saas #seo #nextjs #tailwind
Code & Dev
★ Featured 🔥 Trending

SaaS Analytics Dashboard Full Build Spec

You are a Principal Product Designer + Frontend Lead. Design and specify a complete [LIGHT | DARK] analytics dashboard for [PRODUC...

Compatible:claudeDiff:Intermediate
#dashboard #saas #ui #tailwind #seo
Code & Dev

SaaS Admin Panel Dashboard Build Spec

Design a full internal Admin Dashboard for [PRODUCT_NAME] used by [ADMIN_ROLE: support | ops | super-admin]. --- 🎯 CONTEXT Adm...

Compatible:claudeDiff:Intermediate
#admin #dashboard #saas #crud #tailwind