Error: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'signin') in AuthService TypeScript

Issue

I'm getting error: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'signin')

The error always pops up in the first function of the login page, the values ​​are being filled in correctly, but the error always pops up as in printscrean at the end of this question

my login page:

import { Link, useNavigate } from "react-router-dom";
import { At, LockLaminated } from "phosphor-react";
import { AuthContext } from "../contexts/Auth/AuthContext";
import { Loading } from "../components/Loading";
import favicon from "../assets/favicon.ico";

export const Login = () => {
  const auth = useContext(AuthContext);
  const navigate = useNavigate();

  const [isRotate, setIsRotate] = useState(false);
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [isLogin, setIsLogin] = useState(false);

  const handleEmailInput = (event: ChangeEvent<HTMLInputElement>) => {
    setEmail(event.target.value);
  };

  const handlePasswordInput = (event: ChangeEvent<HTMLInputElement>) => {
    setPassword(event.target.value);
  };

  const handleLogin = async () => {
    if (email && password) {
      const isLogged = await auth.signin(email, password);
      if (isLogged) {
        navigate("/dashboard");
      } else {
        alert("not work");
      }
    }
  };

  return (....)

my AuthContext:

import { createContext } from "react";
import { User } from "../../types/User";

export type AuthContextType = {
  user: User | null;
  signin: (email: string, password: string) => Promise<boolean>;
  signout: () => void;
};

export const AuthContext = createContext<AuthContextType>();

my AuthProvider

import { useApi } from "../../hooks/useApi";
import { User } from "../../types/User";
import { AuthContext } from "./AuthContext";

export const AuthProvider = ({ children }: { children: JSX.Element }) => {
  const [user, setUser] = useState<User | null>(null);
  const api = useApi();

  const signin = async (email: string, password: string) => {
    const data = await api.signin(email, password);
    if (data.user && data.token) {
      setUser(data.user);
      setToken(data.token);
      return true;
    }
    return false;
  };
  const setToken = (token: string) => {
    localStorage.setItem("authToken", token);
  };

  return (
    <AuthContext.Provider value={{ user, signin, signout }}>
      {children}
    </AuthContext.Provider>
  );
};

error location

is there any way this works? looking up for your help, thanks

Solution

You need to add initial values to your context for it to be considered defined.

const initialState: AuthContextType = {
  user: null,
  signin: () => Promise.resolve(true),
  signout: () => null,
}

export const AuthContext = createContext<AuthContextType>(initialState)

Answered By - dlarroder