@@ -296,6 +301,53 @@ export function LoginScreen({ onSuccess }: LoginScreenProps) {
+ {/* SSO Buttons */}
+ {ssoEnabled && ssoProviders.length > 0 && (
+
diff --git a/spotizerr-ui/src/contexts/AuthProvider.tsx b/spotizerr-ui/src/contexts/AuthProvider.tsx
index 5b22c8a..36bfd62 100644
--- a/spotizerr-ui/src/contexts/AuthProvider.tsx
+++ b/spotizerr-ui/src/contexts/AuthProvider.tsx
@@ -6,7 +6,9 @@ import type {
User,
LoginRequest,
RegisterRequest,
- AuthError
+ AuthError,
+ SSOProvider,
+ SSOStatusResponse
} from "@/types/auth";
interface AuthProviderProps {
@@ -18,6 +20,8 @@ export function AuthProvider({ children }: AuthProviderProps) {
const [isLoading, setIsLoading] = useState(true);
const [authEnabled, setAuthEnabled] = useState(false);
const [registrationEnabled, setRegistrationEnabled] = useState(true);
+ const [ssoEnabled, setSSOEnabled] = useState(false);
+ const [ssoProviders, setSSOProviders] = useState([]);
const [isInitialized, setIsInitialized] = useState(false);
// Guard to prevent multiple simultaneous initializations
@@ -25,6 +29,33 @@ export function AuthProvider({ children }: AuthProviderProps) {
const isAuthenticated = user !== null;
+ // Check for SSO token in URL (OAuth callback)
+ const checkForSSOToken = useCallback(async () => {
+ const urlParams = new URLSearchParams(window.location.search);
+ const token = urlParams.get('token');
+
+ if (token) {
+ console.log("SSO token found in URL, processing...");
+ try {
+ const user = await authApiClient.handleSSOToken(token, true); // Default to remember
+ setUser(user);
+
+ // Remove token from URL
+ const newUrl = window.location.pathname;
+ window.history.replaceState({}, document.title, newUrl);
+
+ console.log("SSO login successful:", user.username);
+ return true;
+ } catch (error) {
+ console.error("SSO token processing failed:", error);
+ // Remove token from URL even if processing failed
+ const newUrl = window.location.pathname;
+ window.history.replaceState({}, document.title, newUrl);
+ }
+ }
+ return false;
+ }, []);
+
// Initialize authentication on app start
const initializeAuth = useCallback(async () => {
// Prevent multiple simultaneous initializations
@@ -38,6 +69,30 @@ export function AuthProvider({ children }: AuthProviderProps) {
setIsLoading(true);
console.log("Initializing authentication...");
+ // First, check for SSO token in URL
+ const ssoTokenProcessed = await checkForSSOToken();
+ if (ssoTokenProcessed) {
+ // SSO token was processed, still need to get auth status for SSO info
+ const status = await authApiClient.checkAuthStatus();
+ setAuthEnabled(status.auth_enabled);
+ setRegistrationEnabled(status.registration_enabled);
+ setSSOEnabled(status.sso_enabled || false);
+
+ // Get SSO providers if enabled
+ if (status.sso_enabled) {
+ try {
+ const ssoStatus = await authApiClient.getSSOStatus();
+ setSSOProviders(ssoStatus.providers);
+ } catch (error) {
+ console.warn("Failed to get SSO status:", error);
+ setSSOProviders([]);
+ }
+ }
+
+ setIsInitialized(true);
+ return;
+ }
+
// Check if we have a stored token first, before making any API calls
const hasStoredToken = authApiClient.getToken() !== null;
console.log("Has stored token:", hasStoredToken);
@@ -51,9 +106,23 @@ export function AuthProvider({ children }: AuthProviderProps) {
// Token is valid and we have user data
setAuthEnabled(tokenValidation.userData.auth_enabled);
setRegistrationEnabled(tokenValidation.userData.registration_enabled);
+ setSSOEnabled(tokenValidation.userData.sso_enabled || false);
+
if (tokenValidation.userData.authenticated && tokenValidation.userData.user) {
setUser(tokenValidation.userData.user);
console.log("Session restored for user:", tokenValidation.userData.user.username);
+
+ // Get SSO providers if enabled
+ if (tokenValidation.userData.sso_enabled) {
+ try {
+ const ssoStatus = await authApiClient.getSSOStatus();
+ setSSOProviders(ssoStatus.providers);
+ } catch (error) {
+ console.warn("Failed to get SSO status:", error);
+ setSSOProviders([]);
+ }
+ }
+
setIsInitialized(true);
return;
} else {
@@ -71,6 +140,18 @@ export function AuthProvider({ children }: AuthProviderProps) {
const status = await authApiClient.checkAuthStatus();
setAuthEnabled(status.auth_enabled);
setRegistrationEnabled(status.registration_enabled);
+ setSSOEnabled(status.sso_enabled || false);
+
+ // Get SSO providers if enabled
+ if (status.sso_enabled) {
+ try {
+ const ssoStatus = await authApiClient.getSSOStatus();
+ setSSOProviders(ssoStatus.providers);
+ } catch (error) {
+ console.warn("Failed to get SSO status:", error);
+ setSSOProviders([]);
+ }
+ }
if (!status.auth_enabled) {
console.log("Authentication is disabled");
@@ -99,7 +180,7 @@ export function AuthProvider({ children }: AuthProviderProps) {
setIsInitialized(true);
console.log("Authentication initialization complete");
}
- }, []);
+ }, [checkForSSOToken]);
// Initialize on mount
useEffect(() => {
@@ -118,6 +199,18 @@ export function AuthProvider({ children }: AuthProviderProps) {
setAuthEnabled(status.auth_enabled);
setRegistrationEnabled(status.registration_enabled);
+ setSSOEnabled(status.sso_enabled || false);
+
+ // Get SSO providers if enabled
+ if (status.sso_enabled) {
+ try {
+ const ssoStatus = await authApiClient.getSSOStatus();
+ setSSOProviders(ssoStatus.providers);
+ } catch (error) {
+ console.warn("Failed to get SSO status:", error);
+ setSSOProviders([]);
+ }
+ }
if (status.auth_enabled && status.authenticated && status.user) {
setUser(status.user);
@@ -205,6 +298,21 @@ export function AuthProvider({ children }: AuthProviderProps) {
return authApiClient.isRemembered();
}, []);
+ // SSO methods
+ const getSSOStatus = useCallback(async (): Promise => {
+ return await authApiClient.getSSOStatus();
+ }, []);
+
+ const handleSSOCallback = useCallback(async (token: string): Promise => {
+ try {
+ const user = await authApiClient.handleSSOToken(token, true);
+ setUser(user);
+ } catch (error) {
+ console.error("SSO callback failed:", error);
+ throw error;
+ }
+ }, []);
+
// Listen for storage changes (logout in another tab)
useEffect(() => {
const handleStorageChange = (e: StorageEvent) => {
@@ -227,6 +335,8 @@ export function AuthProvider({ children }: AuthProviderProps) {
isLoading,
authEnabled,
registrationEnabled,
+ ssoEnabled,
+ ssoProviders,
// Actions
login,
@@ -234,6 +344,10 @@ export function AuthProvider({ children }: AuthProviderProps) {
logout,
checkAuthStatus,
+ // SSO Actions
+ getSSOStatus,
+ handleSSOCallback,
+
// Token management
getToken,
setToken,
diff --git a/spotizerr-ui/src/lib/api-client.ts b/spotizerr-ui/src/lib/api-client.ts
index 90f6f35..b708911 100644
--- a/spotizerr-ui/src/lib/api-client.ts
+++ b/spotizerr-ui/src/lib/api-client.ts
@@ -7,7 +7,8 @@ import type {
LoginResponse,
AuthStatusResponse,
User,
- CreateUserRequest
+ CreateUserRequest,
+ SSOStatusResponse
} from "@/types/auth";
class AuthApiClient {
@@ -300,6 +301,35 @@ class AuthApiClient {
return response.data;
}
+ // SSO methods
+ async getSSOStatus(): Promise {
+ const response = await this.apiClient.get("/auth/sso/status");
+ return response.data;
+ }
+
+ // Handle SSO callback token (when user returns from OAuth provider)
+ async handleSSOToken(token: string, rememberMe: boolean = true): Promise {
+ // Set the token and get user info
+ this.setToken(token, rememberMe);
+
+ // Validate the token and get user data
+ const tokenValidation = await this.validateStoredToken();
+ if (tokenValidation.isValid && tokenValidation.userData?.user) {
+ toast.success("SSO Login Successful", {
+ description: `Welcome, ${tokenValidation.userData.user.username}!`,
+ });
+ return tokenValidation.userData.user;
+ } else {
+ this.clearToken();
+ throw new Error("Invalid SSO token");
+ }
+ }
+
+ // Get SSO login URLs (these redirect to OAuth provider)
+ getSSOLoginUrl(provider: string): string {
+ return `/api/auth/sso/login/${provider}`;
+ }
+
// Expose the underlying axios instance for other API calls
get client() {
return this.apiClient;
diff --git a/spotizerr-ui/src/lib/theme.ts b/spotizerr-ui/src/lib/theme.ts
new file mode 100644
index 0000000..c41e4bd
--- /dev/null
+++ b/spotizerr-ui/src/lib/theme.ts
@@ -0,0 +1,71 @@
+// Theme management functions
+export function getTheme(): 'light' | 'dark' | 'system' {
+ return (localStorage.getItem('theme') as 'light' | 'dark' | 'system') || 'system';
+}
+
+export function setTheme(theme: 'light' | 'dark' | 'system') {
+ localStorage.setItem('theme', theme);
+ applyTheme(theme);
+}
+
+export function toggleTheme() {
+ const currentTheme = getTheme();
+ let nextTheme: 'light' | 'dark' | 'system';
+
+ switch (currentTheme) {
+ case 'light':
+ nextTheme = 'dark';
+ break;
+ case 'dark':
+ nextTheme = 'system';
+ break;
+ default:
+ nextTheme = 'light';
+ break;
+ }
+
+ setTheme(nextTheme);
+ return nextTheme;
+}
+
+function applyTheme(theme: 'light' | 'dark' | 'system') {
+ const root = document.documentElement;
+
+ if (theme === 'system') {
+ // Use system preference
+ const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ if (prefersDark) {
+ root.classList.add('dark');
+ } else {
+ root.classList.remove('dark');
+ }
+ } else if (theme === 'dark') {
+ root.classList.add('dark');
+ } else {
+ root.classList.remove('dark');
+ }
+}
+
+// Dark mode detection and setup
+export function setupDarkMode() {
+ // First, ensure we start with a clean slate
+ document.documentElement.classList.remove('dark');
+
+ const savedTheme = getTheme();
+ applyTheme(savedTheme);
+
+ // Listen for system theme changes (only when using system theme)
+ const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+ const handleSystemThemeChange = (e: MediaQueryListEvent) => {
+ // Only respond to system changes when we're in system mode
+ if (getTheme() === 'system') {
+ if (e.matches) {
+ document.documentElement.classList.add('dark');
+ } else {
+ document.documentElement.classList.remove('dark');
+ }
+ }
+ };
+
+ mediaQuery.addEventListener('change', handleSystemThemeChange);
+}
\ No newline at end of file
diff --git a/spotizerr-ui/src/main.tsx b/spotizerr-ui/src/main.tsx
index 43feb38..e669b74 100644
--- a/spotizerr-ui/src/main.tsx
+++ b/spotizerr-ui/src/main.tsx
@@ -4,80 +4,9 @@ import { RouterProvider } from "@tanstack/react-router";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { router } from "./router";
import { AuthProvider } from "./contexts/AuthProvider";
+import { setupDarkMode } from "./lib/theme";
import "./index.css";
-// Theme management functions
-export function getTheme(): 'light' | 'dark' | 'system' {
- return (localStorage.getItem('theme') as 'light' | 'dark' | 'system') || 'system';
-}
-
-export function setTheme(theme: 'light' | 'dark' | 'system') {
- localStorage.setItem('theme', theme);
- applyTheme(theme);
-}
-
-export function toggleTheme() {
- const currentTheme = getTheme();
- let nextTheme: 'light' | 'dark' | 'system';
-
- switch (currentTheme) {
- case 'light':
- nextTheme = 'dark';
- break;
- case 'dark':
- nextTheme = 'system';
- break;
- default:
- nextTheme = 'light';
- break;
- }
-
- setTheme(nextTheme);
- return nextTheme;
-}
-
-function applyTheme(theme: 'light' | 'dark' | 'system') {
- const root = document.documentElement;
-
- if (theme === 'system') {
- // Use system preference
- const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
- if (prefersDark) {
- root.classList.add('dark');
- } else {
- root.classList.remove('dark');
- }
- } else if (theme === 'dark') {
- root.classList.add('dark');
- } else {
- root.classList.remove('dark');
- }
-}
-
-// Dark mode detection and setup
-function setupDarkMode() {
- // First, ensure we start with a clean slate
- document.documentElement.classList.remove('dark');
-
- const savedTheme = getTheme();
- applyTheme(savedTheme);
-
- // Listen for system theme changes (only when using system theme)
- const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
- const handleSystemThemeChange = (e: MediaQueryListEvent) => {
- // Only respond to system changes when we're in system mode
- if (getTheme() === 'system') {
- if (e.matches) {
- document.documentElement.classList.add('dark');
- } else {
- document.documentElement.classList.remove('dark');
- }
- }
- };
-
- mediaQuery.addEventListener('change', handleSystemThemeChange);
-}
-
// Initialize dark mode
setupDarkMode();
diff --git a/spotizerr-ui/src/routes/root.tsx b/spotizerr-ui/src/routes/root.tsx
index c168a49..9ba8f8e 100644
--- a/spotizerr-ui/src/routes/root.tsx
+++ b/spotizerr-ui/src/routes/root.tsx
@@ -6,7 +6,7 @@ import { Queue } from "@/components/Queue";
import { ProtectedRoute } from "@/components/auth/ProtectedRoute";
import { UserMenu } from "@/components/auth/UserMenu";
import { useContext, useState, useEffect } from "react";
-import { getTheme, toggleTheme } from "@/main";
+import { getTheme, toggleTheme } from "@/lib/theme";
function ThemeToggle() {
const [currentTheme, setCurrentTheme] = useState<'light' | 'dark' | 'system'>('system');
diff --git a/spotizerr-ui/src/types/auth.ts b/spotizerr-ui/src/types/auth.ts
index 48ffdd3..b098595 100644
--- a/spotizerr-ui/src/types/auth.ts
+++ b/spotizerr-ui/src/types/auth.ts
@@ -5,6 +5,8 @@ export interface User {
role: "user" | "admin";
created_at: string;
last_login?: string;
+ sso_provider?: string;
+ is_sso_user?: boolean;
}
export interface LoginRequest {
@@ -29,6 +31,20 @@ export interface AuthStatusResponse {
authenticated: boolean;
user?: User;
registration_enabled: boolean;
+ sso_enabled?: boolean;
+ sso_providers?: string[];
+}
+
+export interface SSOProvider {
+ name: string;
+ display_name: string;
+ enabled: boolean;
+ login_url?: string;
+}
+
+export interface SSOStatusResponse {
+ sso_enabled: boolean;
+ providers: SSOProvider[];
}
export interface CreateUserRequest {
@@ -45,6 +61,8 @@ export interface AuthContextType {
isLoading: boolean;
authEnabled: boolean;
registrationEnabled: boolean;
+ ssoEnabled: boolean;
+ ssoProviders: SSOProvider[];
// Actions
login: (credentials: LoginRequest, rememberMe?: boolean) => Promise;
@@ -52,6 +70,10 @@ export interface AuthContextType {
logout: () => void;
checkAuthStatus: () => Promise;
+ // SSO Actions
+ getSSOStatus: () => Promise;
+ handleSSOCallback: (token: string) => Promise;
+
// Token management
getToken: () => string | null;
setToken: (token: string | null, rememberMe?: boolean) => void;