Skills

Webiny Configure Auth0

Configuring Auth0 as an identity provider (IDP) for Webiny projects.

Install

npx skills add webiny/webiny-js --skill webiny-configure-auth0 -g -a claude-code -y
Repository
webiny/webiny-js8.1k
Category
Engineering
Updated
5d ago
License
See repository
Context cost
Mediumabout 2,527 tokens
Runs scripts
No, instructions only

What it does

Configuring Auth0 as an identity provider (IDP) for Webiny projects. Use this skill when the developer asks about Auth0 authentication, Auth0 SSO, replacing Cognito with Auth0, setting up external identity providers, configuring OIDC authentication, mapping JWT claims to Webiny identities, or customizing the Auth0 login flow. Also relevant when asking about AUTH0_ISSUER, AUTH0_CLIENT_ID environment variables, Auth0IdpConfig, or the MyAuth0Extension pattern.

Configure Auth0 Authentication

TL;DR

Webiny supports Auth0 as an external identity provider (IDP) to replace the default Cognito authentication. First, install the @webiny/auth0 package (using the same version as the webiny dependency in package.json). Then create two files: an API config class that maps Auth0 JWT claims to Webiny identity data (Auth0IdpConfig), and a React extension component (<Auth0 />) that wires issuer URL, client ID, and the API config path. Register the extension in webiny.config.tsx, set two environment variables (AUTH0_ISSUER, AUTH0_CLIENT_ID), and deploy.

Pattern / Core Concept

Auth0 integration has two parts:

  1. API Config, A class implementing Auth0IdpConfig.Interface that maps JWT token claims to Webiny's identity structure. Registered via Auth0IdpConfig.createImplementation() (the universal DI pattern).
  2. Extension Component, A React component that renders <Auth0 /> from @webiny/auth0, passing the issuer URL, client ID, and path to the API config file. The <Auth0 /> component handles environment variable injection, API extension registration, and Admin login screen setup automatically.

How <Auth0 /> Works Internally

The <Auth0 /> component (from @webiny/auth0) is a defineExtension that:

  • Sets Lambda env vars: AUTH0_ISSUER, AUTH0_CLIENT_ID
  • Sets Admin app env vars: REACT_APP_IDP_TYPE=auth0, REACT_APP_AUTH0_ISSUER, REACT_APP_AUTH0_CLIENT_ID
  • Registers the internal Auth0IdpFeature API extension (OIDC token verification)
  • Registers your custom API config extension (identity mapping)
  • Registers the Admin Auth0 login screen extension

Reference Tables

Auth0IdpConfig.Interface

Read the whole SKILL.md on GitHub

More in Engineering