`phoneSignIn` element

Phone-number sign-in with a one-time code through Firebase, then an IWC session.

Renders

a phone field, a code field and the Firebase reCAPTCHA, driven by the runtime

Required

api: an auth.exchange API with provider: "firebase-phone"; and app.iwc auth.providers.firebase-phone.web config.

Native apps

Web, and server-driven native apps

Syntax

phoneSignIn element

{ "type": "phoneSignIn" }

An element lives in a screen's sections, another element's elements, a layout slot or a component root.

Properties

Property	Type	Description
`api`	`string`	the api file to call (phoneSignIn: the auth.exchange api)
`target`	`string`	route, element id, or URL

Plus the properties every element accepts: id, className, style, responsive, states, animation, visible, ariaLabel, attributes and more.

Events & actions

After the code is verified the ID token is exchanged for a session and the visitor goes to target.

Example

phoneSignIn example

{ "type": "phoneSignIn", "api": "firebase-signin.api.iwc", "target": "/account" }

See phone sign-in. In development, iwc dev uses the test OTP so you can sign in without SMS.

Expected output

This example depends on project configuration (an API, a component or a widget file), so it is not rendered here; it is validated against the schema.

Data, conditions & styling

Conditional rendering: "visible": {"auth": "signed-in"}, {"roles": ["admin"]} or an expression such as "=product.stock > 0". Decided on the server: hidden elements are never sent.
Data binding: bind takes text from data (name, user.name, props.title, params.slug, state.cart.count); binds binds attributes. Containers become data-driven with data + item. See data binding.
Styling: className for your stylesheets, style for CSS in JSON, states for hover/focus/active, animation for entrance motion. See the style property reference.
Responsive behaviour: responsive applies CSS at or below a breakpoint ({"mobile": {"padding": "12px"}}); grids also take responsiveColumns.