auth-systems

Implement authentication and authorization for Next.js App Router with Clerk or Better Auth.

Updated Feb 18, 2026
One-click install
npx skills add https://github.com/ollieb89/viflo --skill auth-systems
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: auth-systems
Source: https://github.com/ollieb89/viflo/tree/main/.agent/skills/auth-systems
Command: npx skills add https://github.com/ollieb89/viflo --skill auth-systems

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive solutions for implementing secure authentication and authorization in Next.js App Router applications, covering both managed (Clerk) and self-hosted (Better Auth) options.

Core Features & Use Cases

  • Authentication Flows: Implement sign-up, sign-in, and session management.
  • Route Protection: Secure routes using middleware for both Clerk and Better Auth.
  • OAuth Integration: Easily add social login providers like GitHub and Google.
  • Server-Side Access: Access user session data securely in Server Components, Actions, and API Routes.
  • Webhook Handling: Synchronize user data with Clerk webhooks.
  • Security Best Practices: Addresses potential vulnerabilities like App Router cache bypass.
  • Use Case: Secure a new SaaS application by implementing email/password sign-up, Google OAuth, and protecting all routes under /dashboard with middleware.

Quick Start

Install Clerk and add basic authentication to your Next.js app by wrapping your layout with ClerkProvider and setting up middleware to protect routes.

Frequently Asked Questions about auth-systems

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

FAQPage Schema
How do I implement authentication in Next.js App Router?

Authentication in Next.js App Router is implemented by configuring sign-up and sign-in flows, protecting routes with middleware, and accessing session data in Server Components, Actions, and API routes.

Clerk vs Better Auth for Next.js: which should I use?

Clerk provides managed authentication with webhook synchronization, while Better Auth offers a self-hosted solution. Both integrate with Next.js App Router for OAuth, route protection, and server-side session access.

How do I protect routes with middleware in Next.js?

Protecting routes with middleware in Next.js involves configuring the middleware file to intercept requests and verify user sessions before allowing access to protected areas. This approach works for both Clerk and Better Auth.

Why does my Next.js App Router authentication bypass cache?

Next.js App Router authentication can bypass cache due to vulnerabilities in how cached routes handle session updates. Addressing this requires specific security best practices to ensure protected pages reflect current authentication states.

Can I add Google OAuth to a Next.js application?

Yes, you can add Google OAuth to a Next.js application by configuring social login providers. This integration supports OAuth flows for both Clerk managed and Better Auth self-hosted authentication solutions.