Implement complete Bearer Token and API key authentication system
- Create comprehensive authentication backend with JWT and API key support - Add database models for users, API keys, and tokens with proper security - Implement authentication middleware and API endpoints - Build complete frontend authentication UI with: - LoginForm component with JWT authentication - APIKeyManager for creating and managing API keys - AuthDashboard for comprehensive auth management - AuthContext for state management and authenticated requests - Initialize database with default admin user (admin/admin123) - Add proper token refresh, validation, and blacklisting - Implement scope-based API key authorization system 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
anthonyrawlins
@@ -1,105 +1,229 @@
|
||||
import React, { createContext, useContext, useState, useEffect } from 'react';
|
||||
/**
|
||||
* Authentication Context
|
||||
* Manages user authentication state, JWT tokens, and API key authentication
|
||||
*/
|
||||
|
||||
import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
|
||||
|
||||
interface User {
|
||||
id: string;
|
||||
id: number;
|
||||
username: string;
|
||||
name: string;
|
||||
role: string;
|
||||
email?: string;
|
||||
email: string;
|
||||
full_name?: string;
|
||||
is_active: boolean;
|
||||
is_superuser: boolean;
|
||||
is_verified: boolean;
|
||||
created_at: string;
|
||||
last_login?: string;
|
||||
}
|
||||
|
||||
interface AuthTokens {
|
||||
access_token: string;
|
||||
refresh_token: string;
|
||||
token_type: string;
|
||||
expires_in: number;
|
||||
}
|
||||
|
||||
interface AuthContextType {
|
||||
user: User | null;
|
||||
tokens: AuthTokens | null;
|
||||
isAuthenticated: boolean;
|
||||
isLoading: boolean;
|
||||
login: (username: string, password: string) => Promise<boolean>;
|
||||
login: (username: string, password: string) => Promise<void>;
|
||||
logout: () => void;
|
||||
token: string | null;
|
||||
refreshToken: () => Promise<boolean>;
|
||||
updateUser: (userData: Partial<User>) => void;
|
||||
}
|
||||
|
||||
const AuthContext = createContext<AuthContextType | null>(null);
|
||||
const AuthContext = createContext<AuthContextType | undefined>(undefined);
|
||||
|
||||
interface AuthProviderProps {
|
||||
children: React.ReactNode;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
const API_BASE_URL = process.env.REACT_APP_API_URL || '/api';
|
||||
|
||||
export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
|
||||
const [user, setUser] = useState<User | null>(null);
|
||||
const [token, setToken] = useState<string | null>(null);
|
||||
const [tokens, setTokens] = useState<AuthTokens | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
// Check for existing authentication on mount
|
||||
useEffect(() => {
|
||||
const checkAuth = () => {
|
||||
const storedToken = localStorage.getItem('auth_token');
|
||||
const storedUser = localStorage.getItem('user');
|
||||
const isAuthenticated = !!user && !!tokens;
|
||||
|
||||
if (storedToken && storedUser) {
|
||||
try {
|
||||
const parsedUser = JSON.parse(storedUser);
|
||||
setToken(storedToken);
|
||||
setUser(parsedUser);
|
||||
} catch (error) {
|
||||
console.error('Failed to parse stored user data:', error);
|
||||
localStorage.removeItem('auth_token');
|
||||
localStorage.removeItem('user');
|
||||
// Initialize auth state from localStorage
|
||||
useEffect(() => {
|
||||
const initializeAuth = async () => {
|
||||
try {
|
||||
const storedTokens = localStorage.getItem('hive_tokens');
|
||||
const storedUser = localStorage.getItem('hive_user');
|
||||
|
||||
if (storedTokens && storedUser) {
|
||||
const parsedTokens: AuthTokens = JSON.parse(storedTokens);
|
||||
const parsedUser: User = JSON.parse(storedUser);
|
||||
|
||||
// Check if tokens are still valid
|
||||
if (await validateTokens(parsedTokens)) {
|
||||
setTokens(parsedTokens);
|
||||
setUser(parsedUser);
|
||||
} else {
|
||||
// Try to refresh tokens
|
||||
const refreshed = await refreshTokenWithStoredData(parsedTokens);
|
||||
if (!refreshed) {
|
||||
clearAuthData();
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error initializing auth:', error);
|
||||
clearAuthData();
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
checkAuth();
|
||||
initializeAuth();
|
||||
}, []);
|
||||
|
||||
const login = async (username: string, password: string): Promise<boolean> => {
|
||||
const validateTokens = async (tokens: AuthTokens): Promise<boolean> => {
|
||||
try {
|
||||
// In a real application, this would make an API call
|
||||
// For demo purposes, we'll simulate authentication
|
||||
if (username === 'admin' && password === 'hiveadmin') {
|
||||
const mockToken = 'mock-jwt-token-' + Date.now();
|
||||
const mockUser: User = {
|
||||
id: '1',
|
||||
username: 'admin',
|
||||
name: 'System Administrator',
|
||||
role: 'administrator',
|
||||
email: 'admin@hive.local'
|
||||
};
|
||||
|
||||
setToken(mockToken);
|
||||
setUser(mockUser);
|
||||
|
||||
localStorage.setItem('auth_token', mockToken);
|
||||
localStorage.setItem('user', JSON.stringify(mockUser));
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
} catch (error) {
|
||||
console.error('Login failed:', error);
|
||||
const response = await fetch(`${API_BASE_URL}/auth/me`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${tokens.access_token}`,
|
||||
},
|
||||
});
|
||||
return response.ok;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
const logout = () => {
|
||||
setUser(null);
|
||||
setToken(null);
|
||||
localStorage.removeItem('auth_token');
|
||||
localStorage.removeItem('user');
|
||||
const refreshTokenWithStoredData = async (oldTokens: AuthTokens): Promise<boolean> => {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE_URL}/auth/refresh`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
refresh_token: oldTokens.refresh_token,
|
||||
}),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
const newTokens: AuthTokens = {
|
||||
access_token: data.access_token,
|
||||
refresh_token: data.refresh_token,
|
||||
token_type: data.token_type,
|
||||
expires_in: data.expires_in,
|
||||
};
|
||||
|
||||
setTokens(newTokens);
|
||||
setUser(data.user);
|
||||
|
||||
localStorage.setItem('hive_tokens', JSON.stringify(newTokens));
|
||||
localStorage.setItem('hive_user', JSON.stringify(data.user));
|
||||
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Token refresh failed:', error);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
const value: AuthContextType = {
|
||||
const login = async (username: string, password: string): Promise<void> => {
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append('username', username);
|
||||
formData.append('password', password);
|
||||
|
||||
const response = await fetch(`${API_BASE_URL}/auth/login`, {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json();
|
||||
throw new Error(errorData.detail || 'Login failed');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
const newTokens: AuthTokens = {
|
||||
access_token: data.access_token,
|
||||
refresh_token: data.refresh_token,
|
||||
token_type: data.token_type,
|
||||
expires_in: data.expires_in,
|
||||
};
|
||||
|
||||
setTokens(newTokens);
|
||||
setUser(data.user);
|
||||
|
||||
// Store in localStorage
|
||||
localStorage.setItem('hive_tokens', JSON.stringify(newTokens));
|
||||
localStorage.setItem('hive_user', JSON.stringify(data.user));
|
||||
|
||||
} catch (error: any) {
|
||||
throw new Error(error.message || 'Login failed');
|
||||
}
|
||||
};
|
||||
|
||||
const logout = async (): Promise<void> => {
|
||||
try {
|
||||
// Call logout endpoint if we have a token
|
||||
if (tokens) {
|
||||
await fetch(`${API_BASE_URL}/auth/logout`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${tokens.access_token}`,
|
||||
},
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Logout API call failed:', error);
|
||||
} finally {
|
||||
clearAuthData();
|
||||
}
|
||||
};
|
||||
|
||||
const refreshToken = async (): Promise<boolean> => {
|
||||
if (!tokens?.refresh_token) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return await refreshTokenWithStoredData(tokens);
|
||||
};
|
||||
|
||||
const updateUser = (userData: Partial<User>): void => {
|
||||
if (user) {
|
||||
const updatedUser = { ...user, ...userData };
|
||||
setUser(updatedUser);
|
||||
localStorage.setItem('hive_user', JSON.stringify(updatedUser));
|
||||
}
|
||||
};
|
||||
|
||||
const clearAuthData = (): void => {
|
||||
setUser(null);
|
||||
setTokens(null);
|
||||
localStorage.removeItem('hive_tokens');
|
||||
localStorage.removeItem('hive_user');
|
||||
};
|
||||
|
||||
const contextValue: AuthContextType = {
|
||||
user,
|
||||
isAuthenticated: !!user && !!token,
|
||||
tokens,
|
||||
isAuthenticated,
|
||||
isLoading,
|
||||
login,
|
||||
logout,
|
||||
token
|
||||
refreshToken,
|
||||
updateUser,
|
||||
};
|
||||
|
||||
return (
|
||||
<AuthContext.Provider value={value}>
|
||||
<AuthContext.Provider value={contextValue}>
|
||||
{children}
|
||||
</AuthContext.Provider>
|
||||
);
|
||||
@@ -107,19 +231,55 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
|
||||
|
||||
export const useAuth = (): AuthContextType => {
|
||||
const context = useContext(AuthContext);
|
||||
if (!context) {
|
||||
if (context === undefined) {
|
||||
throw new Error('useAuth must be used within an AuthProvider');
|
||||
}
|
||||
return context;
|
||||
};
|
||||
|
||||
// Helper hook for protected routes
|
||||
export const useRequireAuth = () => {
|
||||
const { isAuthenticated, isLoading } = useAuth();
|
||||
|
||||
return {
|
||||
isAuthenticated,
|
||||
isLoading,
|
||||
shouldRedirect: !isLoading && !isAuthenticated
|
||||
// Hook for making authenticated API requests
|
||||
export const useAuthenticatedFetch = () => {
|
||||
const { tokens, refreshToken, logout } = useAuth();
|
||||
|
||||
const authenticatedFetch = async (url: string, options: RequestInit = {}): Promise<Response> => {
|
||||
if (!tokens) {
|
||||
throw new Error('No authentication tokens available');
|
||||
}
|
||||
|
||||
const headers = {
|
||||
'Content-Type': 'application/json',
|
||||
...options.headers,
|
||||
'Authorization': `Bearer ${tokens.access_token}`,
|
||||
};
|
||||
|
||||
let response = await fetch(url, {
|
||||
...options,
|
||||
headers,
|
||||
});
|
||||
|
||||
// If token expired, try to refresh and retry
|
||||
if (response.status === 401) {
|
||||
const refreshed = await refreshToken();
|
||||
if (refreshed) {
|
||||
// Retry with new token
|
||||
response = await fetch(url, {
|
||||
...options,
|
||||
headers: {
|
||||
...headers,
|
||||
'Authorization': `Bearer ${tokens.access_token}`,
|
||||
},
|
||||
});
|
||||
} else {
|
||||
// Refresh failed, logout user
|
||||
logout();
|
||||
throw new Error('Authentication expired');
|
||||
}
|
||||
}
|
||||
|
||||
return response;
|
||||
};
|
||||
};
|
||||
|
||||
return authenticatedFetch;
|
||||
};
|
||||
|
||||
export default AuthContext;
|
||||
Reference in New Issue
Block a user