client/src/contexts/AuthContext.tsx - develop - kan64/spreadsheet-lab

client/src/contexts/AuthContext.tsx
73 строки2 KB
Anton Kravchenkov
feat: Add avatar color
04 мар 2026, 23:25
04 мар 2026, 23:25f05c921
import React, { createContext, useContext, useState, useCallback, useEffect } from 'react';

interface AuthState {
  token: string | null;
  username: string | null;
  avatarColor: string | null;
}

interface AuthContextValue {
  isAuthenticated: boolean;
  username: string | null;
  avatarColor: string | null;
  login: (token: string, username: string, avatarColor?: string) => void;
  logout: () => void;
}

const AuthContext = createContext<AuthContextValue | null>(null);

export const useAuth = (): AuthContextValue => {
  const ctx = useContext(AuthContext);
  if (!ctx) throw new Error('useAuth must be used within AuthProvider');
  return ctx;
};

export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [auth, setAuth] = useState<AuthState>(() => ({
    token: localStorage.getItem('auth_token'),
    username: localStorage.getItem('auth_username'),
    avatarColor: localStorage.getItem('auth_avatar_color'),
  }));

  const login = useCallback((token: string, username: string, avatarColor?: string) => {
    localStorage.setItem('auth_token', token);
    localStorage.setItem('auth_username', username);
    if (avatarColor) localStorage.setItem('auth_avatar_color', avatarColor);
    setAuth({ token, username, avatarColor: avatarColor ?? null });
  }, []);

  const logout = useCallback(() => {
    localStorage.removeItem('auth_token');
    localStorage.removeItem('auth_username');
    localStorage.removeItem('auth_avatar_color');
    setAuth({ token: null, username: null, avatarColor: null });
  }, []);

  useEffect(() => {
    const handler = (e: StorageEvent) => {
      if (e.key === 'auth_token') {
        setAuth({
          token: e.newValue,
          username: localStorage.getItem('auth_username'),
          avatarColor: localStorage.getItem('auth_avatar_color'),
        });
      }
    };
    window.addEventListener('storage', handler);
    return () => window.removeEventListener('storage', handler);
  }, []);

  return (
    <AuthContext.Provider
      value={{
        isAuthenticated: !!auth.token,
        username: auth.username,
        avatarColor: auth.avatarColor,
        login,
        logout,
      }}
    >
      {children}
    </AuthContext.Provider>
  );
};