-1

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}/>
    )



}
3
  • 1
    The first question would be. Why are they in a context to begin with?
    – Bart
    Jan 19, 2022 at 19:54
  • @Bart Because, as you can see, they alter the state of the ContextProvider (AuthProvider); thus, they have to be defined inside of AuthProvider and thus they have to be in AuthContext. Jan 19, 2022 at 19:56
  • 1
    In your example that isn't obvious. You create a context but aren't using the contexts provider but your create your own to wrap some authentication logic. So from my perspective it's confusing.
    – Bart
    Jan 19, 2022 at 20:08

2 Answers 2

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.

0
  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
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.