dioxus_clerk/components/
signed_in.rs

1use crate::context::use_clerk_context;
2use dioxus::prelude::*;
3
4/// Render children when a signed-in session is known.
5///
6/// # Example
7///
8/// ```no_run
9/// use dioxus::prelude::*;
10/// use dioxus_clerk::*;
11///
12/// #[component]
13/// fn AccountNav() -> Element {
14///     rsx! {
15///         SignedIn { UserButton {} }
16///     }
17/// }
18/// ```
19#[component]
20pub fn SignedIn(
21    /// Whether a session with pending after-auth tasks is treated as signed
22    /// out. clerk-js's default is `true`; set `false` to render children for a
23    /// pending session (for example to host its task UI). Mirrors Clerk React's
24    /// `treatPendingAsSignedOut`.
25    #[props(default = true)]
26    treat_pending_as_signed_out: bool,
27    children: Element,
28) -> Element {
29    let ctx = use_clerk_context();
30    let auth = ctx.auth.read();
31    if auth
32        .resolve_pending(treat_pending_as_signed_out)
33        .should_render_signed_in()
34    {
35        rsx! { {children} }
36    } else {
37        rsx! {}
38    }
39}
40
41/// Render children only after clerk-js has loaded and auth resolved to signed in.
42///
43/// The loading-aware counterpart to [`SignedIn`], mirroring
44/// [`crate::SignedOutWhenLoaded`]. This is useful in fullstack/SSR apps that
45/// render before clerk-js has finished resolving the browser session: use
46/// `fallback` for the interim (for example an avatar skeleton) and render
47/// [`crate::ClerkFailed`] or [`crate::use_clerk_error`] nearby for failures.
48///
49/// # Example
50///
51/// ```no_run
52/// use dioxus::prelude::*;
53/// use dioxus_clerk::*;
54///
55/// #[component]
56/// fn AccountNav() -> Element {
57///     rsx! {
58///         SignedInWhenLoaded {
59///             fallback: rsx! { span { "Checking auth..." } },
60///             UserButton {}
61///         }
62///     }
63/// }
64/// ```
65#[component]
66pub fn SignedInWhenLoaded(
67    /// Rendered while clerk-js is loading and no resolved signed-out state is known.
68    #[props(default = rsx! {})]
69    fallback: Element,
70    /// Whether a session with pending after-auth tasks is treated as signed
71    /// out. See [`SignedIn`].
72    #[props(default = true)]
73    treat_pending_as_signed_out: bool,
74    children: Element,
75) -> Element {
76    let ctx = use_clerk_context();
77    let auth = ctx.auth.read();
78    let auth = auth.resolve_pending(treat_pending_as_signed_out);
79    let load_error = ctx.load_error.read();
80
81    if auth.is_loaded() && auth.should_render_signed_in() {
82        rsx! { {children} }
83    } else if !auth.is_loaded() && !auth.should_render_signed_out() && load_error.is_none() {
84        fallback
85    } else {
86        rsx! {}
87    }
88}
dioxus_clerk/components/signed_in.rs

dioxus_clerk/components/
signed_in.rs
