feat(dioxus): improve Dioxus example

Author: DanielleHuisman

Cargo.lock

@@ -19,7 +19,6 @@ server = [
     "dep:shield-email",
     "dep:shield-memory",
     "dep:shield-oidc",
-    "dep:tokio",
     "dep:tower-sessions",
     "dioxus/server",
     "shield-dioxus/server",
@@ -31,6 +30,7 @@ web = ["dioxus/web"]
 [dependencies]
 axum = { workspace = true, optional = true }
 dioxus = { workspace = true, features = ["fullstack", "router"] }
+serde.workspace = true
 shield.workspace = true
 shield-bootstrap = { workspace = true, features = ["dioxus"] }
 shield-dioxus.workspace = true
@@ -40,9 +40,4 @@ shield-email = { workspace = true, features = [
 ], optional = true }
 shield-memory = { workspace = true, optional = true }
 shield-oidc = { workspace = true, optional = true }
-tokio = { workspace = true, features = [
-    "macros",
-    "rt-multi-thread",
-], optional = true }
 tower-sessions = { workspace = true, optional = true }
-tracing.workspace = true

examples/dioxus-axum/Cargo.toml

@@ -0,0 +1,36 @@
+use dioxus::prelude::*;
+use serde::{Deserialize, Serialize};
+#[cfg(feature = "server")]
+use shield::User as _;
+#[cfg(feature = "server")]
+use shield_dioxus_axum::ExtractUser;
+#[cfg(feature = "server")]
+use shield_memory::User as ShieldUser;
+
+#[derive(Deserialize, PartialEq, Serialize)]
+pub struct User {
+    pub id: String,
+    pub name: Option<String>,
+    pub email_addresses: Vec<String>,
+}
+
+#[get("/api/user", user: ExtractUser<ShieldUser>)]
+pub async fn user() -> Result<Option<User>, ServerFnError> {
+    let ExtractUser(user) = user;
+
+    Ok(if let Some(user) = user {
+        Some(User {
+            id: user.id(),
+            name: user.name(),
+            email_addresses: user
+                .email_addresses()
+                .await
+                .context("failed to get user email addresses")?
+                .into_iter()
+                .map(|email_address| email_address.email)
+                .collect(),
+        })
+    } else {
+        None
+    })
+}

examples/dioxus-axum/src/api.rs

@@ -1,8 +1,47 @@
 use dioxus::prelude::*;
 
+use crate::api::user;
+
 #[component]
 pub fn Home() -> Element {
+    let user = use_loader(user)?;
+    let user = user.read();
+
     rsx! {
         h1 { "Shield Dioxus Axum Example" }
+
+        if let Some(user) = user.as_ref() {
+            p {
+                b {
+                    "Name: "
+                }
+                span {
+                    {user.name.as_deref().unwrap_or("-")}
+                }
+            }
+
+            p {
+                b {
+                    "Email addresses:"
+                }
+                ul {
+                    for email_address in &user.email_addresses {
+                        li {
+                            "{email_address}"
+                        }
+                    }
+                }
+            }
+
+            a {
+                href: "/auth/sign-out",
+                "Sign out"
+            }
+        } else {
+            a {
+                href: "/auth/sign-in",
+                "Sign in"
+            }
+        }
     }
 }

examples/dioxus-axum/src/home.rs

@@ -1,3 +1,4 @@
+mod api;
 mod app;
 mod home;
 
@@ -13,84 +14,76 @@ fn main() {
 }
 
 #[cfg(feature = "server")]
-#[tokio::main]
-async fn main() {
-    use std::sync::Arc;
+fn main() {
+    dioxus::serve(|| async move {
+        use std::sync::Arc;
 
-    use axum::{Extension, Router};
-    use dioxus::{
-        cli_config::fullstack_address_or_localhost,
-        prelude::{DioxusRouterExt, *},
-    };
-    use shield::{Shield, ShieldOptions};
-    use shield_bootstrap::BootstrapDioxusStyle;
-    use shield_dioxus_axum::{AuthRoutes, AxumDioxusIntegration, ShieldLayer};
-    use shield_email::{EmailMethod, EmailOptions, TracingSender};
-    use shield_memory::{MemoryStorage, User};
-    use shield_oidc::{Keycloak, OidcMethod};
-    use tokio::net::TcpListener;
-    use tower_sessions::{Expiry, MemoryStore, SessionManagerLayer, cookie::time::Duration};
-    use tracing::{Level, info};
+        use axum::{Extension, Router};
+        use dioxus::{
+            cli_config::fullstack_address_or_localhost,
+            prelude::{DioxusRouterExt, *},
+        };
+        use shield::{Shield, ShieldOptions};
+        use shield_bootstrap::BootstrapDioxusStyle;
+        use shield_dioxus_axum::{AuthRoutes, AxumDioxusIntegration, ShieldLayer};
+        use shield_email::{EmailMethod, EmailOptions, TracingSender};
+        use shield_memory::{MemoryStorage, User};
+        use shield_oidc::{Keycloak, OidcMethod};
+        use tower_sessions::{Expiry, MemoryStore, SessionManagerLayer, cookie::time::Duration};
 
-    // Initialize Dioxus
-    dioxus::logger::init(Level::DEBUG).unwrap();
-    let addr = fullstack_address_or_localhost();
+        let addr = fullstack_address_or_localhost();
 
-    // Initialize sessions
-    let session_store = MemoryStore::default();
-    let session_layer = SessionManagerLayer::new(session_store)
-        .with_secure(false)
-        .with_expiry(Expiry::OnInactivity(Duration::minutes(10)));
+        // Initialize sessions
+        let session_store = MemoryStore::default();
+        let session_layer = SessionManagerLayer::new(session_store)
+            .with_secure(false)
+            .with_expiry(Expiry::OnInactivity(Duration::minutes(10)));
 
-    // Initialize Shield
-    let storage = MemoryStorage::new();
-    let shield = Shield::new(
-        storage.clone(),
-        vec![
-            Arc::new(EmailMethod::new(
-                EmailOptions::builder()
-                    .secret("secret")
-                    .sender(TracingSender)
-                    .build(),
-                storage.clone(),
-            )),
-            Arc::new(
-                OidcMethod::new(storage).with_providers([Keycloak::builder(
-                    "keycloak",
-                    "http://localhost:18080/realms/Shield",
-                    "client1",
-                )
-                .client_secret("xcpQsaGbRILTljPtX4npjmYMBjKrariJ")
-                .redirect_url(format!(
-                    "http://localhost:{}/api/auth/oidc/sign-in-callback/keycloak",
-                    dioxus::cli_config::devserver_raw_addr()
-                        .map(|addr| addr.port())
-                        .unwrap_or_else(|| addr.port())
-                ))
-                .build()]),
-            ),
-        ],
-        ShieldOptions::default(),
-    );
-    let shield_layer = ShieldLayer::new(shield.clone());
+        // Initialize Shield
+        let storage = MemoryStorage::new();
+        let shield = Shield::new(
+            storage.clone(),
+            vec![
+                Arc::new(EmailMethod::new(
+                    EmailOptions::builder()
+                        .secret("secret")
+                        .sender(TracingSender)
+                        .build(),
+                    storage.clone(),
+                )),
+                Arc::new(
+                    OidcMethod::new(storage).with_providers([Keycloak::builder(
+                        "keycloak",
+                        "http://localhost:18080/realms/Shield",
+                        "client1",
+                    )
+                    .client_secret("xcpQsaGbRILTljPtX4npjmYMBjKrariJ")
+                    .redirect_url(format!(
+                        "http://localhost:{}/api/auth/oidc/sign-in-callback/keycloak",
+                        dioxus::cli_config::devserver_raw_addr()
+                            .map(|addr| addr.port())
+                            .unwrap_or_else(|| addr.port())
+                    ))
+                    .build()]),
+                ),
+            ],
+            ShieldOptions::default(),
+        );
+        let shield_layer = ShieldLayer::new(shield.clone());
 
-    // Initialize router
-    let router = Router::new()
-        .nest("/api/auth", AuthRoutes::new(shield).router())
-        .serve_dioxus_application(
-            ServeConfig::new().context(BootstrapDioxusStyle::default().context()),
-            App,
-        )
-        .layer(Extension(
-            AxumDioxusIntegration::<User>::default().context(),
-        ))
-        .layer(shield_layer)
-        .layer(session_layer);
+        // Initialize router
+        let router = Router::new()
+            .nest("/api/auth", AuthRoutes::new(shield).router())
+            .serve_dioxus_application(
+                ServeConfig::new().context(BootstrapDioxusStyle::default().context()),
+                App,
+            )
+            .layer(Extension(
+                AxumDioxusIntegration::<User>::default().context(),
+            ))
+            .layer(shield_layer)
+            .layer(session_layer);
 
-    // Start app
-    info!("listening on http://{}", &addr);
-    let listener = TcpListener::bind(&addr).await.unwrap();
-    axum::serve(listener, router.into_make_service())
-        .await
-        .unwrap();
+        Ok(router)
+    });
 }

examples/dioxus-axum/src/main.rs

@@ -31,7 +31,7 @@ pub fn FormInput(props: FormInputProps) -> Element {
         InputType::Button(_) | InputType::Reset(_) | InputType::Submit(_) => {
             return rsx! {
                 button {
-                    class: "btn btn-outline-primary d-flex align-items-center justify-content-center gap-1",
+                    class: "btn btn-primary w-100 mb-3 d-flex align-items-center justify-content-center gap-2",
                     name: props.input.name,
                     type: match props.input.r#type {
                         InputType::Reset(_) => "reset",