Add sign-in to your app

There are three ways to add Atlas sign-in, from zero-code to fully custom. Pick the one that matches how much control you need. All three use the same underlying flow and produce the same session.

Option A — Hosted pages (fastest)

Atlas hosts a complete, branded sign-in and sign-up experience for you. You send users to it, and Atlas sends them back signed in.

1. In the dashboard, open Customization → Hosted pages and confirm your sign-in page is enabled.

2. Point your app's "Sign in" button at your instance's hosted sign-in URL (shown in the dashboard), with a redirect_url back to your app.

3. That's it — no auth UI to build. Atlas handles every method you've enabled.

Hosted pages are the best choice if you want to be live today and don't need the sign-in box embedded inside your own layout.

Option B — Embeddable widget (drop-in)

Render a complete sign-in box inside your own page with one 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>

Use <atlas-sign-up> for a registration screen. The widget renders every method you've enabled — passwords, email codes, passkeys and every social provider — and sets a session on your domain when the user completes the flow. It's fully themeable.

Option C — SDK (full control)

For a bespoke UI, the SDKs talk to the same endpoints the widget uses. React and Next.js packages wrap everything in hooks and components:

import { AtlasProvider, SignIn, useUser } from '@atlas/react';

function App() {
  const { user, isLoaded } = useUser();
  if (!isLoaded) return <Spinner />;
  if (!user)     return <SignIn />;
  return <Dashboard user={user} />;
}

// One key, and you're live.
<AtlasProvider publishableKey="pk_live_…">
  <App />
</AtlasProvider>

For non-React apps, the vanilla @atlas/js client exposes a small flow helper that advances an attempt one step at a time (identifier → factor → complete). Deep SDK and REST reference lives in the separate API reference — this guide stays focused on the product.

Verify the user on your backend

However users sign in, they end up carrying a session — a standard JWT. Your backend can:

• Verify it statelessly against your instance's public JWKS at /.well-known/jwks.json, or

• Check it with the Backend API using your secret key.

See Sessions & JWTs for how sessions work end to end.

Turn on more sign-in methods

Out of the box you'll typically start with email + password or email codes. When you're ready, turn on social logins, passkeys and more from Sign-in methods — see the Sign-in methods overview.

Next

Understand what's happening under the hood → How Atlas works.