How should fix createContext error in Typescript (React TS Auth with Contexts)

Question

How should I fix the problem with createContext? It expects some arguments, but I can't see what arguments. I tried giving it some dummy currentUser: undefined variables and it kinda works, but I can't figure out what should I do with other defaultValues like login, signup etc. It's based on JS Auth tutorial, and in JS it works, but I would like it to work on TSX. Thanks in advance, code below

AuthContext.tsx

const AuthContext = createContext()

export function useAuth() {
    return useContext(AuthContext);
}

export default function AuthProvider( {children}:any ) {

    const [currentUser, setCurrentUser] = useState();

    function signup(email: string, password: string) {
        return supabase.auth.signUp({
            email: email,
            password: password,
        })
    }

    function login(email: string, password: string) {
      return supabase.auth.signInWithPassword({
        email: email,
        password: password,
    })
    }

    function logout() {
      return supabase.auth.signOut()
    }

    function recoverPassword(email: string) {
      return supabase.auth.resetPasswordForEmail(email);
    }

    function update(data: any) {
      return supabase.auth.updateUser(data)
    }

    const value = {
        currentUser, login, signup, logout, recoverPassword, update
    }
    return (
        <AuthContext.Provider value={value}>
            {children}
        </AuthContext.Provider>
    );
}

what is the error you are getting? – Asad Ashraf Sep 28 '22 at 11:32 — Asad Ashraf, Sep 28 '22 at 11:32

score 0 · Accepted Answer · answered Sep 28 '22 at 11:54

0

Create an interface that describes the data you want to store in the context:

interface AuthContextType {
    currentUser: IUser;
    login: (email: string, password: string) => ......,
    signup: (email: string, password: string) => ....,
    logout: () => void,
    recoverPassword: (email: string) => ....,
    update: (data: any) => ....
}

Create an object that describes the initial state:

const initialState = {
    currentUser: null,
    login: (email: string, ....) => console.error('No AuthProvider supplied. Wrap this component with a AuthProvider to use this functionality.'),
    ...
};

Then create the context:

const AuthContext = createContext<AuthContextType>(initialState);

answered Sep 28 '22 at 11:54

Burningwaflz

39
4

Okay, almost works Now I call this function (let's say "login") in some component and it is called as `const { error, data } = await login(email, password)` which gives me an error that "TS2339: Property 'error' does not exist on type 'void'." => What should I change in order to manage errors in this component? – IVOBOT Sep 28 '22 at 12:29
That error indicates the the value that's being returned by `login` does not include an `error` property. You can check the value returned by `login` first by logging it: `console.log(await login(email, password))` – Burningwaflz Sep 28 '22 at 12:37
how to describe an promise function in initialState? for example login function will return a promise of – Manspof Dec 22 '22 at 20:17
@Manspof Something like `login: (email: string, password: string) => Promise.reject('My custom error message')` – Burningwaflz Jan 23 '23 at 13:56

score -1 · Answer 2 · answered Sep 28 '22 at 11:35

-1

You can either type createContext with YourInterface | null as in

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

or type cast an empty object as in

const AuthContext = createContext({} as YourInterface)

answered Sep 28 '22 at 11:35

prohit

609
1
6
18

How should fix createContext error in Typescript (React TS Auth with Contexts)

2 Answers2