\n}\n```\n\n## Framework Examples\n\n### React\n\n```jsx\nimport { AtlanAuth } from '@atlanhq/atlan-auth'\nimport { useEffect, useState } from 'react'\n\nfunction App() {\n const [atlan, setAtlan] = useState(null)\n const [user, setUser] = useState(null)\n\n useEffect(() => {\n const sdk = new AtlanAuth({\n origin: 'https://your-tenant.atlan.com',\n onReady: (context) => {\n setUser(context.user)\n },\n onError: (error) => {\n console.error(error)\n },\n })\n\n sdk.init().then(() => setAtlan(sdk))\n }, [])\n\n if (!user) return Loading...
\n\n return (\n \n
Welcome, {user.username}!
\n \n )\n}\n```\n\n### Vue 3\n\n```vue\n\n \n
Welcome, {{ user.username }}!
\n \n Loading...
\n\n\n\n```\n\n### Plain HTML/JS\n\n```html\n\n\n \n My Atlan App\n \n \n Loading...
\n\n \n \n \n\n```\n\n## How It Works\n\n### Embedded Mode (Production)\n\n```\nβββββββββββββββββββββββββββββββββββββββββββ\nβ Atlan Frontend (localhost:3333) β\nβ β\nβ βββββββββββββββββββββββββββββββββββ β\nβ β Your App (in iframe) β β\nβ β β β\nβ β 1. SDK sends: IFRAME_READY βββββΌββββ€\nβ β β β\nβ β 2. ββββββββββ ATLAN_AUTH_CONTEXT β\nβ β (token, user via postMessage) βββ€\nβ β β β\nβ β 3. β
Instant authentication β β\nβ βββββββββββββββββββββββββββββββββββ β\nβββββββββββββββββββββββββββββββββββββββββββ\n```\n\n### Standalone Mode (Development)\n\n```\nβββββββββββββββββββββββββββββββββββββββββββ\nβ Your App (localhost:8000) β\nβ β\nβ 1. SDK detects standalone mode β\nβ 2. Redirects to Keycloak login βββββββββΌββ\nβββββββββββββββββββββββββββββββββββββββββββ β\n β\nβββββββββββββββββββββββββββββββββββββββββββ β\nβ Atlan Keycloak (localhost:3333/auth) βββ\nβ β\nβ 3. User logs in β\nβ 4. Redirects back with auth code βββββββΌββ\nβββββββββββββββββββββββββββββββββββββββββββ β\n β\nβββββββββββββββββββββββββββββββββββββββββββ β\nβ Your App (localhost:8000) βββ\nβ β\nβ 5. SDK exchanges code for token (PKCE) β\nβ 6. β
Authenticated β\nβββββββββββββββββββββββββββββββββββββββββββ\n```\n\n## Security\n\n- β
**No client secrets in browser**: Uses Keycloak's PKCE flow (Authorization Code Flow with Proof Key for Code Exchange)\n- β
**Secure token storage**: Tokens managed by Keycloak, not stored in localStorage\n- β
**Automatic refresh**: Tokens refresh before expiration\n- β
**Origin validation**: postMessage communication validates origins\n\n## Troubleshooting\n\n### Redirect loop in standalone mode\n\nMake sure your Atlan instance is running and accessible at the `origin` URL.\n\n### \"Not authenticated\" errors\n\n1. Check that `atlan.init()` completed successfully\n2. Verify your Atlan instance URL is correct\n3. Enable debug logging: `debug: true`\n\n### TypeScript errors\n\nIf using npm, ensure `keycloak-js` is installed:\n\n```bash\nnpm install keycloak-js\n```\n\n### CORS errors\n\nCORS errors only occur in standalone mode. Make sure:\n\n1. Your Atlan instance allows your app's origin\n2. You're running your app on the same domain as your Atlan instance (e.g., both on `localhost`)\n\n## License\n\nISC\n\n## Support\n\nFor issues and questions, please open an issue on [GitHub](https://github.com/atlanhq/blaze).\n","readmeFilename":"README.md"}