Configuration

Every option Auth UI accepts, as JavaScript or as attributes on <authui-config>.

Call AuthUI.init(config) or place an <authui-config> element. Both write to the same global store, and calling either again replaces the configuration.

Options

Option	Attribute	Type	Default	Description
`endpoint`	`endpoint`	`string`	required	Appwrite API endpoint, e.g. `https://cloud.appwrite.io/v1`.
`project`	`project`	`string`	required	Appwrite project ID.
`redirectUrl`	`redirect-url`	`string`	current page	Absolute URL that email links and OAuth return to. Must be on a registered platform.
`successUrl`	`success-url`	`string`	none	Navigate here after a successful sign in. Without it the page stays put and the modal closes.
`methods`	`methods`	object / list	email-password	Which sign-in methods to show. See below.
`signUp`	`sign-up`	`boolean`	`true`	Show the sign-up link and screen.
`signUpUrl`	`sign-up-url`	`string`	none	When `signUp` is false, keep "Don't have an account?" linking to this external URL.
`forgotPassword`	`forgot-password`	`boolean`	`true`	Show the Forgot password link on sign-in.
`oauthPosition`	`oauth-position`	`top` / `bottom`	`top`	Place OAuth buttons above or below the credential form.
`requireName`	`require-name`	`boolean`	`true`	Ask for a display name during sign up.
`mfa`	`mfa`	`boolean`	`true`	Let users enroll and manage MFA from the account screen.
`securityPhrase`	`security-phrase`	`boolean`	`true`	Request a security phrase for magic URL and email OTP and show it in the UI.
`oauthScopes`	none	object	none	Extra scopes per provider, e.g. `{ google: ["profile"] }`.
`branding.name`	`name`	`string`	none	Product name used in headings.
`branding.logo`	`logo`	`string`	none	Logo URL rendered above the form.
`branding.theme`	`theme`	`light` / `dark` / `auto`	`auto`	Colour scheme. `auto` follows an `html.dark` class, then `prefers-color-scheme`.
`branding.radius`	`radius`	`none` / `sm` / `md` / `lg` / `xl` / `full`	`md`	Corner radius scale.
`branding.primary`	`primary`	CSS colour	zinc	Primary button colour.
`branding.primaryForeground`	`primary-foreground`	CSS colour	white	Text colour on primary buttons.
`legal.termsUrl`	`terms-url`	`string`	none	Adds a Terms of Service link under the form.
`legal.privacyUrl`	`privacy-url`	`string`	none	Adds a Privacy Policy link under the form.
`legal.requireAcceptance`	`require-acceptance`	`boolean`	`false`	On sign-up, require a checkbox accepting terms/privacy before submit or OAuth.
`legal.helpUrl`	`help-url`	`string`	none	Help / support URL in the legal footer and blocked-user "Contact support" link.
`methods.oauthLayout`	`oauth-layout`	`stack` / `accordion` / `icon` / `horizontal`	auto	OAuth button layout. Default: stack for 1–2 providers, accordion for 3+. `icon` / `horizontal` = icon row.
`strings`	none	object	English	Override any UI string. Applied after the locale pack. See Theming.
`locale`	`locale`	`en` / `cs` / `de` / `fr`	`en`	Built-in locale pack. Unknown tags fall back to English. See Theming.
`oneTap`	`one-tap`	`boolean`	`false`	Auto-prompt Google One Tap on signed-out sign-in/sign-up. Requires `googleClientId`. Soft-fails if GIS is blocked.
`googleClientId`	`google-client-id`	`string`	none	Google OAuth Web client ID for One Tap (from Google Cloud). Appwrite does not expose provider client IDs.
`identifierFirst`	`identifier-first`	`boolean`	`false`	Sign-in shows email then Continue, then password. OAuth stays on step 1. Sign-up keeps email+password together.
`preview`	`preview`	`boolean`	`false`	Preview mode: no requests, any credentials accepted, sample data. See Preview mode.

Methods

In JavaScript, methods is an object:

methods: {
  emailPassword: true,
  magicUrl: true,
  emailOtp: false,
  phone: false,
  anonymous: true,
  oauth: ["google", "github", "apple"],
  oauthLayout: "icon", // or "stack" | "accordion" | "horizontal"
}

As an attribute it is a space separated list. OAuth providers are prefixed with oauth::

<authui-config
  methods="email-password magic-url anonymous oauth:google oauth:github"
></authui-config>

Valid tokens: email-password, magic-url, email-otp, phone, anonymous (alias guest), and oauth:<provider> for any provider slug Appwrite accepts, for example google, github, apple, microsoft, discord, facebook, x, linkedin, slack, gitlab, bitbucket, twitch, spotify, notion, dropbox, figma, oidc, okta, auth0.

Every method you enable here must also be enabled in the Appwrite Console. If it is not, Appwrite responds with user_auth_method_unsupported and Auth UI shows "This sign-in method is disabled for this project."

Full example

AuthUI.init({
  endpoint: "https://cloud.appwrite.io/v1",
  project: "acme",
  redirectUrl: "https://acme.com/auth",
  successUrl: "/dashboard",
  methods: { emailPassword: true, emailOtp: true, anonymous: true, oauth: ["google", "github"] },
  signUp: true,
  branding: { name: "Acme", logo: "/logo.svg", theme: "auto", radius: "lg", primary: "#fd366e" },
  legal: { termsUrl: "/terms", privacyUrl: "/privacy", requireAcceptance: true },
  locale: "de",
  oneTap: true,
  googleClientId: "YOUR_GOOGLE_WEB_CLIENT_ID.apps.googleusercontent.com",
  identifierFirst: true,
  strings: { signIn: "Log in", continueAsGuest: "Try without an account" },
});

Options

Methods

Full example

On this page