skills.rest
overlens
overlensOFFICIAL
Explore all skills by this author →
WebsiteGitHub

idp-auth-nextjs

Implements Overlens IDP OAuth 2.1 PKCE login, logout, and session handling in Next.js App Router projects.

Updated Jul 24, 2026
Search Tags:#authentication#oauth#next.js#session management#app router#sso#pkce
One-click install
npx skills add https://github.com/overlens/claude-marketplace --skill idp-auth-nextjs-overlens
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: idp-auth-nextjs
Source: https://github.com/overlens/claude-marketplace/tree/main/plugins/idp-integration/skills/idp-auth-nextjs
Command: npx skills add https://github.com/overlens/claude-marketplace --skill idp-auth-nextjs-overlens

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Wiring OAuth 2.1 Authorization Code + PKCE login into a Next.js App Router app involves many subtle pieces — PKCE generation, state validation, token exchange, cookie scoping, silent refresh, and RP-initiated logout — and getting any one wrong breaks the flow or leaks secrets. This Skill provides drop-in templates and guidance so the integration works correctly the first time. ## Core Features & Use Cases - Drop-in auth templates: Provides lib/pkce.ts, lib/auth-actions.ts (login/signup/logout Server Actions), lib/session.ts, callback and refresh Route Handlers, and a route-protection middleware.ts. - Full session lifecycle: Covers login, signup (with new_user onboarding branch), silent token refresh with refresh-token rotation, and OIDC RP-Initiated Logout against the Overlens IDP. - Next.js-specific guardrails: Documents App Router pitfalls such as async cookies(), Edge-runtime middleware limits, NEXT_PUBLIC_ secret leakage, and seconds-based maxAge. - Use Case: You have a Next.js App Router project and want users to sign in with their Overlens account — the Skill scaffolds the entire flow, from the login button to the protected dashboard. ## Quick Start Ask the assistant to add Overlens login to your Next.js app and it will copy the six template files, configure the required environment variables, and wire up login, callback, refresh, and logout.

Frequently Asked Questions about idp-auth-nextjs

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add Overlens OAuth login to a Next.js App Router app?▼

Copy the six template files: lib/pkce.ts, lib/auth-actions.ts, lib/session.ts, app/api/auth/callback/route.ts, app/api/auth/refresh/route.ts, and middleware.ts. Then set the ACCOUNTS_URL, IDP_BASE_URL, IDP_CLIENT_ID, IDP_CLIENT_SECRET, and IDP_REDIRECT_URI environment variables and add login and logout forms using the Server Actions.

How does silent token refresh work in Next.js Route Handlers?▼

The client-side 401 interceptor calls POST /api/auth/refresh, which exchanges the refresh_token with the IDP and rotates both session cookies. You must write the new refresh_token returned by the IDP, because the old one is invalidated immediately upon a successful exchange.

Can I use this with Next.js Pages Router instead of App Router?▼

Yes, the OAuth logic is identical; only the API surface changes. Server Actions become pages/api/auth handlers, cookies() becomes req.cookies and Set-Cookie headers, and redirect() becomes res.redirect(). For mostly Pages Router apps, the idp-integrate-oauth-web skill may read more naturally.

Why does the OAuth callback fail with a redirect_uri mismatch?▼

The IDP compares the redirect_uri with byte-for-byte string equality against the registered value, with no normalization or trailing-slash tolerance. Confirm IDP_REDIRECT_URI exactly matches the registered callback URL, including the localhost variant for development.

Why should the client secret not use the NEXT_PUBLIC_ prefix?▼

Any variable prefixed with NEXT_PUBLIC_ is inlined into the browser bundle, which would leak IDP_CLIENT_SECRET to every visitor. Keep it as plain IDP_CLIENT_SECRET so it stays server-side in Route Handlers and Server Actions.

When should I use a different skill instead of this Next.js integration?▼

Use idp-integrate-oauth-web for standalone NestJS, Express, Rails, or Django backends, idp-auth-vite-bff for a Vite SPA with a separate backend, idp-auth-mobile for PKCE-only public clients, and idp-validate-token when you only verify JWTs in a Resource Server.

Related Skills

Explore More Software Engineering Skills→
hexlet-volunteershexlet-volunteers
113

socialite-development

Automate OAuth social authentication flows with Laravel Socialite.

Official
Intermediate
vTRKAvTRKA

auth-flow-design

Select OAuth 2.x/OIDC authentication flows by client type and constraints.

Community
Advanced
Tahasaif3Tahasaif3

better-auth-python

Verify Better Auth JWTs in FastAPI backends using JWKS with caching.

Community
Intermediate
gopforevergopforever

replit-auth

Implement Replit OpenID Connect with PKCE authentication across Express, React+Vite, and Expo React Native.

Community
Advanced