<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rullst Connect | OAuth2 for Rust</title>
<meta name="description" content="Elegant, async-first, and Developer Experience (DX) focused OAuth2 authentication library for Rust web applications.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="blob blob-1"></div>
<div class="blob blob-2"></div>
<nav class="navbar">
<div class="logo">Rullst <span>Connect</span></div>
<div class="nav-links">
<a href="https://docs.rs/rullst-connect" target="_blank" rel="noopener noreferrer">Docs</a>
<a href="https://crates.io/crates/rullst-connect" target="_blank" rel="noopener noreferrer">Crates.io</a>
<a href="https://github.com/Rullst/rullst-connect" target="_blank" rel="noopener noreferrer" class="github-btn">
<svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
GitHub
</a>
</div>
</nav>
<header class="hero">
<div class="hero-content">
<h1 class="hero-title">OAuth2 for <span class="gradient-text">Rust</span> Done Right.</h1>
<p class="hero-subtitle">Elegant, async-first, and Developer Experience (DX) focused authentication library. Easily integrate social logins across Axum, Actix, Leptos, and more.</p>
<div class="cta-group">
<div class="install-box" id="copy-btn">
<code>cargo add rullst-connect</code>
<svg class="copy-icon" viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
<span class="tooltip">Copied!</span>
</div>
<a href="#quick-start" class="primary-btn">Get Started</a>
</div>
<div class="badges">
<img src="https://img.shields.io/crates/v/rullst-connect.svg?style=for-the-badge&color=8A2BE2" alt="Crates.io">
<img src="https://img.shields.io/crates/d/rullst-connect.svg?style=for-the-badge&color=20B2AA" alt="Downloads">
<img src="https://img.shields.io/badge/License-MIT-yellow.svg?style=for-the-badge" alt="License">
</div>
</div>
</header>
<section class="features" id="features">
<div class="section-header">
<h2>Why Rullst Connect?</h2>
<p>Built for the modern Rust web ecosystem with a focus on simplicity and security.</p>
</div>
<div class="features-grid">
<div class="feature-card glass">
<div class="icon">🚀</div>
<h3>Async & Fast</h3>
<p>Built entirely on top of <code>tokio</code> and <code>reqwest</code> for non-blocking, high-performance authentication flows.</p>
</div>
<div class="feature-card glass">
<div class="icon">🧩</div>
<h3>Standardized</h3>
<p>All providers return a unified <code>ConnectUser</code> struct, making it easy to switch or support multiple providers.</p>
</div>
<div class="feature-card glass">
<div class="icon">🔌</div>
<h3>Framework Agnostic</h3>
<p>Works seamlessly with your favorite frameworks: Axum, Actix, Leptos, Dioxus, or vanilla Rust.</p>
</div>
<div class="feature-card glass">
<div class="icon">🔐</div>
<h3>Enterprise Security</h3>
<p>Built-in OIDC Discovery, JWKS validation, automatic CSRF protection, and native PKCE support.</p>
</div>
</div>
</section>
<section class="providers" id="providers">
<div class="section-header">
<h2>Supported Providers</h2>
<p>Out-of-the-box support for the most popular social login platforms.</p>
</div>
<div class="providers-grid">
<span class="provider-tag">Google</span>
<span class="provider-tag">GitHub</span>
<span class="provider-tag">Microsoft / Azure AD</span>
<span class="provider-tag">Apple</span>
<span class="provider-tag">Auth0</span>
<span class="provider-tag">AWS Cognito</span>
<span class="provider-tag">Facebook</span>
<span class="provider-tag">X (Twitter)</span>
<span class="provider-tag">Discord</span>
<span class="provider-tag">LinkedIn</span>
<span class="provider-tag">Custom OIDC</span>
</div>
</section>
<section class="quick-start" id="quick-start">
<div class="section-header">
<h2>Quick Start</h2>
<p>Three simple steps to authenticate your users.</p>
</div>
<div class="code-showcase glass">
<div class="code-header">
<div class="mac-btns"><span></span><span></span><span></span></div>
<div class="code-title">main.rs</div>
</div>
<pre><code class="language-rust"><span class="keyword">use</span> rullst_connect::prelude::*;
<span class="comment">// 1. Initialize the Provider</span>
<span class="keyword">let</span> github = GithubProvider::new(
<span class="string">"CLIENT_ID"</span>.to_string(),
<span class="string">"CLIENT_SECRET"</span>.to_string(),
<span class="string">"http://localhost:3000/auth/callback"</span>.to_string(),
);
<span class="comment">// 2. Redirect the User</span>
<span class="keyword">let</span> url = github.redirect_url();
<span class="comment">// Return this URL as a redirect to the user</span>
<span class="comment">// 3. Handle the Callback</span>
<span class="keyword">let</span> params = ExchangeParams { auth_code: code, ..Default::default() };
<span class="keyword">if let</span> <span class="type">Ok</span>(user) = github.get_user(params).await {
<span class="macro">println!</span>(<span class="string">"Welcome, {}!"</span>, user.name);
<span class="macro">println!</span>(<span class="string">"Email: {:?}"</span>, user.email);
}</code></pre>
</div>
</section>
<footer>
<p>Built with 🦀 by the <a href="https://github.com/Rullst" target="_blank">Rullst</a> team. Licensed under MIT.</p>
</footer>
<script src="script.js"></script>
</body>
</html>