<authui-config>

<authui-config
  endpoint="https://cloud.appwrite.io/v1"
  project="YOUR_PROJECT_ID"
  methods="email-password magic-url oauth:google"
  name="Acme"
  logo="/logo.svg"
  theme="auto"
  radius="lg"
  primary="#fd366e"
  success-url="/dashboard"
  terms-url="/terms"
  privacy-url="/privacy"
  help-url="/support"
  require-acceptance="true"
  oauth-layout="icon"
  oauth-position="top"
  forgot-password="true"
  locale="fr"
  one-tap="true"
  google-client-id="YOUR_GOOGLE_WEB_CLIENT_ID.apps.googleusercontent.com"
  identifier-first="true"
></authui-config>

The element renders nothing. Changing any attribute reconfigures the store. All attributes are documented in Configuration; the JavaScript strings and oauthScopes options have no attribute equivalent, use AuthUI.init() for those.

AuthUI.init() and <authui-config> can be mixed: the last one to run wins.

Misconfiguration

Auth UI checks the connection on startup:

• Endpoint must end with /v1. Without it Appwrite returns an HTML 404 page. Auth UI warns in the console and shows a developer-facing banner instead of a working-looking form.
• Wrong project ID or unregistered hostname. The first account.get() returns project_not_found or general_unknown_origin. On some origins Appwrite omits CORS for bad projects, so the browser surfaces Failed to fetch; Auth UI still maps that bootstrap failure to the project / platform config banner (not "Check your connection"). The same banner appears on <authui-sign-in>, <authui-button>, and the signed-out state of <authui-user-button>.
• Missing endpoint or project on <authui-config>. The element no longer leaves the UI stuck on a loading spinner. It reports the gap and the banner above shows how to finish the setup.

See also Common mistakes for endpoint, platform, CDN and FOUC pitfalls.