AuthProvider.tsx

import { ReactNode, useEffect, useState } from 'react';
import { AuthContext } from '../contexts/AuthContext';
import Spinner from '../components/Spinner/Spinner';

function AuthProvider({ children }: { children: ReactNode }) {
  const [loading, setLoading] = useState(true);
  const [token, setToken] = useState(localStorage.getItem('token') ?? '');

  useEffect(() => {
    if (token) {
      // validate token
    }

    setTimeout(() => setLoading(false), 500); // Fake api timer
  }, []);

  const giveAuth = (token: string) => {
    setToken(token);
    localStorage.setItem('token', token);
  };

  const removeAuth = () => {
    setToken('');
    localStorage.removeItem('token');
  };

  if (loading) {
    return (
      <div className='full'>
        <Spinner></Spinner>
      </div>
    );
  }

  return (
    <AuthContext.Provider value={{ isAuth: !!token, giveAuth, removeAuth }}>
      {!loading && children}
    </AuthContext.Provider>
  );
}

export default AuthProvider;