Skip to main content

dioxus_clerk/components/
task_setup_mfa.rs

1use crate::options::TaskSetupMFAOptions;
2use dioxus::prelude::*;
3
4/// Mounted Clerk task setup-MFA UI, for the clerk-js v6 after-auth
5/// `setup-mfa` session task.
6///
7/// Render this when the current session has a pending `setup-mfa`
8/// [`current_task`](crate::Session::current_task); clerk-js drives the MFA
9/// enrollment flow and navigates to `redirect_url_complete` once every pending
10/// task resolves.
11///
12/// # Example
13///
14/// ```no_run
15/// use dioxus::prelude::*;
16/// use dioxus_clerk::*;
17///
18/// #[component]
19/// fn MfaSetupPage() -> Element {
20///     rsx! {
21///         TaskSetupMFA {
22///             redirect_url_complete: "/",
23///             class: "mx-auto max-w-md",
24///         }
25///     }
26/// }
27/// ```
28#[component]
29pub fn TaskSetupMFA(
30    /// Full URL or path Clerk navigates to after all pending session tasks
31    /// resolve. clerk-js requires this to complete the flow.
32    #[props(into)]
33    redirect_url_complete: Option<String>,
34    /// Raw Clerk appearance object.
35    appearance: Option<serde_json::Value>,
36    /// Advanced options forwarded to Clerk, as a
37    /// [`TaskSetupMFAOptions`](crate::TaskSetupMFAOptions) builder or a raw
38    /// `serde_json::Value`. Explicit props win when both set the same Clerk
39    /// option key.
40    #[props(default = TaskSetupMFAOptions::from_value(serde_json::Value::Null), into)]
41    options: TaskSetupMFAOptions,
42    /// Optional id for the Clerk widget host `<div>` that clerk-js mounts
43    /// into. May also be set through the attribute spread; this prop wins
44    /// when both are present.
45    #[props(into)]
46    id: Option<String>,
47    /// Attributes (including `class`) spread onto the Clerk widget host
48    /// `<div>`.
49    #[props(extends = GlobalAttributes)]
50    attributes: Vec<Attribute>,
51    /// Rendered while the Clerk task setup-MFA widget is mounting.
52    #[props(default = rsx! {})]
53    fallback: Element,
54) -> Element {
55    let options = options
56        .maybe_redirect_url_complete(redirect_url_complete)
57        .maybe_appearance(appearance)
58        .into_value();
59
60    super::widget::render(
61        super::widget::Widget::TaskSetupMfa,
62        super::widget::WidgetProps::new(options, fallback, id, attributes),
63    )
64}