skills.rest
mattbutlerengineering
mattbutlerengineeringCOMMUNITY
Explore all skills by this author →
GitHub

auth-package

Integrate OIDC authentication into React frontends and protect Fastify routes with JWTs.

1|Updated Jan 24, 2026
Search Tags:#jwt#fastify#protected routes#oidc#auth0#react router#access token
One-click install
npx skills add https://github.com/mattbutlerengineering/mattbutlerengineering --skill auth-package
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: auth-package
Source: https://github.com/mattbutlerengineering/mattbutlerengineering/tree/main/.claude/skills/auth-package
Command: npx skills add https://github.com/mattbutlerengineering/mattbutlerengineering --skill auth-package

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the complexity of adding OIDC-based authentication to a React frontend and protecting Fastify API routes using a consistent, portable @mbe/auth layer.

Core Features & Use Cases

  • React AuthProvider + hooks: Initialize authentication state with AuthProvider and manage sign-in, sign-out, and session-aware UI using useAuth, useAccessToken, and useRequireAuth.
  • Fastify JWT protection: Register authPlugin to validate bearer JWTs and populate request.user, or apply requireAuth per-route for fine-grained access control.
  • Environment-driven configuration for Auth0: Configure authority, clientId, redirectUri, and audience via Vite and Node environment variables, aligned to an Auth0 OIDC setup.
  • Testing patterns (unit + E2E): Mock useAuth in Vitest for deterministic component testing and use Playwright with programmatic Auth0 login fixtures for authenticated E2E flows.

Quick Start

Use this skill to add authentication by wrapping your React app with AuthProvider, then protect Fastify routes by registering authPlugin and adding requireAuth where needed.

Frequently Asked Questions about auth-package

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

FAQPage Schema
How do I add OIDC authentication to a React frontend and protect Fastify routes?▼

To add OIDC authentication to React and protect Fastify routes, wrap your app with AuthProvider and use React hooks for state management, then register the Fastify authPlugin to validate bearer JWTs and populate request.user.

How do I protect Fastify API routes with JWT bearer token verification?▼

Protect Fastify API routes with JWT bearer verification by registering the authPlugin globally or applying the requireAuth function per-route, which validates access tokens using the bearerAuth security schema and populates request.user.

How do I retrieve an access token in React for calling a protected Fastify API?▼

Retrieve an access token in React for calling a protected Fastify API by using the useAccessToken hook from the @mbe/auth package, which manages OIDC authentication state and securely provides tokens for API calls.

Can I use Auth0 environment variables for configuring OIDC in React and Fastify?▼

Yes, you can configure Auth0 OIDC settings using environment variables. Define authority, clientId, redirectUri, and audience via Vite for the React frontend and Node environment variables for the Fastify backend.

What is the best way to test authenticated Fastify and React routes with Vitest and Playwright?▼

The best way to test authenticated routes is to mock useAuth in Vitest for deterministic unit tests, and use Playwright with programmatic Auth0 login fixtures to execute authenticated end-to-end flows.

Related Skills

Explore More Software Engineering Skills→
AlexAlvarezAlmendrosAlexAlvarezAlmendros
1

auth0-authentication

Implement Auth0 authentication for SPA, server-side, and API integrations.

Community
Basic
Endsi3gEndsi3g

clerk-react-patterns

Implement Clerk authentication patterns for React single-page apps.

Community
Intermediate
mindcockpit-aimindcockpit-ai
11

react-testing

Integrate Vitest, React Testing Library, MSW v2, and Playwright for React UI testing.

Official
Advanced
mattbutlerengineeringmattbutlerengineering
1

new-service

Scaffold a Fastify and Prisma backend service in a monorepo.

Community
Advanced