React - AuthContext & Provider

demo.ts

//== src/context/AuthContext.ts ==//

import { createContext, useContext } from 'react';
import { User } from 'src/store/types/user';
import { userInitialState } from 'src/store/reducers/user';

export type AuthContextProps = {
  isLoading: boolean;
  isAuthenticated: boolean;
  user: User;
  error?: string;
  loginWithRedirect?: (loginRedirect: string) => void;
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  handleRedirectCallback: (...p: any) => any;
  isAdmin: boolean;
  isOfficer: boolean;
  isUser: boolean;
};

export const AuthContext = createContext<AuthContextProps>({
  isLoading: false,
  isAuthenticated: false,
  user: userInitialState,
  error: '',
  // eslint-disable-next-line @typescript-eslint/no-empty-function
  handleRedirectCallback: () => {},
  isAdmin: false,
  isOfficer: false,
  isUser: false,
});

export const useAuth = (): Readonly<AuthContextProps> => useContext(AuthContext);

//== src/context/AuthProvider.tsx ==//
  
import React, { FC } from 'react';
import { connect } from 'react-redux';
import { AuthContext, AuthContextProps } from 'src/context/AuthContext';
import { RootState } from '../store/reducers';
import { User, UserLoader } from '../store/types/user';
import { getUser, getUserLoader } from '../store/selectors/user';

interface AuthProviderProps {
  children?: React.ReactNode;
  user: User;
  userLoader: UserLoader;
}

const BaseAuthProvider: FC<AuthProviderProps> = ({ children, user, userLoader }) => {
  const { error, loading } = userLoader;

  const ROLES = {
    anonymous: 0,
    user: 1,
    officer: 2,
    admin: 3,
  };

  const contextConfig: AuthContextProps = {
    isLoading: loading,
    isAuthenticated: false,
    user: user,
    error: error,
    handleRedirectCallback: () => {
      // eslint-disable-next-line no-console
      console.log('REDIRECT');
    },
    isAdmin: ROLES.admin <= ROLES[user.role],
    isOfficer: ROLES.officer <= ROLES[user.role],
    isUser: ROLES.user <= ROLES[user.role],
  };

  return <AuthContext.Provider value={contextConfig}>{children}</AuthContext.Provider>;
};

export const AuthProvider: FC = connect(
  (state: RootState) => ({
    user: getUser(state),
    userLoader: getUserLoader(state),
  }),
  {}
)(BaseAuthProvider);

//== src/App.tsx ==//
  
const App: FC = () => {
  return (
    <AuthProvider>
      // ... //
    </AuthProvider>
  );
}