<.live_component module={SupportComponent} id="support-component" /> <.simple_form :let={form} :if={@form} for={@form} phx-change="update-form" phx-submit={JS.dispatch("click", to: "#registration-component")} class="grid gap-8" >

Create a new account:

<.input type="email" field={form[:email]} label="Email" phx-debounce="250" autocomplete="username webauthn" /> <.live_component disabled={@form.source.valid? == false} module={RegistrationComponent} id="registration-component" app={<%= inspect @app_pascal_case %>} class={[ "bg-gray-200 hover:bg-gray-300 hover:text-black rounded transition", "ring ring-transparent focus:ring-gray-400 focus:outline-none", "flex gap-2 items-center justify-center px-4 py-2 w-full", "disabled:cursor-not-allowed disabled:opacity-25" ]} />

Sign into an existing account:

<.live_component disabled={@form.source.valid? == false} module={AuthenticationComponent} id="authentication-component" class={[ "bg-gray-200 hover:bg-gray-300 hover:text-black rounded transition", "ring ring-transparent focus:ring-gray-400 focus:outline-none", "flex gap-2 items-center justify-center px-4 py-2 w-full", "disabled:cursor-not-allowed disabled:opacity-25" ]} />
Where's the password?

This application uses a new technology that replaces passwords and temporary codes.

Passkeys are a more secure way to sign into applications. They use advanced technology embraced by security experts, while improving ease-of-use.

Read more about Passkeys at the FIDO Alliance .

<%!-- - The form is only rendered when a token has been created by the registration or authentication component. - The form is present in the markup, but hidden from view. - When the form is mounted, JS is used to click the submit button. - This is a bit hacky, but it works. --%> <.simple_form :let={f} :if={@token_form} for={@token_form} method="post" id="token-form" action={~p"/session"} phx-mounted={JS.dispatch("click", to: "#token-form button[type='submit']")} class="hidden" > <.input type="text" field={f[:value]} label="Value" /> <.button type="submit">Go