Implement complete full-stack authentication system

- Restructure project with separate frontend/backend architecture
- Create dedicated backend with Axum, SQLite, JWT authentication
- Implement real API endpoints for register/login/verify
- Update frontend to use HTTP requests instead of mock auth
- Add bcrypt password hashing and secure token generation
- Separate Cargo.toml files for frontend and backend builds
- Fix Trunk compilation by isolating WASM-incompatible dependencies
- Create demo user in database for easy testing
- Both servers running: frontend (8081), backend (3000)

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Connor Johnstone
2025-08-28 16:15:37 -04:00
parent 08c333dcba
commit 25bf194d19
12 changed files with 641 additions and 82 deletions

View File

@@ -1,5 +1,8 @@
// Frontend-only authentication module (simplified for WASM compatibility)
// Frontend authentication module - connects to backend API
use serde::{Deserialize, Serialize};
use wasm_bindgen::JsCast;
use wasm_bindgen_futures::JsFuture;
use web_sys::{Request, RequestInit, RequestMode, Response};
#[derive(Debug, Clone, Serialize, Deserialize)]
pub struct User {
@@ -34,90 +37,140 @@ pub struct AuthResponse {
pub user: UserInfo,
}
// Simplified frontend-only auth service
pub struct AuthService;
#[derive(Debug, Deserialize)]
pub struct ApiErrorResponse {
pub error: String,
pub status: u16,
}
// Frontend auth service - connects to backend API
pub struct AuthService {
base_url: String,
}
impl AuthService {
pub fn new() -> Self {
Self
// Default to localhost backend - could be configurable via env var in the future
Self {
base_url: "http://localhost:3000/api".to_string(),
}
}
// Mock authentication methods for development
// In production, these would make HTTP requests to a backend API
pub async fn register(&self, request: RegisterRequest) -> Result<AuthResponse, String> {
// Simulate API delay
gloo_timers::future::TimeoutFuture::new(500).await;
// Basic validation
if request.username.trim().is_empty() || request.email.trim().is_empty() || request.password.is_empty() {
return Err("All fields are required".to_string());
}
if request.password.len() < 6 {
return Err("Password must be at least 6 characters".to_string());
}
// Mock successful registration
Ok(AuthResponse {
token: format!("mock-jwt-token-{}", request.username),
user: UserInfo {
id: "user-123".to_string(),
username: request.username,
email: request.email,
},
})
self.post_json("/auth/register", &request).await
}
pub async fn login(&self, request: LoginRequest) -> Result<AuthResponse, String> {
// Simulate API delay
gloo_timers::future::TimeoutFuture::new(500).await;
// Basic validation
if request.username.trim().is_empty() || request.password.is_empty() {
return Err("Username and password are required".to_string());
}
// Mock authentication - accept demo/password or any user/password combo
if request.username == "demo" && request.password == "password" {
Ok(AuthResponse {
token: "mock-jwt-token-demo".to_string(),
user: UserInfo {
id: "demo-user-123".to_string(),
username: request.username,
email: "demo@example.com".to_string(),
},
})
} else if !request.password.is_empty() {
// Accept any non-empty password for development
let username = request.username.clone();
Ok(AuthResponse {
token: format!("mock-jwt-token-{}", username),
user: UserInfo {
id: format!("user-{}", username),
username: request.username,
email: format!("{}@example.com", username),
},
})
} else {
Err("Invalid credentials".to_string())
}
self.post_json("/auth/login", &request).await
}
pub async fn verify_token(&self, token: &str) -> Result<UserInfo, String> {
// Simulate API delay
gloo_timers::future::TimeoutFuture::new(100).await;
let response = self.get_with_auth("/auth/verify", token).await?;
let json_value: serde_json::Value = response;
// Mock token verification
if token.starts_with("mock-jwt-token-") {
let username = token.strip_prefix("mock-jwt-token-").unwrap_or("unknown");
Ok(UserInfo {
id: format!("user-{}", username),
username: username.to_string(),
email: format!("{}@example.com", username),
})
if let Some(user_obj) = json_value.get("user") {
serde_json::from_value(user_obj.clone())
.map_err(|e| format!("Failed to parse user info: {}", e))
} else {
Err("Invalid token".to_string())
Err("Invalid response format".to_string())
}
}
// Helper method for POST requests with JSON body
async fn post_json<T: Serialize, R: for<'de> Deserialize<'de>>(
&self,
endpoint: &str,
body: &T,
) -> Result<R, String> {
let window = web_sys::window().ok_or("No global window exists")?;
let json_body = serde_json::to_string(body)
.map_err(|e| format!("JSON serialization failed: {}", e))?;
let opts = RequestInit::new();
opts.set_method("POST");
opts.set_mode(RequestMode::Cors);
opts.set_body(&wasm_bindgen::JsValue::from_str(&json_body));
let url = format!("{}{}", self.base_url, endpoint);
let request = Request::new_with_str_and_init(&url, &opts)
.map_err(|e| format!("Request creation failed: {:?}", e))?;
request.headers().set("Content-Type", "application/json")
.map_err(|e| format!("Header setting failed: {:?}", e))?;
let resp_value = JsFuture::from(window.fetch_with_request(&request))
.await
.map_err(|e| format!("Network request failed: {:?}", e))?;
let resp: Response = resp_value.dyn_into()
.map_err(|e| format!("Response cast failed: {:?}", e))?;
let text = JsFuture::from(resp.text()
.map_err(|e| format!("Text extraction failed: {:?}", e))?)
.await
.map_err(|e| format!("Text promise failed: {:?}", e))?;
let text_string = text.as_string()
.ok_or("Response text is not a string")?;
if resp.ok() {
serde_json::from_str::<R>(&text_string)
.map_err(|e| format!("JSON parsing failed: {}", e))
} else {
// Try to parse error response
if let Ok(error_response) = serde_json::from_str::<ApiErrorResponse>(&text_string) {
Err(error_response.error)
} else {
Err(format!("Request failed with status {}", resp.status()))
}
}
}
// Helper method for GET requests with Authorization header
async fn get_with_auth(
&self,
endpoint: &str,
token: &str,
) -> Result<serde_json::Value, String> {
let window = web_sys::window().ok_or("No global window exists")?;
let opts = RequestInit::new();
opts.set_method("GET");
opts.set_mode(RequestMode::Cors);
let url = format!("{}{}", self.base_url, endpoint);
let request = Request::new_with_str_and_init(&url, &opts)
.map_err(|e| format!("Request creation failed: {:?}", e))?;
request.headers().set("Authorization", &format!("Bearer {}", token))
.map_err(|e| format!("Authorization header setting failed: {:?}", e))?;
let resp_value = JsFuture::from(window.fetch_with_request(&request))
.await
.map_err(|e| format!("Network request failed: {:?}", e))?;
let resp: Response = resp_value.dyn_into()
.map_err(|e| format!("Response cast failed: {:?}", e))?;
let text = JsFuture::from(resp.text()
.map_err(|e| format!("Text extraction failed: {:?}", e))?)
.await
.map_err(|e| format!("Text promise failed: {:?}", e))?;
let text_string = text.as_string()
.ok_or("Response text is not a string")?;
if resp.ok() {
serde_json::from_str::<serde_json::Value>(&text_string)
.map_err(|e| format!("JSON parsing failed: {}", e))
} else {
// Try to parse error response
if let Ok(error_response) = serde_json::from_str::<ApiErrorResponse>(&text_string) {
Err(error_response.error)
} else {
Err(format!("Request failed with status {}", resp.status()))
}
}
}
}

View File

@@ -1,7 +1,5 @@
mod app;
mod config;
mod calendar;
mod auth;
mod components;