CODEWITHSUNDEEP
reactjstypescript
Red Cricket
Red Cricket

Reputation: 10470

Typescript Unhandled Rejection (TypeError): setAuthTokens is not a function

I define this in my Apps.jsx file of a React project:

... omitted for brevity ...
import {AuthContext, useAuth} from "./context/auth";


function Login (props: RouteComponentProps<TParams>) {
  ... omitted for brevity ...
  const {authTokens, setAuthTokens} = useAuth();

  function postLogin() {
        const url = 'http://localhost:8000/rest-auth/login/';
        const withCredentials = true;
        const method = 'post';
        const data = {"username": userName, "password": password};
        axios.request({url, withCredentials, data, method}).then(
            result => {
                // console.log('Login.postLogin.else result is :', result);
                if (result.status === 200) {
                    setAuthTokens(result.data);
                } else {
                    setIsError(true);
                }
            }); // .catch(e => {console.log('Login.postLogin.catch e is :', e); setIsError(true);});
  }

I get a run time error of 

Unhandled Rejection (TypeError): setAuthTokens is not a function
(anonymous function)
C:/Users/plankton/WebstormProjects/mister-neutron/src/App.tsx:93
  90 | result => {
  91 |     // console.log('Login.postLogin.else result is :', result);
  92 |     if (result.status === 200) {
> 93 |         setAuthTokens(result.data);
     | ^  94 |     } else {
  95 |         setIsError(true);
  96 |     }

useAuth is declared like so:

import { createContext, useContext } from 'react';

export const AuthContext = createContext();

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

Upvotes: 0

Views: 1358

Answers (1)

JMadelaine
JMadelaine

Reputation: 2964

Where do you add authTokens and setAuthTokens to the AuthContext?

const AuthContext = createContext()

function useAuth() {
    return useContext(AuthContext)
}

// useAuth is an empty context, so both authTokens and setAuthTokens are undefined
const { authTokens, setAuthTokens } = useAuth()

It looks like an empty context to me, hence why authTokens and setAuthTokens are undefined, and undefined is not a function which is why you're getting the error.

Try this:

export const AuthContext = createContext()

export const AuthState = ({ children }) => {
    const [authTokens, setAuthTokens] = useState([])

    const value = {
        authTokens,
        setAuthTokens,
    }

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

And instead of calling useAuth, just call useContext in your component:

const { authTokens, setAuthTokens } = useContext(AuthContext)

Upvotes: 2

Related Questions