Your first sign-in

The fastest way to see Atlas working is to render a real sign-in box. There are two ways: a drop-in embeddable widget (no build step), or the JavaScript SDK for full control.

Option A — the embeddable widget

The widget is a custom element that renders a complete, themeable sign-in flow — password, email codes, passkeys, and every social provider you've enabled. Add the script and one tag:

<script src="https://atlasauth.net/embed.js"></script>

<atlas-sign-in
  data-atlas-key="pk_live_your_key"
  data-atlas-fapi="https://accounts.yourapp.com">
</atlas-sign-in>

It handles the whole flow and sets a session on your domain. Use <atlas-sign-up> for a registration screen.

Option B — drive it with the SDK

For full control, the JavaScript SDK talks to the same endpoints the widget uses. It exposes a small client plus a flow helper that advances an attempt one step at a time — identifier, then factor, then complete — whatever the strategy (password, email code, passkey, OAuth):

npm install @atlas/js

import { FapiClient, advance, initialFlow } from '@atlas/js';

const client = new FapiClient({ publishableKey: 'pk_live_your_key' });

let flow = initialFlow;
flow = await advance(client, flow, { identifier: 'ada@example.com' });
flow = await advance(client, flow, { strategy: 'password', password });
// when flow.attempt.status === 'complete', exchange its ticket for a session

The session lives in an HttpOnly cookie the browser sends automatically; the short-lived JWT is held only in memory for the life of the tab. Nothing is written to localStorage.

Using React or Next.js?

Skip the manual flow — @atlas/react and @atlas/nextjs wrap all of this with prebuilt components (<SignIn />, <UserButton />) and hooks (useUser, useAuth). See Protect a route with React & Next.js.