Vue, Svelte, Angular and plain HTML
Web components work everywhere. Import once, then use the tags.
Auth UI ships standard custom elements, so every framework can render them. Import the package once at startup and use the tags in templates. Listen to authui-success, authui-view and the authui:* window events like any DOM event.
Plain HTML
<link rel="stylesheet" href="https://unpkg.com/@getauthui/core@0.1.45/dist/fouc.css" />
<script type="module" src="https://unpkg.com/@getauthui/core@0.1.45"></script>
<authui-config endpoint="https://cloud.appwrite.io/v1" project="YOUR_PROJECT_ID"></authui-config>
<authui-button>Sign in</authui-button>The default unpkg / jsDelivr ESM entry (type="module" on the bare package URL, or …/dist/authui.cdn.mjs) registers the custom elements only. It does not set window.AuthUI. For classic scripts that call AuthUI.init / AuthUI.on / AuthUI.open, load the IIFE build instead:
<script src="https://unpkg.com/@getauthui/core@0.1.45/dist/authui.cdn.js"></script>Do not load …/dist/authui.js from a CDN (that path is the bundler entry). See Common mistakes.
In Vue, Svelte, Angular and other bundlers, use import { AuthUI } from "@getauthui/core" as shown below.
Vue
// main.ts
import "@getauthui/core";<template>
<authui-show when="signed-out"><authui-button>Sign in</authui-button></authui-show>
<authui-sign-in @authui-success="onSuccess"></authui-sign-in>
</template>
<script setup lang="ts">
import { AuthUI } from "@getauthui/core";
AuthUI.init({ endpoint: "...", project: "..." });
const onSuccess = () => router.push("/dashboard");
</script>Tell Vue the tags are custom elements in vite.config.ts:
vue({ template: { compilerOptions: { isCustomElement: (tag) => tag.startsWith("authui-") } } });Svelte
<script lang="ts">
import "@getauthui/core";
import { AuthUI } from "@getauthui/core";
AuthUI.init({ endpoint: "...", project: "..." });
</script>
<authui-user-button></authui-user-button>
<authui-sign-in on:authui-success={() => goto("/dashboard")}></authui-sign-in>Svelte renders unknown tags as custom elements out of the box. Use onMount in SvelteKit so the import only runs in the browser.
Angular
Add CUSTOM_ELEMENTS_SCHEMA to your module or standalone component and import the package in main.ts.
import "@getauthui/core";<authui-button (click)="noop()">Sign in</authui-button>
<authui-sign-in (authui-success)="onSuccess($event)"></authui-sign-in>Reading state outside components
import { AuthUI } from "@getauthui/core";
const stop = AuthUI.on("change", (state) => console.log(state.status, state.user));
stop(); // unsubscribe