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
– Asad Ashraf

2022-09-28 11:32:23 +00:00
Commented Sep 28, 2022 at 11:32 — Asad Ashraf
– Asad Ashraf, Commented Sep 28, 2022 at 11:32

Burningwaflz · Accepted Answer · 2022-09-28 11:54:01Z

1

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, 2022 at 11:54

Burningwaflz

594 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

IVOBOT Over a year ago

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?

Burningwaflz Over a year ago

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

Manspof Over a year ago

how to describe an promise function in initialState? for example login function will return a promise of <string>

Burningwaflz Over a year ago

@Manspof Something like login: (email: string, password: string) => Promise.reject('My custom error message')

prohit · Accepted Answer · 2022-09-28 11:35:38Z

-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, 2022 at 11:35

prohit

7371 gold badge7 silver badges20 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related