How auth0/lock works
Auth0 Lock is a configurable React authentication widget for web applications. The principal workflow begins when an application shows the widget, then Lock initializes state and resolves configuration before selecting a login, signup, enterprise, or MFA screen; users submit credentials or choose a provider, and the widget uses Auth0 authentication APIs and emits an authenticated result for the application. The graph preserves the documented database, social, enterprise/SSO, quick-auth, localization, and UI branches. Several subsystem paths are supported by the tree and source index, but their internal calls were not sampled, so those links are omitted.
Main entry points: classic.js Classic flow · core.js Lock instance · actions.js Quick authentication · login_sign_up_tabs.jsx Login and signup
Components 20
Widget lifecycle
- Lock instance
src/core.js - Classic flow
src/engine/classic.js
Authentication flows
- Database login
src/connection/database/actions.js - Login and signup
src/connection/database/login_sign_up_tabs.jsx - Enterprise routing
src/connection/enterprise.js - Enterprise actions
src/connection/enterprise/actions.js - Quick authentication
src/quick-auth/actions.js - SSO screens
src/core/sso/last_login_screen.jsx - Social providers
src/field/social/social_buttons_pane.jsx
Widget presentation
- Credential fields
src/field/index.js - Screen framework
src/core/screen.js - Widget chrome
src/ui/box/chrome.jsx - Quick-auth pane
src/ui/pane/quick_auth_pane.jsx - Success confirmation
src/core/signed_in_confirmation.jsx
Shared services
- Lock state
src/store/index.js - Async sync
src/sync.js - Web API
src/core/web_api.js - Localization
src/i18n.js
Other components
- Application
- Auth0 services
Connections 26
- Application → Lock instance: creates and shows
README.md - Lock instance → Classic flow: selects flow
src/core.js - Classic flow → Lock state: uses state
src/engine/classic.js - Classic flow → Database login: routes database login
src/engine/classic.js - Classic flow → Login and signup: selects login screens
src/engine/classic.js - Classic flow → Enterprise routing: checks enterprise connections
src/engine/classic.js - Classic flow → SSO screens: selects last-login screen
src/engine/classic.js - Classic flow → Quick authentication: routes quick auth
src/engine/classic.js - Classic flow → Screen framework: uses screen framework
src/engine/classic.js - Enterprise routing → Credential fields: uses field helpers
src/connection/enterprise.js - Login and signup → Database login: invokes login actions
src/engine/classic/login.jsx - Quick authentication → Lock state: reads and updates
src/quick-auth/actions.js - Quick authentication → Web API: dispatches login
src/quick-auth/actions.js - Quick-auth pane → Success confirmation: renders confirmation
src/core/signed_in_confirmation.jsx - Screen framework → Login and signup: selects database screen
src/core/screen.js - SSO screens → Quick authentication: invokes quick-auth actions
src/core/sso/last_login_screen.jsx - Social providers → Quick authentication: invokes quick-auth actions
src/field/social/social_buttons_pane.jsx - Lock instance → Web API: uses authentication API
src/core.js - Web API → Auth0 services: sends API requests
src/core/web_api.js - Lock instance → Async sync: coordinates async data
src/core.js - Async sync → Lock state: observes and updates
src/sync.js - Lock instance → Widget chrome: renders widget chrome
src/core.js - Lock instance → Localization: initializes translations
src/core.js - Localization → Async sync: loads dictionaries
src/i18n.js - Login and signup → Credential fields: uses credential fields
src/engine/classic/sign_up_screen.jsx - Enterprise actions → Web API: dispatches enterprise authentication