Getting started

1. Register your domain in Appwrite

Auth UI talks to Appwrite from your own page, so your app's hostname must be a registered Web platform in the Appwrite Console. Open your project, go to Overview → Integrations → Platforms, and add a Web platform with your hostname, for example myapp.com or localhost.

Then enable the sign-in methods you plan to use under Auth → Settings. Email/password, magic URL, email OTP, phone, anonymous and each OAuth provider are individual toggles.

2. Install

<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>

3. Configure

Either declaratively with an element:

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

Or imperatively from JavaScript:

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

AuthUI.init({
  endpoint: "https://cloud.appwrite.io/v1",
  project: "YOUR_PROJECT_ID",
  methods: { emailPassword: true, magicUrl: true, oauth: ["google", "github"] },
  branding: { name: "Acme" },
});

Configuration is global. Every Auth UI element on the page reads from the same store.

4. Add a trigger and the modal

<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>

Wrap each control in <authui-show> so only one appears at a time. Without it, <authui-button> and <authui-user-button> both render "Sign in" while signed out. <authui-button> opens the modal. <authui-user-button> shows the avatar and account menu once signed in. The modal element is created automatically the first time it is needed, or you can place <authui-modal> yourself.

Prefill email

Pass email or login-hint on <authui-sign-in>, or open the page with ?login_hint=user@example.com. The field is filled once and stays editable.

5. React to sign in

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

AuthUI.on("signed-in", (user) => {
  console.log("Hello", user.name);
});

Pick the matching path:

• IIFE CDN (the <script src=".../authui.cdn.js"> tab above): AuthUI is already on window, so omit the import and call AuthUI.on(...) from a classic script.
• ESM CDN (<script type="module" src="https://unpkg.com/@getauthui/core@…">): there is no window.AuthUI. Prefer <authui-config> for setup, or import { AuthUI } from "@getauthui/core" with a bundler.
• npm: keep the import as shown.

Or let Auth UI navigate for you by passing successUrl in the configuration.

6. Use the session in your app

Auth UI uses the Appwrite Web SDK under the hood and the session belongs to your origin, so your own Client instance sees it immediately:

import { Client, Databases } from "appwrite";

const client = new Client()
  .setEndpoint("https://cloud.appwrite.io/v1")
  .setProject("YOUR_PROJECT_ID");
const databases = new Databases(client);
// Signed-in requests work here. Or reuse Auth UI's client: AuthUI.getClient()

That is the whole integration. Continue with Configuration or read How it works to understand redirects and cookies.