Authentication for Appwrite_

Sign-in UI your users already know how to use

One script tag. Every Appwrite sign-in method, MFA, sessions and account settings as web components that run on your own domain. No hosted page, no third-party cookies, no backend.

Get started Open playground GitHub

~106 KBgzipped ESM, batteries included

0servers

48OAuth providers

MITlicense

index.html

<link rel="stylesheet" href="https://unpkg.com/@getauthui/core@0.1.45/dist/fouc.css" />
<script src="https://unpkg.com/@getauthui/core@0.1.45/dist/authui.cdn.js"></script>

<authui-config
  endpoint="https://cloud.appwrite.io/v1"
  project="YOUR_PROJECT_ID"
  methods="email-password magic-url oauth:google oauth:github"
></authui-config>

<authui-show when="signed-out">
  <authui-button>Sign in</authui-button>
</authui-show>

<authui-show when="signed-in">
  <authui-user-button></authui-user-button>
</authui-show>

Live component_

This is the real thing_

The panel on the right is <authui-sign-in> rendered by this page, pointed at a placeholder project. Toggle the site theme and it follows. Every screen you see in it, from OAuth to MFA to password reset, ships in the same tag.

✓Native <dialog> modal with focus trap, or inline like this
✓Follows html.dark, data-theme or prefers-color-scheme
✓Every colour and radius is a CSS custom property
✓Every string is replaceable

How it works_

Three steps, five minutes_

Add the script and config

One tag loads Lit, the Appwrite SDK and every component. One element points it at your project.

<authui-config
  endpoint="https://cloud.appwrite.io/v1"
  project="YOUR_PROJECT_ID"
></authui-config>

Drop in the elements

Wrap the sign-in button and user button in authui-show so only one shows at a time. The user button is the avatar and account menu once signed in.

<authui-show when="signed-out">
  <authui-button>Sign in</authui-button>
</authui-show>
<authui-show when="signed-in">
  <authui-user-button></authui-user-button>
</authui-show>

Sign in to your app

Your users pick a method and sign in. The session belongs to your page. With the IIFE CDN script above, AuthUI is on window; with npm, import it.

// CDN IIFE (hero script): AuthUI is already global
AuthUI.on("signed-in", (user) => {
  // user.email, user.name, ...
});

// npm / bundler
import { AuthUI } from "@getauthui/core";

Features_

Everything Appwrite Auth can do, already designed_

Every sign-in method

Email and password, magic URL, email and SMS codes, guest sessions and all 48 Appwrite OAuth providers.

MFA built in

Challenges during sign in, authenticator enrollment with QR code, recovery codes and step-up verification.

Account management

Profile, verification, password change, active sessions, connected identities, security log when exposed, deletion.

Runs on your origin

No hosted page, no third-party cookies, no tokens in URLs. Sessions land where your app already looks.

Themeable

Appwrite Console design system, dark mode that follows your page, CSS variables for every colour, string overrides.

Any framework

Standard web components with React wrappers. Works in Vue, Svelte, Angular, Astro and plain HTML.

Guides_

Real apps, start to finish_

Each guide takes an existing open source app, adds Auth UI, and uses the signed-in user for something concrete. Happy path only, and every one is tested end to end. More are on the way.

Browse all guides

User prefs

Sync Nullboard across devices

A kanban board that lives in localStorage. Add sign in and mirror every board into user preferences.

Read the guide User prefs

Keep your 2048 best score

Thirty lines that upload the record whenever it improves and restore it on any device.

Read the guide Sessions

Sign in to SilverBullet

Put Appwrite accounts in front of a self-hosted SilverBullet notebook.

Read the guide Storage

Back up OpenHabitTracker

A Blazor PWA that keeps habits offline. Add sign in and store backups per user in Appwrite Storage.

Read the guide

Why a component_

Hosted login pages broke when third-party cookies did_

A login page on another domain creates the session on that domain. Safari, Firefox, Brave and Chrome with tracking protection refuse to share it with your app. The old fixes, hidden iframes and silent redirects, are now classified as bounce tracking and purged.

Auth UI runs in your page instead. Its requests to Appwrite are indistinguishable from your own, so whatever session mechanism your project uses, cookies on a custom domain or the SDK fallback on Cloud, simply works.

Approach	Safari	Static apps	Backend
Hosted page, shared cookie	-	✓	none
Hosted page, JWT renewal	~	✓	none
Hosted page, code exchange	✓	-	required
Auth UI component	✓	✓	none

Built for agents_

HTML your coding agent writes correctly the first time_

Declarative tags, one global config, and conditional wrappers instead of state plumbing. The full documentation is available as a single Markdown file at /llms-full.txt.

Copy and paste into your AI assistant

prompt.txt

Add authentication with Auth UI (@getauthui/core) for Appwrite.
Docs: https://getauthui.appwrite.network/llms-full.txt

1. Put <link rel="stylesheet" href="https://unpkg.com/@getauthui/core@0.1.45/dist/fouc.css" /> in <head>, then <script type="module" src="https://unpkg.com/@getauthui/core@0.1.45"></script>
2. <authui-config endpoint="..." project="..." methods="email-password oauth:google">
3. <authui-button> inside <authui-show when="signed-out">, <authui-user-button> inside <authui-show when="signed-in">
4. Do not build custom login forms or store sessions yourself.

Ship login today_

Free, open source, and built on the official Appwrite SDK. Add the script tag and you are done.

Read the docs Star on GitHub