🚀 A near real-world Dioxus web app with SQLite backend

Background

A full-stack application built with Dioxus and SQLite, implementing a RealWorld blog platform with session-based authentication.

This repository builds upon the original realworld-app-dioxus-sqlite by replacing the JWT-based authentication mechanism with a more traditional session-based approach using axum_session and axum_session_auth crates.

Session-Based Authentication

Rather than using stateless JWT tokens, this implementation leverages server-side session management where:

• Session State: User sessions are managed server-side, providing better control and security
• axum_session: Handles session storage, retrieval, and lifecycle management
• axum_session_auth: Provides authentication middleware and user extraction utilities
• Security Benefits: Sessions can be invalidated immediately, user context is always current, and CSRF protection is naturally built-in

This approach is particularly well-suited for traditional web applications and demonstrates an alternative to JWT for Rust web development.

I started with the original Dioxus/SQLite implementation and adapted it to use session-based authentication as an exploration of different auth patterns in Rust fullstack applications.

To ensure it runs in a few simple steps, the backend DB is in SQLite (a practical choice for many apps that don't require heavy write operations). Interested to see it? Just clone the repo and follow the instructions below.

Before proceeding, you may take a look at the screenshots here. This will give you a quick glance at the app so you can decide.

🛠️ Key Technologies & Features

This application leverages the following core technologies and features:

• Dioxus
• axum
• SSR
• SQLite
• axum_session (session based auth)
• fts5
• Modal Windows
• argon2 (password encrypt)
• uuid
• tailwindcss
• fontawesome icons
• nanoid (password reset token)

⚙️ Install and run

Tools

To get started, you will need rust , dioxus-cli, wasm32-unknown-unknown and standard system dependencies.

1. Install Rust compiler and stable toolchain.

   Head over to https://rust-lang.org and install rustup (or install rustup via your OS specific package manager).Once rustup is installed, add the stable toolchain.

   rustup toolchain install stable
   

2. Install wasm32-unknown-unknown Rust target - to enable compiling Rust to WebAssembly

   rustup target add wasm32-unknown-unknown
   

3. Install cargo-binstall for installing a pre-built binary of dioxus-cli (next step). It is also possible to build the dioxus-cli from source, but be aware it may take several minutes (please refer to the link in the next step).

   cargo install cargo-binstall
   

4. Install dioxus-cli If you encounter any issues, Please refer here.

   cargo binstall dioxus-cli
   

   Note: The above command installs the latest stable version of dioxus-cli. To install a specific version, use cargo install dioxus-cli==<version>.*

Clone

Clone the repo.

git clone https://github.com/santhosh7403/axum-session-auth-realworld-app-dioxus-sqlite.git
cd axum-session-auth-realworld-app-dioxus-sqlite

Database

Set the DATABASE_URL env variable

source .env

If you encounter any database issues, try the additional steps in this document README_DATABASE.md to initialize, drop, or recreate database.

Run

You may now build and run the application:

dx serve

Click to view terminal output example

santhosh@fedora:~/my_github_repos/axum-session-auth-realworld-app-dioxus-sqlite$ dx serve
warning: Waiting for cargo-metadata...
15:03:09 [dev] -----------------------------------------------------------------
                Serving your app: axum-session-auth-realworld-app-dioxus-sqlite! 🚀
                • Press `ctrl+c` to exit the server
                • Press `r` to rebuild the app
                • Press `p` to toggle automatic rebuilds
                • Press `v` to toggle verbose logging
                • Press `/` for more commands and shortcuts
                Learn more at https://dioxuslabs.com/learn/0.7/getting_started
               ---------------------------------------------------------------- 
15:05:44 [dev] Build completed successfully in 154624ms, launching app! 💫 
15:05:45 [server]  INFO Registering server function: POST /api/editor_action
15:05:45 [server]  INFO Registering server function: POST /api/search_fetch_results
15:05:45 [server]  INFO Registering server function: POST /api/delete_article
15:05:45 [server]  INFO Registering server function: POST /api/current_user
15:05:45 [server]  INFO Registering server function: POST /api/login
15:05:45 [server]  INFO Registering server function: POST /api/logout
15:05:45 [server]  INFO Registering server function: POST /api/signup_action9269776427574912722
15:05:45 [server]  INFO Registering server function: POST /api/delete_comment
15:05:45 [server]  INFO Registering server function: POST /api/get_comments
15:05:45 [server]  INFO Registering server function: POST /api/post_comment
15:05:45 [server]  INFO Registering server function: POST /api/get_article
15:05:45 [server]  INFO Registering server function: POST /api/follow_action
15:05:45 [server]  INFO Registering server function: POST /api/fav_action
15:05:45 [server]  INFO Registering server function: POST /api/reset_password_213529242004652721604
15:05:45 [server]  INFO Registering server function: POST /api/reset_password_1
15:05:45 [server]  INFO Registering server function: GET /api/settings_get
15:05:45 [server]  INFO Registering server function: POST /api/settings_update
15:05:45 [server]  INFO Registering server function: POST /api/get_tags10263263092093384903
15:05:45 [server]  INFO Registering server function: POST /api/home_articles
15:05:45 [server]  INFO Registering server function: POST /api/user_profile
15:05:45 [server]  INFO Registering server function: POST /api/profile_articles
15:05:58 [server]  INFO redirecting

╭────────────────────────────────────────────────────────────────────────────────────────── /:more ╮
│  App:     ━━━━━━━━━━━━━━━━━━━━━━━━━━  🎉 3.1s      Platform: Web + fullstack                     │
│  Server:  ━━━━━━━━━━━━━━━━━━━━━━━━━━  🎉 3.1s      App features: ["web"]                         │
│  Status:  Serving axum-session-auth-realworld-app-dioxus-sqlite 🚀   Serving at: http://127.0.0.1:8080             │
╰──────────────────────────────────────────────────────────────────────────────────────────────────╯

Application access

Once application has started, access application from your web browser localhost:8080

The application screen looks like this

More screenshots are available here

To showcase the app and test it out, some sample users and data are pre-populated. User names 'user1' to 'user5' are available and the password is same as the username. If you want to remove this data, you may delete the 'basedata' files inside the ./migrations folder and setup database as explained in DATABASE_README.md.

Sqlite fts5 (full-text search)

The Full-Text Search feature covers three fields from the articles table. If you are interested in learning how it works or want to experiment with different search methods, please refer to the SQLite FTS5 documentation here

Tailwind CSS

The styling of this application UI uses Tailwind CSS. Tailwind allows you to style your elements with CSS utility classes. The tailwind.css file in the project root folder links where the source files are located and the tailwind.css file in assets folder where the generated output CSS.

The output tailwind.css is generated from source CSS utility classes using a standalone Tailwind CSS CLI binary.For other options, please refer to this link for other options.

The standalone Tailwind css utility can be downloaded from here.

santhosh@fedora:~/axum-session-auth-realworld-app-dioxus-sqlite$ ~/Downloads/tailwindcss-linux-x64 -i input.css -o assets/tailwind.css
≈ tailwindcss v4.1.17

Note: This step is only required if you are making any changes to CSS classes or adding/changing UI elements. Also, as of Dioxus 0.7.x, dx serve automatically detects if your project is using TailwindCSS if it finds a file called "tailwind.css" at the root of your project reference document and installs it automatically and builds the CSS for you when needed.

🏗️ Other Variants

If you are looking for this same application with different frameworks or databases, check out these versions:

Framework	Database	Auth Type	Auth Crates	Special Feature	Repository
Dioxus	SQLite	Session	axum_session, axum_session_auth		This Repository
Dioxus	SQLite	Session	tower_sessions, axum_login	superadmin, fine grained authorization	View Repo
Dioxus	SQLite	PASETO	pasetors	superadmin, fine grained authorization	View Repo
Leptos	PostgreSQL	Session	axum_session, axum_session_auth		View Repo
Leptos	PostgreSQL	JWT	jsonwebtoken		View Repo
Leptos	SQLite	JWT	jsonwebtoken		View Repo
Dioxus	SQLite	JWT	jsonwebtoken		View Repo

🙏 Inspiration and Acknowledgements

The foundational structure of this application is derived from the realworld example by Bechma/realworld-leptos, with appreciation to any antecedent projects.

This particular version was initiated during the transition from Leptos 0.6 to 0.7 and up as a personal learning exercise. It has since undergone significant experimentation and refinement, including:

• A complete user interface redesign utilizing tailwindcss and fontawesome icons.

• Implementation of modal windows and re-wired page navigation.

• Integration of SQLite FTS5 for comprehensive full-text search capabilities.

• An updated, non-reloading pagination method for search results.

• Dark mode styling and user preference persistence.

• Implementation of Session based auth.