What to do when forced to initialize functions in createContext

Question

What do I do in this situation? Do I just initialize dummy functions in place of signup, login, and logout?

It seems so unnecessary since they are defined in AuthProvider.

type AuthContext = {
    username: null | string,
    isAuthenticated: boolean,

    signup: (newUsername: string, email: string, password: string, onSuccessCallback: any) => (string | null),
    login: (oldUsername: string, password: string, onSuccessCallback: any) => (string | null),
    logout: () => void,
}

const AuthContext = createContext<AuthContext>({});  <------- ERROR, cant be empty "{}", I have to initialize it in accordance to "type AuthContext". 


const AuthProvider = ({ children }) => {
    const [username, setUsername] = useState<null | string>(null);
    const [authenticationStatus, setAuthenticationStatus] = useState<Values<typeof AuthEnum>>(AuthEnum.PENDING);


   ...

    const logout = async () => {
        await API.logout()
        setUsername(null);
        setIsAuthenticated(AuthEnum.UNAUTHENTICATED);
    }

   ...

   return (
           <AuthContext.Provider
                value={{
                       username: username,
                        authenticationStatus: authenticationStatus,
                        logout: logout,
                    }}
                    children={children}/>
    )



}

Answer 1

Why do you even need this?

const AuthContext = createContext<AuthContext>({});  <------- ERROR, cant be empty "{}", I have to initialize it in accordance to "type AuthContext". 

You can just provide just

const AuthContext = createContext<AuthContext>();  

and it will work. You need to provide the values in the provider, not essentially in the createContext() hook.

Answer 2

1. Revise your type. Maybe you can get a way with a simpler context type, one which is a lot simpler to fake.

   For example, does signup, login, logout really need to be members of the object? Those are actions that act on some state, I get that these function may depend on something in the context but why not pass the context to these functions instead of making the functions members of the context?

2. Use a custom hook to check context initialization.

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

export function useAuthContext() {
  const c = useContext(AuthContext)
  if (c == null) {
    throw new Error()
  }
  return c
}