<authui-modal>
Dialog that hosts the sign-in and account screens.
<authui-modal></authui-modal>You rarely need to add it yourself: AuthUI.open(), <authui-button> and <authui-user-button> create one on <body> when the page has none. Place it manually when you want it inside a specific stacking context or want to bind properties.
Attributes and properties
| Name | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Reflects the dialog state. Set it to open or close programmatically. |
view | "sign-in" / "sign-up" / "forgot-password" / "reset-password" / "magic-url" / "email-otp" / "phone" / "mfa" / "account" | "sign-in" | Screen to show. |
close-on-success | boolean | true | Close after a successful sign in. Set to "false" (string) in HTML, or the JS property / React closeOnSuccess={false}, to keep the modal open. Ignored when successUrl is set. |
Methods
show(view?)opens the dialog. Without a view it opens the account screen for signed-in users and the sign-in screen otherwise.hide()closes it.
Events
| Event | Detail | When |
|---|---|---|
authui-signed-in | Models.User | A sign-in flow inside the modal completed. |
authui-close | none | The dialog closed (Escape, backdrop, X, hide(), or closeOnSuccess). |
Behaviour
- Uses a native
<dialog>withshowModal(), so focus is trapped and Escape closes it. - Clicking the backdrop closes it.
- Opens automatically when the page URL carries a password-reset link or a failed OAuth return, and when an email verification link was confirmed, so users always see the result.
- Switches to the account screen when a signed-in user asks for "Manage account" from the inline sign-in panel (or opens the modal to the account view when the panel is not already embedded in a dialog).
Global events
The modal listens on window for authui:open (detail { view }) and authui:close. AuthUI.open() and AuthUI.close() dispatch these, so any framework can drive the modal without a reference to the element.