title: I have problem with nextjs keep give login is not function how i can solve this problem
body: <p>please guys I need help the following problem show to me How i can solve it</p>
  <pre><code>TypeError: login is not a function
  </code></pre>
  <p>First of all in the index component check if user authnticated or not if yes they will go to task component if not will be still in login page and pased for login component login user data =&gt;username and password</p>
  <pre><code>const { user, login } = useAuth()
  
    console.log(login, &quot;login index&quot;);
    return (
      &lt;&gt;
        &lt;Head&gt;
  
          &lt;title&gt;Task Scheduler&lt;/title&gt;
          &lt;link rel=&quot;icon&quot; href=&quot;/favicon.ico&quot; /&gt;
        &lt;/Head&gt;
       
        {user ? (
  
          &lt;Task user={user} /&gt;
        ) : (
          &lt;Login login={login} /&gt;
        )}
        
        &lt;Footer /&gt;
  
  
  
      &lt;/&gt;
  
    )
  </code></pre>
  <p>in the Login component the user it take login data were i passed it before from index and I try to console login here give me undifiend</p>
  <pre><code>export default function Login({login}) {
    // const { user, login } = useAuth()
  
    let onCreate = (e) =&gt; {
      e.preventDefault()
  
      let user = {
        username: e.target.username.value,
        password: e.target.password.value,
      }
      console.log(user);
      login(user.username, user.password)
    }
  </code></pre>
  <p>Auth hook with login user function</p>
  <pre><code>export function useAuth() {
      const auth = useContext(AuthContext);
      if (!auth) throw new Error('You forgot AuthProvider!');
      return auth;}
  
  export function AuthProvider(props) {
  
      const [state, setState] = useState({
          tokens: null,
          user: null,
          login,
          logout,
      });
  useEffect(()=&gt;{
      const save_auth=JSON.parse(localStorage.getItem(&quot;userAuth&quot;))
      
      if (save_auth){
          const decodedAccess = jwt.decode(save_auth.access);
          const newState = {
              tokens: save_auth.access,
              user: {
                  username: decodedAccess.username,
                  email: decodedAccess.email,
                  id: decodedAccess.user_id
              },
          }
          console.log(save_auth);
          setState(prevState =&gt; ({ ...prevState, ...newState }));
              }
          },[])
          
      async function login(username, password) {
          console.log(tokenUrl);    
          const response = await axios.post(tokenUrl, { username, password });
          const decodedAccess = jwt.decode(response.data.access);
  
  
          const newState = {
              tokens: response.data,
              user: {
                  username: decodedAccess.username,
                  email: decodedAccess.email,
                  id: decodedAccess.user_id
              },
          }
          localStorage.setItem(&quot;userAuth&quot;,JSON.stringify(response.data))
          console.log(newState,&quot;Auth login&quot;);
  
          setState(prevState =&gt; ({ ...prevState, ...newState }));
      }
  </code></pre>