React Context for user authentication: "TypeError: setUser is not a function" when logging in with correct credentials

Question

I'm having trouble figuring out why I'm getting this error:

TypeError: setUser is not a function login.js:43

postLogin login.js:39

when attempting to login with correct user credentials. setUser is clearly a function because it takes from useAuth() in auth.js. I'm using React Context, session storage, Flask, and sqlite for this login process.

auth.js:

import { createContext, useContext, useState } from "react";

export const AuthContext = createContext();

export const AuthProvider = function({ user, children }) {
    const [currentUser, setCurrentUser] = useState(user);

    const setAuth = (data) => {
        sessionStorage.setItem('username', data.user.username);
        sessionStorage.setItem('isAdmin', data.user.isAdmin);
        setCurrentUser(data.user);
    }

    return (
        <AuthContext.Provider value={{ currentUser, setCurrentUser: setAuth }}>
            {children}
        </AuthContext.Provider>
    )
}

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

App.js:

import { useState, useEffect } from "react";
import { BrowserRouter as Router } from "react-router-dom";
import { AuthProvider, useAuth } from './context/auth';
import "bootstrap/dist/css/bootstrap.min.css";

/* Begin Import Components */
import NavigationBar from "./components/navbar";
import Public from "./components/public-components/public";
/* End Import Components */

function App(props) {
  const user = useAuth();

  return (
    <AuthProvider user={user}>
      <Router>
        <NavigationBar />
        <div className="container text-center">
          <Public />
        </div>
      </Router>
      </AuthProvider>
  );
}

export default App;

login.js:

import { useState } from "react";
import { Link, Redirect } from 'react-router-dom';
import { useAuth } from '../../context/auth';
import { Col, Form, Row, Button } from 'react-bootstrap';

function Login(props) {
    const [loggedIn, setLoggedIn] = useState(false);
    const [isError, setIsError] = useState(false);
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const { setUser } = useAuth();

    let referer;
    if(props.location.state !== undefined) {
        referer = props.location.state.referer;
    } else {
        referer = "/";
    }

    function postLogin() {
        const formData = new FormData();
        formData.append('email', email);
        formData.append('password', password);

        fetch('/login', {
            method: 'post',
            body: formData
        }).then(res => res.json())
        .then(data => {
            console.log('Login response data: ', data);
            if(data.wrongPassword) {
                setIsError(true);
            } else {
                setUser({username: data.user.username, isAdmin: data.user.isAdmin});
                setLoggedIn(true);
            }
        }).catch(err => {
            console.log(err);
            setIsError(true);
        });;
    }

    if(loggedIn) {
        return <Redirect to={referer} />;
    }

    return (
        <main>
            <header>
                <h2>Login</h2>
            </header>
            <section>
                <Form>
                    <Row className="justify-content-sm-center">
                        <Form.Group as={Col} sm={{ span: 6 }}>
                            <Form.Label htmlFor="email">Email</Form.Label>
                            <Form.Control
                                        controlid="email"
                                        type="email"
                                        value={email}
                                        onChange={e => {
                                            setEmail(e.target.value);
                                        }}
                                        placeholder="Enter email"
                                        autoFocus
                                        />
                        </Form.Group>
                    </Row>
                    <Row className="justify-content-sm-center">
                        <Form.Group as={Col} sm={{ span: 6 }}>
                            <Form.Label htmlFor="password">Password</Form.Label>
                            <Form.Control
                                        controlid="password"
                                        type="password"
                                        value={password}
                                        onChange={e => {
                                            setPassword(e.target.value);
                                        }}
                                        placeholder="Enter password"
                                        />
                        </Form.Group>
                    </Row>
                    <Button onClick={postLogin} variant="success">Login</Button>
                </Form>
            </section>
            <Link to="/register">Don't have an account?</Link>
            { isError &&<p>There was a problem logging in!</p> }
        </main>
    )
}

export default Login;

login route from Flask backend (api.py):

@app.route("/login", methods=['POST'])
def login():
    try:
        email = request.form['email']
        password = request.form['password']

        user = db.session.query(User.username, User.password).filter_by(email=email).first()
        user_role = db.session.query(UserRole.role).filter_by(username=user.username).first()

        if(check_password_hash(user.password, password)):
            if(user_role.role == 'Admin'):
                return {'user': {'username': user.username, 'isAdmin': True}}
            return {'user': {'username': user.username, 'isAdmin': False}}
        else:
            return {'wrongPassword':True}
    except:
        return 'Something went wrong...'

Answer 1

You named the variable: setCurrentUser not setUser see:

        <AuthContext.Provider value={{ currentUser, setCurrentUser: setAuth }}>

So there is no setUser returned from the provider