dioxus-clerk 0.4.0

Clerk integration for Dioxus: components, hooks, and SSR initial state for web and fullstack apps
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

use crate::context::use_clerk_context;
use dioxus::prelude::*;

/// Render children when a signed-in session is known.
///
/// # Example
///
/// ```no_run
/// use dioxus::prelude::*;
/// use dioxus_clerk::*;
///
/// #[component]
/// fn AccountNav() -> Element {
///     rsx! {
///         SignedIn { UserButton {} }
///     }
/// }
/// ```
#[component]
pub fn SignedIn(
    /// Whether a session with pending after-auth tasks is treated as signed
    /// out. clerk-js's default is `true`; set `false` to render children for a
    /// pending session (for example to host its task UI). Mirrors Clerk React's
    /// `treatPendingAsSignedOut`.
    #[props(default = true)]
    treat_pending_as_signed_out: bool,
    children: Element,
) -> Element {
    let ctx = use_clerk_context();
    let auth = ctx.auth.read();
    if auth
        .resolve_pending(treat_pending_as_signed_out)
        .should_render_signed_in()
    {
        rsx! { {children} }
    } else {
        rsx! {}
    }
}

/// Render children only after clerk-js has loaded and auth resolved to signed in.
///
/// The loading-aware counterpart to [`SignedIn`], mirroring
/// [`crate::SignedOutWhenLoaded`]. This is useful in fullstack/SSR apps that
/// render before clerk-js has finished resolving the browser session: use
/// `fallback` for the interim (for example an avatar skeleton) and render
/// [`crate::ClerkFailed`] or [`crate::use_clerk_error`] nearby for failures.
///
/// # Example
///
/// ```no_run
/// use dioxus::prelude::*;
/// use dioxus_clerk::*;
///
/// #[component]
/// fn AccountNav() -> Element {
///     rsx! {
///         SignedInWhenLoaded {
///             fallback: rsx! { span { "Checking auth..." } },
///             UserButton {}
///         }
///     }
/// }
/// ```
#[component]
pub fn SignedInWhenLoaded(
    /// Rendered while clerk-js is loading and no resolved signed-out state is known.
    #[props(default = rsx! {})]
    fallback: Element,
    /// Whether a session with pending after-auth tasks is treated as signed
    /// out. See [`SignedIn`].
    #[props(default = true)]
    treat_pending_as_signed_out: bool,
    children: Element,
) -> Element {
    let ctx = use_clerk_context();
    let auth = ctx.auth.read();
    let auth = auth.resolve_pending(treat_pending_as_signed_out);
    let load_error = ctx.load_error.read();

    if auth.is_loaded() && auth.should_render_signed_in() {
        rsx! { {children} }
    } else if !auth.is_loaded() && !auth.should_render_signed_out() && load_error.is_none() {
        fallback
    } else {
        rsx! {}
    }
}