# auth0/lock architecture

> Architecture diagram of the GitHub repository auth0/lock, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-12). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/auth0/lock
- Repository: https://github.com/auth0/lock

## Overview

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: [`src/engine/classic.js`](https://github.com/auth0/lock/blob/master/src/engine/classic.js) (Classic flow), [`src/core.js`](https://github.com/auth0/lock/blob/master/src/core.js) (Lock instance), [`src/quick-auth/actions.js`](https://github.com/auth0/lock/blob/master/src/quick-auth/actions.js) (Quick authentication), [`src/connection/database/login_sign_up_tabs.jsx`](https://github.com/auth0/lock/blob/master/src/connection/database/login_sign_up_tabs.jsx) (Login and signup)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_lifecycle["Widget lifecycle"]
  node_lock["Lock instance<br/>[core.js]"]
  node_classic["Classic flow<br/>[classic.js]"]
end

subgraph group_auth["Authentication flows"]
  node_database["Database login<br/>[actions.js]"]
  node_dbscreens["Login and signup"]
  node_enterprise["Enterprise routing<br/>[enterprise.js]"]
  node_enterpriseactions["Enterprise actions<br/>[actions.js]"]
  node_quick["Quick authentication<br/>[actions.js]"]
  node_sso["SSO screens"]
  node_social["Social providers"]
end

subgraph group_presentation["Widget presentation"]
  node_fields["Credential fields<br/>[index.js]"]
  node_screen["Screen framework<br/>[screen.js]"]
  node_chrome["Widget chrome<br/>[chrome.jsx]"]
  node_quickpane["Quick-auth pane"]
  node_confirmation["Success confirmation"]
end

subgraph group_shared["Shared services"]
  node_state[("Lock state<br/>[index.js]")]
  node_sync["Async sync<br/>[sync.js]"]
  node_webapi["Web API<br/>[web_api.js]"]
  node_i18n["Localization<br/>[i18n.js]"]
end

node_app(("Application"))
node_auth0{{"Auth0 services"}}

node_app -->|"creates and shows"| node_lock
node_lock -->|"selects flow"| node_classic
node_classic -->|"uses state"| node_state
node_classic -->|"routes database login"| node_database
node_classic -->|"selects login screens"| node_dbscreens
node_classic -->|"checks enterprise connections"| node_enterprise
node_classic -->|"selects last-login screen"| node_sso
node_classic -->|"routes quick auth"| node_quick
node_classic -->|"uses screen framework"| node_screen
node_enterprise -->|"uses field helpers"| node_fields
node_dbscreens -->|"invokes login actions"| node_database
node_quick -->|"reads and updates"| node_state
node_quick -->|"dispatches login"| node_webapi
node_quickpane -->|"renders confirmation"| node_confirmation
node_screen -->|"selects database screen"| node_dbscreens
node_sso -->|"invokes quick-auth actions"| node_quick
node_social -->|"invokes quick-auth actions"| node_quick
node_lock -->|"uses authentication API"| node_webapi
node_webapi -->|"sends API requests"| node_auth0
node_lock -->|"coordinates async data"| node_sync
node_sync -->|"observes and updates"| node_state
node_lock -->|"renders widget chrome"| node_chrome
node_lock -->|"initializes translations"| node_i18n
node_i18n -->|"loads dictionaries"| node_sync
node_dbscreens -->|"uses credential fields"| node_fields
node_enterpriseactions -.->|"dispatches enterprise authentication"| node_webapi

click node_lock "https://github.com/auth0/lock/blob/master/src/core.js"
click node_classic "https://github.com/auth0/lock/blob/master/src/engine/classic.js"
click node_state "https://github.com/auth0/lock/blob/master/src/store/index.js"
click node_sync "https://github.com/auth0/lock/blob/master/src/sync.js"
click node_webapi "https://github.com/auth0/lock/blob/master/src/core/web_api.js"
click node_database "https://github.com/auth0/lock/blob/master/src/connection/database/actions.js"
click node_dbscreens "https://github.com/auth0/lock/blob/master/src/connection/database/login_sign_up_tabs.jsx"
click node_enterprise "https://github.com/auth0/lock/blob/master/src/connection/enterprise.js"
click node_enterpriseactions "https://github.com/auth0/lock/blob/master/src/connection/enterprise/actions.js"
click node_quick "https://github.com/auth0/lock/blob/master/src/quick-auth/actions.js"
click node_sso "https://github.com/auth0/lock/blob/master/src/core/sso/last_login_screen.jsx"
click node_social "https://github.com/auth0/lock/blob/master/src/field/social/social_buttons_pane.jsx"
click node_fields "https://github.com/auth0/lock/blob/master/src/field/index.js"
click node_screen "https://github.com/auth0/lock/blob/master/src/core/screen.js"
click node_chrome "https://github.com/auth0/lock/blob/master/src/ui/box/chrome.jsx"
click node_quickpane "https://github.com/auth0/lock/blob/master/src/ui/pane/quick_auth_pane.jsx"
click node_confirmation "https://github.com/auth0/lock/blob/master/src/core/signed_in_confirmation.jsx"
click node_i18n "https://github.com/auth0/lock/blob/master/src/i18n.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_lock,node_classic toneBlue
class node_database,node_dbscreens,node_enterprise,node_enterpriseactions,node_quick,node_sso,node_social toneAmber
class node_fields,node_screen,node_chrome,node_quickpane,node_confirmation toneMint
class node_state,node_sync,node_webapi,node_i18n toneRose
class node_app,node_auth0 toneIndigo
```

## Components

### Widget lifecycle

- [Lock instance](https://github.com/auth0/lock/blob/master/src/core.js): `src/core.js`
- [Classic flow](https://github.com/auth0/lock/blob/master/src/engine/classic.js): `src/engine/classic.js`

### Authentication flows

- [Database login](https://github.com/auth0/lock/blob/master/src/connection/database/actions.js): `src/connection/database/actions.js`
- [Login and signup](https://github.com/auth0/lock/blob/master/src/connection/database/login_sign_up_tabs.jsx): `src/connection/database/login_sign_up_tabs.jsx`
- [Enterprise routing](https://github.com/auth0/lock/blob/master/src/connection/enterprise.js): `src/connection/enterprise.js`
- [Enterprise actions](https://github.com/auth0/lock/blob/master/src/connection/enterprise/actions.js): `src/connection/enterprise/actions.js`
- [Quick authentication](https://github.com/auth0/lock/blob/master/src/quick-auth/actions.js): `src/quick-auth/actions.js`
- [SSO screens](https://github.com/auth0/lock/blob/master/src/core/sso/last_login_screen.jsx): `src/core/sso/last_login_screen.jsx`
- [Social providers](https://github.com/auth0/lock/blob/master/src/field/social/social_buttons_pane.jsx): `src/field/social/social_buttons_pane.jsx`

### Widget presentation

- [Credential fields](https://github.com/auth0/lock/blob/master/src/field/index.js): `src/field/index.js`
- [Screen framework](https://github.com/auth0/lock/blob/master/src/core/screen.js): `src/core/screen.js`
- [Widget chrome](https://github.com/auth0/lock/blob/master/src/ui/box/chrome.jsx): `src/ui/box/chrome.jsx`
- [Quick-auth pane](https://github.com/auth0/lock/blob/master/src/ui/pane/quick_auth_pane.jsx): `src/ui/pane/quick_auth_pane.jsx`
- [Success confirmation](https://github.com/auth0/lock/blob/master/src/core/signed_in_confirmation.jsx): `src/core/signed_in_confirmation.jsx`

### Shared services

- [Lock state](https://github.com/auth0/lock/blob/master/src/store/index.js): `src/store/index.js`
- [Async sync](https://github.com/auth0/lock/blob/master/src/sync.js): `src/sync.js`
- [Web API](https://github.com/auth0/lock/blob/master/src/core/web_api.js): `src/core/web_api.js`
- [Localization](https://github.com/auth0/lock/blob/master/src/i18n.js): `src/i18n.js`

### Other components

- **Application**
- **Auth0 services**

## Connections

- Application → Lock instance: creates and shows (evidence: `README.md`)
- Lock instance → Classic flow: selects flow (evidence: `src/core.js`)
- Classic flow → Lock state: uses state (evidence: `src/engine/classic.js`)
- Classic flow → Database login: routes database login (evidence: `src/engine/classic.js`)
- Classic flow → Login and signup: selects login screens (evidence: `src/engine/classic.js`)
- Classic flow → Enterprise routing: checks enterprise connections (evidence: `src/engine/classic.js`)
- Classic flow → SSO screens: selects last-login screen (evidence: `src/engine/classic.js`)
- Classic flow → Quick authentication: routes quick auth (evidence: `src/engine/classic.js`)
- Classic flow → Screen framework: uses screen framework (evidence: `src/engine/classic.js`)
- Enterprise routing → Credential fields: uses field helpers (evidence: `src/connection/enterprise.js`)
- Login and signup → Database login: invokes login actions (evidence: `src/engine/classic/login.jsx`)
- Quick authentication → Lock state: reads and updates (evidence: `src/quick-auth/actions.js`)
- Quick authentication → Web API: dispatches login (evidence: `src/quick-auth/actions.js`)
- Quick-auth pane → Success confirmation: renders confirmation (evidence: `src/core/signed_in_confirmation.jsx`)
- Screen framework → Login and signup: selects database screen (evidence: `src/core/screen.js`)
- SSO screens → Quick authentication: invokes quick-auth actions (evidence: `src/core/sso/last_login_screen.jsx`)
- Social providers → Quick authentication: invokes quick-auth actions (evidence: `src/field/social/social_buttons_pane.jsx`)
- Lock instance → Web API: uses authentication API (evidence: `src/core.js`)
- Web API → Auth0 services: sends API requests (evidence: `src/core/web_api.js`)
- Lock instance → Async sync: coordinates async data (evidence: `src/core.js`)
- Async sync → Lock state: observes and updates (evidence: `src/sync.js`)
- Lock instance → Widget chrome: renders widget chrome (evidence: `src/core.js`)
- Lock instance → Localization: initializes translations (evidence: `src/core.js`)
- Localization → Async sync: loads dictionaries (evidence: `src/i18n.js`)
- Login and signup → Credential fields: uses credential fields (evidence: `src/engine/classic/sign_up_screen.jsx`)
- Enterprise actions → Web API: dispatches enterprise authentication