padreug be4ab13b32 refactor: Transition to authentication system and remove identity management

- Replace identity management with a new authentication system across the application.
- Update App.vue to integrate LoginDialog and remove PasswordDialog.
- Modify Navbar.vue to handle user authentication state and logout functionality.
- Enhance Home.vue to display user information upon login.
- Implement routing changes in index.ts to enforce authentication requirements for protected routes.

2025-08-03 11:20:35 +02:00

3.4 KiB

Raw Blame History

Authentication System

This web application now uses LNBits username/password authentication instead of Nostr keypairs.

Overview

The authentication system has been completely replaced with a traditional username/password system that integrates with LNBits. Users can now:

Register new accounts with username and password
Login with username/email and password
Manage their profile information
Logout securely

Configuration

Environment Variables

Create a .env file in the web-app directory with the following variables:

# LNBits API Configuration
# Set this to your LNBits instance API URL
# Example: http://localhost:5000/api/v1 or https://your-lnbits-instance.com/api/v1
VITE_LNBITS_API_URL=/api/v1

# Enable debug logging for LNBits API calls
VITE_LNBITS_DEBUG=false

# App Configuration
VITE_APP_TITLE=Ario
VITE_APP_DESCRIPTION=Your secure platform for events and community management

LNBits Setup

Ensure your LNBits instance is running and accessible
Make sure the username/password authentication method is enabled in LNBits
Configure CORS if your LNBits instance is on a different domain

API Endpoints

The application uses the following LNBits API endpoints:

POST /api/v1/auth - Login
POST /api/v1/auth/register - Register new user
POST /api/v1/auth/logout - Logout
GET /api/v1/auth - Get current user
PUT /api/v1/auth/password - Update password
PUT /api/v1/auth/update - Update profile

Components

New Components

LoginDialog.vue - Modal dialog for login/register
UserProfile.vue - Display user information and logout
Login.vue - Full-page login/register form

Updated Components

App.vue - Now uses new authentication system
Navbar.vue - Shows user status and logout option
Home.vue - Displays welcome message and user profile

Authentication Flow

App Initialization: The app checks for existing authentication token on startup
Route Protection: Routes with requiresAuth: true redirect to login if not authenticated
Login/Register: Users can create accounts or login with existing credentials
Token Management: Access tokens are stored in localStorage and automatically included in API requests
Logout: Clears tokens and redirects to login page

Security Features

JWT tokens for session management
Secure password handling (handled by LNBits)
Automatic token refresh
Route protection for authenticated pages
Secure logout with token cleanup

Migration from Nostr

The following components have been removed or replaced:

useIdentity.ts → useAuth.ts
IdentityDialog.vue → LoginDialog.vue
PasswordDialog.vue → Integrated into LoginDialog.vue
Nostr connection status → User authentication status

Development

To run the application with the new authentication system:

Set up your LNBits instance
Configure the environment variables
Run the development server: npm run dev
Access the application and test login/register functionality

Troubleshooting

Common Issues

CORS Errors: Ensure your LNBits instance allows requests from your frontend domain
Authentication Failures: Check that username/password auth is enabled in LNBits
API Connection: Verify the VITE_LNBITS_API_URL is correct

Debug Mode

Enable debug logging by setting VITE_LNBITS_DEBUG=true to see detailed API request/response information in the browser console.

3.4 KiB Raw Blame History