<authui-sign-in>
The full sign-in experience as an inline panel.
<authui-sign-in></authui-sign-in> <authui-sign-in view="sign-up"></authui-sign-in>Use it on a dedicated login page or anywhere you would rather not use a modal. It renders the same screens the modal does: OAuth buttons, email and password, sign up, forgot and reset password, magic URL, email OTP, phone, guest, and the MFA challenge. While a user is signed in it shows who is signed in with Continue, Manage account and Sign out actions.
Attributes and properties
| Name | Type | Default | Description |
|---|---|---|---|
view | "sign-in" / "sign-up" / "forgot-password" / "reset-password" / "magic-url" / "email-otp" / "phone" / "mfa" | "sign-in" | Initial screen. |
embedded | boolean | false | Removes the card border, shadow and padding. The modal sets this. |
email | string | Prefills the email field. Not overwritten after the user types. | |
login-hint | string | Alternate email prefill (WorkOS-style). Applied when email is empty. Also reads ?login_hint= / ?email= once on connect. |
Methods
go(view)switches screens.
Events
| Event | Detail | When |
|---|---|---|
authui-success | { method } | A sign-in flow completed. method is one of email-password, sign-up, anonymous, oauth, magic-url, email-otp, phone, mfa. |
authui-view | { view } | The visible screen changed. |
authui-open | { view: "account" } | The signed-in panel asked to open account management. |
All events bubble and are composed, so they can be caught on ancestors.
Parts
::part(panel) targets the card.
Sizing
The host is display: block with max-width: 420px. Override max-width on the element to change it.
Password strength
Sign-up, password reset and change-password show a live strength meter as the user types. Scoring is client-only (length and character classes). Override the labels with strings.passwordStrengthTooWeak through strings.passwordStrengthVeryStrong. Appwrite can still reject with password_pwned when the project has the breached-password check enabled.
Phone country picker
The phone step includes a country dial-code picker and a national number field. Auth UI composes an E.164 value for Appwrite. The default country follows navigator.language when possible, otherwise +1.
Email prefill
Set the email or login-hint attribute, or open the page with ?login_hint= / ?email=. The value fills the email field once and is not overwritten after the user edits it.
Last used method
After a successful sign-in, Auth UI stores the method key in localStorage (authui:last-method) and highlights it the next time the form opens (OAuth providers are sorted to the top; magic URL, email OTP and phone open as the initial step; email/password, anonymous and passwordless CTAs keep a "Last used" badge). Nothing is sent to a server.
OAuth layout
With three or more providers the default layout is an accordion of compact buttons. Set methods.oauthLayout to override:
| Value | Behaviour |
|---|---|
| (unset) | stack for 1–2 providers, accordion for 3+ |
stack | Full-width labeled buttons |
accordion | Vibes-style expand-on-hover row |
icon / horizontal | Compact icon-only row |
Legal acceptance
When legal.requireAcceptance is true and at least one of termsUrl / privacyUrl is set, sign-up shows a required checkbox. Submit and OAuth stay blocked until it is checked. Other screens keep the passive legal footer.
Identifier-first
When the store config has identifierFirst: true (set on <authui-config identifier-first> or AuthUI.init), this panel shows email then Continue, then password. OAuth and passwordless stay on the first step. See Sign-in methods.
Google One Tap
When oneTap is enabled with googleClientId, this panel soft-prompts Google One Tap while signed out on sign-in and sign-up. See Sign-in methods.