## Develop your app
URL: https://docs.atlan.com/product/capabilities/build-apps/sdks/application-sdk/how-tos/develop-locally
> Run your app on localhost and authenticate to your tenant to test API calls before embedding.
You can develop your app locally before deploying it. You can test authentication and API calls to your tenant without running inside the product iframe or registering the app.
This page guides you through adding the Atlan Auth SDK, signing in to your tenant, and making an API call. No app registration or tenant configuration is required.
💡
Skip local development? If you prefer to embed your app in the product without developing on localhost first, see Embed your app .
## Prerequisites
Before you begin, make sure you have:
- An Atlan tenant URL (for example, `https://your-tenant.atlan.com`)
- A local dev server (any static server works)
- A browser session that can reach your Atlan tenant
## Set up authentication
The Atlan Auth SDK runs in the browser and must be initialized in the code that loads when your app starts.
1. Open your app's client-side entry point file.
- For a static app, this is often `index.html`.
- For a JavaScript app, this is often `main.ts`, `main.js`, or `App.tsx`.
2. Add the Atlan Auth SDK and initialize it with your Atlan tenant origin. Replace `https://your-tenant.atlan.com` with your tenant URL.
### CDN
1. In your HTML entry point (for example, `index.html`), add the SDK script tag.
2. Initialize the SDK with your Atlan tenant origin and add your app logic.
**Example:** If you want to develop an app that shows your username and profile details after sign-in, you can use the following complete HTML:
```html
My Atlan profile
Signing in to Atlan…
```
### npm
1. Install dependencies:
```bash
npm install @atlanhq/atlan-auth keycloak-js
```
2. In your client-side entry point, add the SDK and initialize it with your Atlan tenant origin.
**Example:** If you want to develop an app that shows your profile after sign-in, you can use the following code:
```ts
const atlan = new AtlanAuth({
origin: 'https://your-tenant.atlan.com',
})
await atlan.init()
const user = atlan.getUser()
const whoami = await atlan.api.get('/api/service/whoami')
// Render a simple profile view (adjust for your framework)
document.getElementById('app').innerHTML = `
# Hello, ${user.username}
### Profile
Username: ${whoami.username ?? user.username}
Email: ${whoami.email ?? '—'}
Full name: ${whoami.fullName ?? whoami.username ?? '—'}
`
```
If you prefer a framework-specific setup (React, Vue, or another client framework), use the same pattern: initialize the SDK, call `atlan.init()`, then use `atlan.getUser()` and `atlan.api.get()` to build your UI.
## Test app
1. Start your local dev server and open your app in the browser (or open the HTML file directly if you used the CDN example).
2. If you don't have an active session, the browser redirects you to Atlan login and then redirects back to your app.
3. The page shows the profile app: a greeting with your username and a card showing your profile details (username, email, full name) from Atlan.
## Need help
If you run into authentication issues, see the troubleshooting guide:
- [Connection and authentication issues](https://docs.atlan.com/product/capabilities/build-apps/troubleshooting/connection-and-authentication-issues): Fix common embed and auth errors
## Next steps
- [Embed your app](https://docs.atlan.com/llms/platform/build-apps/embed-in-atlan/llms.txt): Deploy and embed your app
---