Skill

auth-providers

Authentication providers pattern library for modern web apps — Auth0 (enterprise SSO, Universal Login, Actions, rules), Clerk (React-first, pre-built UI components, organizations, invitations), NextAuth.js / Auth.js (open-source flexible, OAuth providers, custom credentials), Supabase Auth (Postgres + Row Level Security integration, magic links, OAuth), Lucia Auth (TypeScript-first, self-managed sessions, framework-agnostic), WebAuthn / Passkeys (passwordless FIDO2 via @simplewebauthn), and OAuth 2.0 + PKCE flows. Use when implementing authentication on a web project: choosing a provider, setting up social login (Google, GitHub, Microsoft, Apple), magic links, multi-factor authentication, protected routes, role-based access control, or migrating between auth providers. Differentiates from backend-only auth patterns by covering the full frontend + backend integration for Next.js, Remix, Nuxt, and Astro.

Install

npx claudepluginhub arnwaldn/atum-plugins-collection --plugin atum-stack-web

Tool Access

This skill uses the workspace's default tool permissions.

Preview

Patterns pour l'authentification sur projets web modernes. **Ne pas réinventer l'auth** — utiliser un provider battle-tested (Auth0, Clerk, NextAuth, Supabase, Lucia).

SKILL.md

Similar Skills

skill-lookup

Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.

prompts.chat

157.6k

prompt-lookup

Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.

prompts.chat

157.6k

Agent Development

6 files

Guides agent creation for Claude Code plugins with file templates, frontmatter specs (name, description, model), triggering examples, system prompts, and best practices.

plugin-dev

83.2k

Stats

Parent Repo Stars0

Parent Repo Forks0

Last CommitApr 8, 2026

Actions

View Source View Plugin View on GitHub View README

Auth Providers Patterns

Patterns pour l'authentification sur projets web modernes. Ne pas réinventer l'auth — utiliser un provider battle-tested (Auth0, Clerk, NextAuth, Supabase, Lucia).

Decision tree — quel provider choisir ?

Client B2C avec besoin simple (email + Google/Apple) ?
├── Budget zéro + control total → NextAuth.js / Auth.js
├── React-first + UI pré-faites → Clerk
└── Postgres déjà utilisé + RLS → Supabase Auth

Client B2B enterprise (SSO, SAML, audit logs) ?
├── Budget confortable → Auth0 ou WorkOS
└── Self-hosted requis → Ory Kratos / Keycloak

Besoin passwordless / passkeys ?
├── Full custom → Lucia Auth + @simplewebauthn
└── Intégré → Clerk (passkeys natifs 2024) ou Auth0 (add-on)

Multi-tenant SaaS ?
├── Simple → Clerk (organizations natives)
└── Complexe → Auth0 ou custom avec Lucia

1. Auth0 (enterprise SSO)

Setup Next.js (nextjs-auth0)

npm install @auth0/nextjs-auth0

// app/api/auth/[auth0]/route.ts
import { handleAuth } from '@auth0/nextjs-auth0'

export const GET = handleAuth()

// middleware.ts
import type { NextRequest } from 'next/server'
import { withMiddlewareAuthRequired } from '@auth0/nextjs-auth0/edge'

export default withMiddlewareAuthRequired()

export const config = {
  matcher: ['/dashboard/:path*', '/account/:path*'],
}

// app/layout.tsx
import { UserProvider } from '@auth0/nextjs-auth0/client'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <UserProvider>{children}</UserProvider>
      </body>
    </html>
  )
}

// Utilisation côté client
'use client'
import { useUser } from '@auth0/nextjs-auth0/client'

export function UserMenu() {
  const { user, isLoading } = useUser()
  if (isLoading) return null
  if (!user) return <a href="/api/auth/login">Log in</a>
  return (
    <div>
      <span>{user.email}</span>
      <a href="/api/auth/logout">Log out</a>
    </div>
  )
}

Env vars

AUTH0_SECRET=<32+ char random>
AUTH0_BASE_URL=https://example.com
AUTH0_ISSUER_BASE_URL=https://YOUR-TENANT.auth0.com
AUTH0_CLIENT_ID=xxx
AUTH0_CLIENT_SECRET=xxx

Auth0 Actions (code serveur-side sur les login)

// Post-Login Action
exports.onExecutePostLogin = async (event, api) => {
  if (!event.user.email_verified) {
    api.access.deny('Please verify your email first')
  }

  api.idToken.setCustomClaim(
    'https://example.com/roles',
    event.user.app_metadata.roles ?? ['user']
  )
}

2. Clerk (React-first, UI included)

Setup Next.js

npm install @clerk/nextjs

// app/layout.tsx
import { ClerkProvider } from '@clerk/nextjs'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <ClerkProvider>
      <html>
        <body>{children}</body>
      </html>
    </ClerkProvider>
  )
}

// middleware.ts
import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'

const isProtectedRoute = createRouteMatcher(['/dashboard(.*)', '/account(.*)'])

export default clerkMiddleware((auth, req) => {
  if (isProtectedRoute(req)) auth().protect()
})

export const config = {
  matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'],
}

UI components pré-faits

// app/sign-in/[[...sign-in]]/page.tsx
import { SignIn } from '@clerk/nextjs'

export default function Page() {
  return <SignIn />
}

// app/sign-up/[[...sign-up]]/page.tsx
import { SignUp } from '@clerk/nextjs'

export default function Page() {
  return <SignUp />
}

// Layout header
import { UserButton, SignedIn, SignedOut, SignInButton } from '@clerk/nextjs'

<SignedIn>
  <UserButton />
</SignedIn>
<SignedOut>
  <SignInButton mode="modal" />
</SignedOut>

Côté serveur (RSC + Route Handlers)

import { auth, currentUser } from '@clerk/nextjs/server'

export default async function Dashboard() {
  const { userId } = auth()
  if (!userId) return null

  const user = await currentUser()
  return <h1>Hello, {user?.firstName}</h1>
}

Organizations (multi-tenant)

import { OrganizationSwitcher, CreateOrganization } from '@clerk/nextjs'

<OrganizationSwitcher afterCreateOrganizationUrl="/dashboard" />

3. NextAuth.js / Auth.js (open-source flexible)

Setup Next.js App Router (Auth.js v5 beta)

npm install next-auth@beta

// auth.ts
import NextAuth from 'next-auth'
import Google from 'next-auth/providers/google'
import GitHub from 'next-auth/providers/github'
import Credentials from 'next-auth/providers/credentials'

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [
    Google({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
    GitHub({
      clientId: process.env.GITHUB_CLIENT_ID!,
      clientSecret: process.env.GITHUB_CLIENT_SECRET!,
    }),
    Credentials({
      credentials: {
        email: { label: 'Email', type: 'email' },
        password: { label: 'Password', type: 'password' },
      },
      async authorize(credentials) {
        const user = await findUserByEmail(credentials?.email as string)
        if (!user) return null

        const valid = await verifyPassword(user.passwordHash, credentials?.password as string)
        if (!valid) return null

        return { id: user.id, email: user.email, name: user.name }
      },
    }),
  ],
  callbacks: {
    async jwt({ token, user }) {
      if (user) token.role = user.role
      return token
    },
    async session({ session, token }) {
      if (token && session.user) {
        session.user.role = token.role as string
      }
      return session
    },
  },
  pages: {
    signIn: '/sign-in',
  },
})

// app/api/auth/[...nextauth]/route.ts
export { GET, POST } from '@/auth'

// Utilisation côté serveur
import { auth } from '@/auth'

export default async function Dashboard() {
  const session = await auth()
  if (!session?.user) return <a href="/sign-in">Log in</a>
  return <h1>Hello, {session.user.email}</h1>
}

// Côté client
'use client'
import { useSession, signIn, signOut } from 'next-auth/react'

export function UserMenu() {
  const { data: session } = useSession()
  if (!session) return <button onClick={() => signIn()}>Sign in</button>
  return <button onClick={() => signOut()}>Sign out</button>
}

4. Supabase Auth (Postgres + RLS)

Setup

npm install @supabase/supabase-js @supabase/ssr

// lib/supabase/server.ts
import { createServerClient } from '@supabase/ssr'
import { cookies } from 'next/headers'

export function createClient() {
  const cookieStore = cookies()
  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        get(name: string) {
          return cookieStore.get(name)?.value
        },
        set(name: string, value: string, options: any) {
          cookieStore.set({ name, value, ...options })
        },
        remove(name: string, options: any) {
          cookieStore.set({ name, value: '', ...options })
        },
      },
    }
  )
}

// Usage RSC
import { createClient } from '@/lib/supabase/server'

export default async function Dashboard() {
  const supabase = createClient()
  const { data: { user } } = await supabase.auth.getUser()

  if (!user) return null

  // Les queries Supabase respectent automatiquement les RLS policies
  const { data: posts } = await supabase.from('posts').select()

  return <div>{user.email}</div>
}

Magic link

const { data, error } = await supabase.auth.signInWithOtp({
  email: 'user@example.com',
  options: {
    emailRedirectTo: 'https://example.com/auth/callback',
  },
})

OAuth provider

const { data, error } = await supabase.auth.signInWithOAuth({
  provider: 'google',
  options: { redirectTo: 'https://example.com/auth/callback' },
})

5. Lucia Auth (TypeScript-first, self-managed)

npm install lucia oslo

// lib/auth.ts
import { Lucia } from 'lucia'
import { DrizzleSQLiteAdapter } from '@lucia-auth/adapter-drizzle'
import { db, sessionTable, userTable } from './db'

const adapter = new DrizzleSQLiteAdapter(db, sessionTable, userTable)

export const lucia = new Lucia(adapter, {
  sessionCookie: {
    attributes: {
      secure: process.env.NODE_ENV === 'production',
    },
  },
  getUserAttributes: (attrs) => ({
    email: attrs.email,
    username: attrs.username,
  }),
})

declare module 'lucia' {
  interface Register {
    Lucia: typeof lucia
    DatabaseUserAttributes: {
      email: string
      username: string
    }
  }
}

Lucia est plus low-level — utile si besoin de contrôle total sur le schéma DB, les sessions, et le flow.

6. WebAuthn / Passkeys (passwordless)

npm install @simplewebauthn/server @simplewebauthn/browser

// app/api/webauthn/register/options/route.ts
import { generateRegistrationOptions } from '@simplewebauthn/server'

export async function POST(request: Request) {
  const { userId, userEmail } = await request.json()

  const options = await generateRegistrationOptions({
    rpName: 'My App',
    rpID: 'example.com',
    userID: new TextEncoder().encode(userId),
    userName: userEmail,
    attestationType: 'none',
    authenticatorSelection: {
      residentKey: 'preferred',
      userVerification: 'preferred',
    },
  })

  // Stocker options.challenge en DB pour le vérifier ensuite
  await storeChallenge(userId, options.challenge)

  return Response.json(options)
}

// Côté client
import { startRegistration } from '@simplewebauthn/browser'

const opts = await fetch('/api/webauthn/register/options', { method: 'POST' }).then(r => r.json())
const credential = await startRegistration(opts)
await fetch('/api/webauthn/register/verify', {
  method: 'POST',
  body: JSON.stringify(credential),
})

OAuth 2.0 + PKCE flow (universel)

Pour les apps mobiles ou desktop sans backend, utiliser le flow OAuth 2.0 + PKCE :

Générer code_verifier (random 43-128 chars)
code_challenge = base64url(SHA256(code_verifier))
Rediriger vers /authorize?code_challenge=...&code_challenge_method=S256
Échanger le code retour + code_verifier contre un access token
Stocker le token de façon sécurisée (jamais en localStorage pour un browser)

Stockage des tokens — règles de sécurité

Access tokens → HttpOnly + Secure + SameSite cookies (jamais localStorage)
Refresh tokens → HttpOnly + Secure + SameSite strict cookies
ID tokens (JWT session) → HttpOnly + Secure cookies
CSRF tokens → double-submit cookie pattern

Anti-patterns

Rouler sa propre auth à partir de zéro → failles subtiles garanties
localStorage pour les JWT → XSS → token volé
Pas de HttpOnly sur les cookies de session
Expiration token > 24h sans refresh → session volée dure trop longtemps
Pas de CSRF protection sur les routes authentifiées POST/PUT/DELETE
Password min length < 12 chars en 2025
Pas de rate limiting sur /sign-in → bruteforce
Secrets OAuth hardcodés dans le code client
Ignorer MFA sur les rôles admin / staff
OAuth callback sans vérification de state → CSRF sur l'OAuth

Checklist production

Quand déléguer

Backend auth API (Laravel, Django, Spring) → agents de atum-stack-backend
Mobile auth (iOS / Android) → agents de atum-stack-mobile
E-commerce-specific auth → Shopify Customer Account API via shopify-expert
WordPress auth → wordpress-expert + plugins (MemberPress, Restrict Content Pro)
Audit sécurité → security-reviewer