# thunder-id/javascript-sdks architecture

> Architecture diagram of the GitHub repository thunder-id/javascript-sdks, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/thunder-id/javascript-sdks
- Repository: https://github.com/thunder-id/javascript-sdks

## Overview

ThunderID JavaScript SDKs provide authentication and user-management capabilities across browser, Node.js, and web-framework applications. The principal workflow is an application initiating sign-in or sign-up, the relevant SDK handling an embedded or redirect-based flow and OAuth callback, and the client receiving session/token and user data. Framework packages add UI, route protection, or server-side session handling. Package-level relationships reflect the README and sampled imports; several unsampled package internals are represented only at their enclosing source paths.

Main entry points: [`packages/browser/src/ThunderIDBrowserClient.ts`](https://github.com/thunder-id/javascript-sdks/blob/main/packages/browser/src/ThunderIDBrowserClient.ts) (Browser client), [`packages/nextjs/src/ThunderIDNextClient.ts`](https://github.com/thunder-id/javascript-sdks/blob/main/packages/nextjs/src/ThunderIDNextClient.ts) (Next.js SDK), [`packages/javascript/src/ThunderIDJavaScriptClient.ts`](https://github.com/thunder-id/javascript-sdks/blob/main/packages/javascript/src/ThunderIDJavaScriptClient.ts) (JavaScript client), [`packages/javascript/src/api`](https://github.com/thunder-id/javascript-sdks/tree/main/packages/javascript/src/api) (Auth flows)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_core["Core SDK"]
  node_coreclient["JavaScript client"]
  node_coreflows["Auth flows"]
  node_coreapi["User APIs"]
  node_storage["Storage manager<br/>[StorageManager.ts]"]
end

subgraph group_runtime["Runtime clients"]
  node_browser["Browser client"]
  node_browserstores["Browser stores"]
  node_node["Node client"]
end

subgraph group_framework["Framework integrations"]
  node_react["React SDK"]
  node_reactui["React components"]
  node_reactcallback["OAuth callback"]
  node_vue["Vue SDK"]
  node_vuecallback["Vue callback"]
  node_router["React Router"]
end

subgraph group_server["Server integrations"]
  node_next["Next.js SDK"]
  node_nextsession["Session manager<br/>[SessionManager.ts]"]
  node_nextactions["Server actions"]
  node_nuxt["Nuxt SDK"]
  node_nuxtapi["Nuxt auth routes"]
  node_express["Express middleware"]
  node_betterauth["Better Auth helper"]
end

node_app(("Application"))
node_service["ThunderID service"]

node_app -->|"starts auth"| node_browser
node_app -->|"uses UI"| node_reactui
node_app -->|"invokes actions"| node_nextactions
node_app -->|"uses module"| node_nuxt
node_app -->|"configures middleware"| node_express
node_app -->|"uses routes"| node_router
node_browser -->|"extends client"| node_coreclient
node_node -->|"extends client"| node_coreclient
node_react -->|"extends client"| node_browser
node_vue -->|"extends client"| node_browser
node_next -->|"extends client"| node_node
node_coreclient -->|"reads and writes"| node_storage
node_browser -->|"uses stores"| node_browserstores
node_coreclient -->|"executes flows"| node_coreflows
node_coreclient -->|"requests user data"| node_coreapi
node_coreflows -->|"submits auth requests"| node_service
node_coreapi -->|"requests profile data"| node_service
node_reactui -->|"handles callback"| node_reactcallback
node_reactcallback -->|"submits code"| node_coreflows
node_vue -->|"uses callback"| node_vuecallback
node_vuecallback -->|"submits code"| node_coreflows
node_next -->|"executes embedded flow"| node_coreflows
node_next -->|"fetches user data"| node_coreapi
node_next -->|"signs session tokens"| node_nextsession
node_nextactions -->|"calls client"| node_next
node_nextactions -->|"manages sessions"| node_nextsession
node_nextsession -->|"uses cookie config"| node_node
node_nuxt -->|"dispatches auth routes"| node_nuxtapi
node_nuxtapi -->|"handles auth requests"| node_service
node_express -->|"uses runtime client"| node_node
node_router -.->|"integrates client"| node_browser
node_betterauth -.->|"provider integration"| node_service

click node_coreclient "https://github.com/thunder-id/javascript-sdks/blob/main/packages/javascript/src/ThunderIDJavaScriptClient.ts"
click node_coreflows "https://github.com/thunder-id/javascript-sdks/tree/main/packages/javascript/src/api"
click node_coreapi "https://github.com/thunder-id/javascript-sdks/tree/main/packages/javascript/src/api"
click node_storage "https://github.com/thunder-id/javascript-sdks/blob/main/packages/javascript/src/StorageManager.ts"
click node_browser "https://github.com/thunder-id/javascript-sdks/blob/main/packages/browser/src/ThunderIDBrowserClient.ts"
click node_browserstores "https://github.com/thunder-id/javascript-sdks/tree/main/packages/browser/src/stores"
click node_node "https://github.com/thunder-id/javascript-sdks/blob/main/packages/node/src/ThunderIDNodeClient.ts"
click node_react "https://github.com/thunder-id/javascript-sdks/blob/main/packages/react/src/ThunderIDReactClient.ts"
click node_reactui "https://github.com/thunder-id/javascript-sdks/tree/main/packages/react/src/components"
click node_reactcallback "https://github.com/thunder-id/javascript-sdks/blob/main/packages/react/src/hooks/useOAuthCallback.ts"
click node_vue "https://github.com/thunder-id/javascript-sdks/blob/main/packages/vue/src/ThunderIDVueClient.ts"
click node_vuecallback "https://github.com/thunder-id/javascript-sdks/blob/main/packages/vue/src/composables/useOAuthCallback.ts"
click node_next "https://github.com/thunder-id/javascript-sdks/blob/main/packages/nextjs/src/ThunderIDNextClient.ts"
click node_nextsession "https://github.com/thunder-id/javascript-sdks/blob/main/packages/nextjs/src/utils/SessionManager.ts"
click node_nextactions "https://github.com/thunder-id/javascript-sdks/tree/main/packages/nextjs/src/server/actions"
click node_nuxt "https://github.com/thunder-id/javascript-sdks/tree/main/packages/nuxt/src/runtime"
click node_nuxtapi "https://github.com/thunder-id/javascript-sdks/tree/main/packages/nuxt/src/runtime/server/routes/auth/session"
click node_express "https://github.com/thunder-id/javascript-sdks/tree/main/packages/express/src/middleware"
click node_router "https://github.com/thunder-id/javascript-sdks/tree/main/packages/react-router/src/components"
click node_betterauth "https://github.com/thunder-id/javascript-sdks/tree/main/packages/better-auth/src"

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_coreclient,node_coreflows,node_coreapi,node_storage toneBlue
class node_browser,node_browserstores,node_node toneAmber
class node_react,node_reactui,node_reactcallback,node_vue,node_vuecallback,node_router toneMint
class node_next,node_nextsession,node_nextactions,node_nuxt,node_nuxtapi,node_express,node_betterauth toneRose
class node_app,node_service toneIndigo
```

## Components

### Core SDK

- [JavaScript client](https://github.com/thunder-id/javascript-sdks/blob/main/packages/javascript/src/ThunderIDJavaScriptClient.ts): `packages/javascript/src/ThunderIDJavaScriptClient.ts`
- [Auth flows](https://github.com/thunder-id/javascript-sdks/tree/main/packages/javascript/src/api): `packages/javascript/src/api`
- [User APIs](https://github.com/thunder-id/javascript-sdks/tree/main/packages/javascript/src/api): `packages/javascript/src/api`
- [Storage manager](https://github.com/thunder-id/javascript-sdks/blob/main/packages/javascript/src/StorageManager.ts): `packages/javascript/src/StorageManager.ts`

### Runtime clients

- [Browser client](https://github.com/thunder-id/javascript-sdks/blob/main/packages/browser/src/ThunderIDBrowserClient.ts): `packages/browser/src/ThunderIDBrowserClient.ts`
- [Browser stores](https://github.com/thunder-id/javascript-sdks/tree/main/packages/browser/src/stores): `packages/browser/src/stores`
- [Node client](https://github.com/thunder-id/javascript-sdks/blob/main/packages/node/src/ThunderIDNodeClient.ts): `packages/node/src/ThunderIDNodeClient.ts`

### Framework integrations

- [React SDK](https://github.com/thunder-id/javascript-sdks/blob/main/packages/react/src/ThunderIDReactClient.ts): `packages/react/src/ThunderIDReactClient.ts`
- [React components](https://github.com/thunder-id/javascript-sdks/tree/main/packages/react/src/components): `packages/react/src/components`
- [OAuth callback](https://github.com/thunder-id/javascript-sdks/blob/main/packages/react/src/hooks/useOAuthCallback.ts): `packages/react/src/hooks/useOAuthCallback.ts`
- [Vue SDK](https://github.com/thunder-id/javascript-sdks/blob/main/packages/vue/src/ThunderIDVueClient.ts): `packages/vue/src/ThunderIDVueClient.ts`
- [Vue callback](https://github.com/thunder-id/javascript-sdks/blob/main/packages/vue/src/composables/useOAuthCallback.ts): `packages/vue/src/composables/useOAuthCallback.ts`
- [React Router](https://github.com/thunder-id/javascript-sdks/tree/main/packages/react-router/src/components): `packages/react-router/src/components`

### Server integrations

- [Next.js SDK](https://github.com/thunder-id/javascript-sdks/blob/main/packages/nextjs/src/ThunderIDNextClient.ts): `packages/nextjs/src/ThunderIDNextClient.ts`
- [Session manager](https://github.com/thunder-id/javascript-sdks/blob/main/packages/nextjs/src/utils/SessionManager.ts): `packages/nextjs/src/utils/SessionManager.ts`
- [Server actions](https://github.com/thunder-id/javascript-sdks/tree/main/packages/nextjs/src/server/actions): `packages/nextjs/src/server/actions`
- [Nuxt SDK](https://github.com/thunder-id/javascript-sdks/tree/main/packages/nuxt/src/runtime): `packages/nuxt/src/runtime`
- [Nuxt auth routes](https://github.com/thunder-id/javascript-sdks/tree/main/packages/nuxt/src/runtime/server/routes/auth/session): `packages/nuxt/src/runtime/server/routes/auth/session`
- [Express middleware](https://github.com/thunder-id/javascript-sdks/tree/main/packages/express/src/middleware): `packages/express/src/middleware`
- [Better Auth helper](https://github.com/thunder-id/javascript-sdks/tree/main/packages/better-auth/src): `packages/better-auth/src`

### Other components

- **Application**
- **ThunderID service**

## Connections

- Application → Browser client: starts auth
- Application → React components: uses UI
- Application → Server actions: invokes actions
- Application → Nuxt SDK: uses module
- Application → Express middleware: configures middleware
- Application → React Router: uses routes
- Browser client → JavaScript client: extends client
- Node client → JavaScript client: extends client
- React SDK → Browser client: extends client
- Vue SDK → Browser client: extends client
- Next.js SDK → Node client: extends client
- JavaScript client → Storage manager: reads and writes
- Browser client → Browser stores: uses stores
- JavaScript client → Auth flows: executes flows
- JavaScript client → User APIs: requests user data
- Auth flows → ThunderID service: submits auth requests
- User APIs → ThunderID service: requests profile data
- React components → OAuth callback: handles callback
- OAuth callback → Auth flows: submits code
- Vue SDK → Vue callback: uses callback
- Vue callback → Auth flows: submits code
- Next.js SDK → Auth flows: executes embedded flow
- Next.js SDK → User APIs: fetches user data
- Next.js SDK → Session manager: signs session tokens
- Server actions → Next.js SDK: calls client
- Server actions → Session manager: manages sessions
- Session manager → Node client: uses cookie config
- Nuxt SDK → Nuxt auth routes: dispatches auth routes
- Nuxt auth routes → ThunderID service: handles auth requests
- Express middleware → Node client: uses runtime client
- React Router → Browser client: integrates client
- Better Auth helper → ThunderID service: provider integration