Frontend SDKs

All frontend SDKs authenticate with a publishable key and manage the session for you. Mount the provider once, then use the framework-idiomatic hooks/components.

@atlas/js (framework-agnostic core)

The core the other web SDKs build on — use it directly for vanilla JS or an unsupported framework. Ships a framework-agnostic has(claims, condition).

npm install @atlas/js

import { Atlas } from '@atlas/js';

const atlas = new Atlas({ publishableKey: 'pk_live_…' });
await atlas.load();

if (atlas.session) {
  const token = await atlas.session.getToken();
}

@atlas/react

npm install @atlas/react

import { AtlasProvider, SignedIn, SignedOut, SignInButton, UserButton, useAuth } from '@atlas/react';

function Root() {
  return (
    <AtlasProvider publishableKey="pk_live_…">
      <SignedOut><SignInButton /></SignedOut>
      <SignedIn><UserButton /></SignedIn>
    </AtlasProvider>
  );
}

// Call your API with a session token
function useApi() {
  const { getToken } = useAuth();
  return async () => fetch('/api/x', { headers: { Authorization: `Bearer ${await getToken()}` } });
}

Gate UI with <Protect> / useAuth().has() — a rendering aid, never a security boundary (keep the server check).

@atlas/nextjs

App Router provider + middleware + a server-side auth() helper exposing has() / protect():

npm install @atlas/nextjs

// app/layout.tsx
import { AtlasProvider } from '@atlas/nextjs';
export default function Layout({ children }) {
  return <AtlasProvider>{children}</AtlasProvider>;
}

// app/api/things/route.ts
import { auth } from '@/atlas'; // your createAuthHelper() instance
export async function POST(request: Request) {
  const a = await auth(request);
  a.protect({ permission: 'org:billing:manage' }); // 403 if not held
  // …privileged work
}

@atlas/vue

Official Vue 3 SDK — plugin + Composition API composables + host-DOM components.

npm install @atlas/vue

import { createApp } from 'vue';
import { createAtlas } from '@atlas/vue';
import App from './App.vue';

createApp(App)
  .use(createAtlas({ publishableKey: 'pk_live_…' }))
  .mount('#app');

@atlas/nuxt

Nuxt 3 module — the client half is @atlas/vue; the Nitro server half verifies the __session JWT locally via @atlas/backend.

pnpm add @atlas/nuxt

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@atlas/nuxt'],
  atlas: {
    publishableKey: 'pk_test_...',
    frontendApi: 'https://your-instance.fapi.atlasauth.net',
  },
  runtimeConfig: {
    atlas: { jwksUrl: '', issuer: '' },        // server-only
    public: { atlas: { publishableKey: '', frontendApi: '' } },
  },
});

@atlas/angular

Standalone APIs, RxJS + Signals, directives, route guards. Angular 17+.

pnpm add @atlas/angular

import { bootstrapApplication } from '@angular/platform-browser';
import { provideAtlas } from '@atlas/angular';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [provideAtlas({ publishableKey: 'pk_test_…' })],
});

@atlas/svelte

Svelte / SvelteKit — client via context, stores, .svelte components; optional SvelteKit server helper.

pnpm add @atlas/svelte

<!-- src/routes/+layout.svelte -->
<script lang="ts">
  import { AtlasProvider } from '@atlas/svelte';
</script>

<AtlasProvider publishableKey="pk_live_…" frontendApi="https://<instance>.atlas.dev">
  <slot />
</AtlasProvider>

@atlas/react-native

Native peer of @atlas/react; the session token lives in a TokenStorage adapter and is sent as a bearer header (no cookie jar). See Mobile SDKs for the fully native options.

npm install @atlas/react-native

import { AtlasProvider } from '@atlas/react-native';
import { secureStorage } from './storage';

export default function App() {
  return (
    <AtlasProvider
      publishableKey="pk_live_…"
      frontendApi="https://fapi.your-instance.com"
      storage={secureStorage}
    >
      <RootNavigator />
    </AtlasProvider>
  );
}