Skip to main content

Develop your app

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.

  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:

<!DOCTYPE html>
<html>
<head>
  <title>My Atlan profile</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 480px; margin: 2rem auto; padding: 0 1rem; }
    .card { background: #f5f5f5; border-radius: 8px; padding: 1rem; margin-top: 1rem; }
    .card h3 { margin: 0 0 0.5rem 0; font-size: 1rem; color: #555; }
    .card p { margin: 0; font-size: 1.125rem; }
  </style>
</head>
<body>
  <div id="app">Signing in to Atlan…</div>
  <script src="https://unpkg.com/@atlanhq/atlan-auth@latest/dist/atlan-auth.umd.min.js"></script>
  <script>
    const { AtlanAuth } = window.AtlanAuthSDK

    async function main() {
      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')

      document.getElementById('app').innerHTML = `
        <h1>Hello, ${user.username}</h1>
        <div class="card">
          <h3>Profile</h3>
          <p><strong>Username:</strong> ${whoami.username || user.username}</p>
          <p><strong>Email:</strong> ${whoami.email || '—'}</p>
          <p><strong>Full name:</strong> ${whoami.fullName || whoami.username || '—'}</p>
        </div>
      `
    }

    main().catch(err => {
      document.getElementById('app').textContent = 'Sign-in failed: ' + (err.message || err)
    })
  </script>
</body>
</html>

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:

Next steps​