|
| 1 | +# Okta OAuth2 Client SDKs - Monorepo |
| 2 | + |
| 3 | +> **Status**: Beta |
| 4 | +> **Documentation**: https://okta-client-js.netlify.app/ |
| 5 | +
|
| 6 | +This is a monorepo containing a collection of OAuth2 client libraries for JavaScript/TypeScript, designed to simplify OAuth2 integration in JavaScript applications. |
| 7 | + |
| 8 | +## 📦 Package Architecture |
| 9 | + |
| 10 | +This monorepo contains three interconnected packages: |
| 11 | + |
| 12 | +### Foundation Layer |
| 13 | +- **[@okta/auth-foundation](./packages/auth-foundation/claude.md)** - Core library providing foundational OAuth2 primitives, token handling, HTTP clients, and platform abstractions. All other packages depend on this. |
| 14 | + |
| 15 | +### Token Acquisition Layer |
| 16 | +- **[@okta/oauth2-flows](./packages/oauth2-flows/claude.md)** - Implements environment-agnostic OAuth2 authentication flows (Authorization Code, Logout). |
| 17 | + |
| 18 | +### Platform/Management Layer |
| 19 | +- **[@okta/spa-platform](./packages/spa-platform/claude.md)** - High-level utilities for managing token lifecycles, storage, browser tab synchronization, and making authenticated requests in browser/SPA environments. |
| 20 | + |
| 21 | +### Dependency Graph |
| 22 | +``` |
| 23 | +@okta/spa-platform |
| 24 | + ├─→ @okta/oauth2-flows (optional peer dependency) |
| 25 | + └─→ @okta/auth-foundation |
| 26 | +
|
| 27 | +@okta/oauth2-flows |
| 28 | + └─→ @okta/auth-foundation |
| 29 | +
|
| 30 | +@okta/auth-foundation |
| 31 | + (no dependencies) |
| 32 | +``` |
| 33 | + |
| 34 | +## 🏗️ Monorepo Structure |
| 35 | + |
| 36 | +``` |
| 37 | +okta-client-javascript/ |
| 38 | +├── packages/ |
| 39 | +│ ├── auth-foundation/ # Core foundation library |
| 40 | +│ ├── oauth2-flows/ # OAuth2 flow implementations |
| 41 | +│ └── spa-platform/ # SPA platform utilities |
| 42 | +├── tooling/ # Shared build/config packages |
| 43 | +│ ├── eslint-config/ |
| 44 | +│ ├── jest-helpers/ |
| 45 | +│ ├── rollup-config/ |
| 46 | +│ └── typescript-config/ |
| 47 | +├── e2e/ # End-to-end test applications |
| 48 | +│ └── apps/ |
| 49 | +│ ├── redirect-model/ |
| 50 | +│ └── token-broker/ |
| 51 | +├── docs/ # Documentation |
| 52 | +└── scripts/ # Build and automation scripts |
| 53 | +``` |
| 54 | + |
| 55 | +## 🛠️ Technology Stack |
| 56 | + |
| 57 | +- **Language**: TypeScript 5.9+ |
| 58 | +- **Module System**: ESM (ES Modules) |
| 59 | +- **Package Manager**: Yarn (workspaces) |
| 60 | +- **Build Orchestrator**: Turborepo |
| 61 | +- **Build Tool**: Rollup (via shared config) |
| 62 | +- **Type Generation**: TypeScript compiler |
| 63 | +- **Testing**: Jest (with browser/node-specific configs) |
| 64 | +- **Linting**: ESLint (via shared config) |
| 65 | + |
| 66 | +## 🚀 Getting Started (Development) |
| 67 | + |
| 68 | +### Prerequisites |
| 69 | +- Node.js >= 20.11.0 (recommended: >= 22.13.1) |
| 70 | +- Yarn >= 1.19.0 |
| 71 | + |
| 72 | +### Initial Setup |
| 73 | +```bash |
| 74 | +# Check Node version |
| 75 | +node --version # should be >=20 |
| 76 | + |
| 77 | +# Install all dependencies |
| 78 | +yarn |
| 79 | + |
| 80 | +# Build all packages |
| 81 | +yarn build |
| 82 | +``` |
| 83 | + |
| 84 | +### Development Workflow |
| 85 | + |
| 86 | +```bash |
| 87 | +# Build all packages in watch mode |
| 88 | +yarn build:watch |
| 89 | + |
| 90 | +# Run tests across all packages |
| 91 | +yarn test |
| 92 | + |
| 93 | +# Lint all packages |
| 94 | +yarn lint |
| 95 | + |
| 96 | +# Work on a specific package |
| 97 | +cd packages/auth-foundation |
| 98 | +yarn test:watch |
| 99 | +``` |
| 100 | + |
| 101 | +### Package Build Process |
| 102 | + |
| 103 | +Each package follows the same build pattern: |
| 104 | +1. **ESM Bundle**: Rollup bundles TypeScript → ESM JavaScript |
| 105 | +2. **Type Definitions**: TypeScript compiler generates `.d.ts` files |
| 106 | +3. **Output**: `dist/esm/` (JavaScript) + `dist/types/` (TypeScript definitions) |
| 107 | + |
| 108 | +## 📝 Shared Tooling Packages |
| 109 | + |
| 110 | +All packages use shared configurations from the `tooling/` directory: |
| 111 | + |
| 112 | +- `@repo/typescript-config` - Shared TypeScript configurations |
| 113 | +- `@repo/rollup-config` - Shared Rollup build config |
| 114 | +- `@repo/eslint-config` - Shared ESLint rules |
| 115 | +- `@repo/jest-helpers` - Jest test utilities and mocks |
| 116 | + |
| 117 | +These are internal workspace packages (not published) that ensure consistency across the monorepo. |
| 118 | + |
| 119 | +## 🧪 Testing Strategy |
| 120 | + |
| 121 | +### Test Environments |
| 122 | +Each package supports multiple test environments: |
| 123 | +- **Browser tests**: `jest.browser.config.js` - Simulates browser environment |
| 124 | +- **Node tests**: `jest.node.config.js` - Runs in Node.js environment |
| 125 | +- **Default**: `jest.config.js` - Runs all tests |
| 126 | + |
| 127 | +### Running Tests |
| 128 | +```bash |
| 129 | +# From root - all packages |
| 130 | +yarn test |
| 131 | + |
| 132 | +# Specific package, specific environment |
| 133 | +cd packages/auth-foundation |
| 134 | +yarn test:browser # Browser environment tests |
| 135 | +yarn test:node # Node.js environment tests |
| 136 | +yarn test:watch # Watch mode |
| 137 | +``` |
| 138 | + |
| 139 | +## 📚 Working with the Codebase |
| 140 | + |
| 141 | +### Adding Dependencies |
| 142 | + |
| 143 | +```bash |
| 144 | +# Add to a specific package |
| 145 | +yarn workspace @okta/auth-foundation add <dependency> |
| 146 | + |
| 147 | +# Add dev dependency |
| 148 | +yarn workspace @okta/auth-foundation add -D <dependency> |
| 149 | + |
| 150 | +# Add to root |
| 151 | +yarn add -W <dependency> |
| 152 | +``` |
| 153 | + |
| 154 | +### Creating a New Package |
| 155 | + |
| 156 | +1. Create package directory: `packages/my-package/` |
| 157 | +2. Add `package.json` with workspace references to shared configs |
| 158 | +3. Set up `src/`, `test/`, `tsconfig.json`, `rollup.config.mjs` |
| 159 | +4. Update root-level documentation |
| 160 | + |
| 161 | +### Common Patterns |
| 162 | + |
| 163 | +**Package Exports Structure**: |
| 164 | +```json |
| 165 | +{ |
| 166 | + "exports": { |
| 167 | + ".": { |
| 168 | + "types": "./dist/types/index.d.ts", |
| 169 | + "import": "./dist/esm/index.js" |
| 170 | + }, |
| 171 | + "./submodule": { |
| 172 | + "types": "./dist/types/submodule.d.ts", |
| 173 | + "import": "./dist/esm/submodule.js" |
| 174 | + } |
| 175 | + } |
| 176 | +} |
| 177 | +``` |
| 178 | + |
| 179 | +**Internal vs Public APIs**: |
| 180 | +- Some packages export `/internal` paths for use by other packages |
| 181 | +- These should NOT be used by external consumers |
| 182 | + |
| 183 | +## 🔐 Security & OAuth2 Concepts |
| 184 | + |
| 185 | +### DPoP Support |
| 186 | +The SDKs support **DPoP (Demonstrating Proof-of-Possession)** for enhanced security in OAuth2 flows. See package-specific documentation for implementation details. |
| 187 | +Reference: https://datatracker.ietf.org/doc/html/rfc9449 |
| 188 | + |
| 189 | +### Token Types |
| 190 | +- **Access Token**: Used for API authorization |
| 191 | +- **ID Token**: Contains user identity information (JWT) |
| 192 | +- **Refresh Token**: Used to obtain new access tokens |
| 193 | + |
| 194 | +## 🎯 Sample Applications |
| 195 | + |
| 196 | +Sample applications are located in `e2e/apps/`: |
| 197 | + |
| 198 | +### Redirect Model (`e2e/apps/redirect-model`) |
| 199 | +Demonstrates Authorization Code Flow using the redirect model. |
| 200 | + |
| 201 | +### Token Broker (`e2e/apps/token-broker`) |
| 202 | +Demonstrates obtaining an "all-scoped" token and using it to request downscoped access tokens. |
| 203 | + |
| 204 | +### Running Samples |
| 205 | +See [e2e/apps/README.md](./e2e/apps/README.md) for setup instructions, including: |
| 206 | +- Configuring Okta applications |
| 207 | +- Setting up `testenv` file with credentials |
| 208 | +- Running the development server |
| 209 | + |
| 210 | +## 📖 External Resources |
| 211 | + |
| 212 | +- **API Documentation**: https://okta-client-js.netlify.app/ |
| 213 | +- **Repository**: https://github.com/okta/okta-client-javascript |
| 214 | +- **Issues**: https://github.com/okta/okta-client-javascript/issues |
| 215 | + |
| 216 | +## 💡 Working with Claude |
| 217 | + |
| 218 | +When working on this codebase with Claude: |
| 219 | + |
| 220 | +1. **For cross-package changes**: Reference this root `claude.md` for architecture and shared patterns |
| 221 | +2. **For package-specific work**: Reference the individual package's `claude.md` file |
| 222 | +3. **For OAuth2 flows**: Start with `@okta/oauth2-flows` |
| 223 | +4. **For token management**: Look at `@okta/spa-platform` |
| 224 | +5. **For core abstractions**: Dive into `@okta/auth-foundation` |
| 225 | + |
| 226 | +### Key Files to Reference |
| 227 | +- `turbo.json` - Turborepo task pipeline configuration |
| 228 | +- `package.json` (root) - Workspace configuration |
| 229 | +- Individual `package.json` files - Package-specific configs and dependencies |
| 230 | + |
| 231 | +--- |
| 232 | + |
| 233 | +**Version**: 0.6.0 (all packages currently in sync) |
| 234 | +**License**: Apache-2.0 |
| 235 | +**Maintainer**: jared.perreault@okta.com |
0 commit comments