hello I''m trying to use Auth in login page for chicking if the user is logged in or not, the front end keep sending "getAuth is not a function at handleSubmit", the backEnd working as it supposed to.

**login.js**

```html
import { useRef, useState, useEffect } from 'react';
import axios from 'axios'
import UseAuth from '../hooks/useAuth';
import {Link , useNavigate , useLocation} from 'react-router-dom'

const Login = () => {
    const {setAuth}= UseAuth()

    const navigate = useNavigate()
    const location = useLocation()
    // console.log(location.state.from.pathname)
    const from = location.state?.from?.pathname || '/';

    const userRef = useRef();
    const errRef = useRef();

    const [user, setUser] = useState('');
    const [pwd, setPwd] = useState('');
    const [errMsg, setErrMsg] = useState('');

    useEffect(() => {
        userRef.current.focus();
    }, [])

    useEffect(() => {
        setErrMsg('');
    }, [user, pwd])

    const handleSubmit = async (e) => {
        e.preventDefault();

        try {
            const response = await axios.post('http://localhost:4000/login',
                JSON.stringify({ user, pwd }),
                {
                    headers: { 'Content-Type': 'application/json' },
                    withCredentials: true
                }
            );
            const accessToken = response?.data?.accessToken;
            const roles = response?.data?.roles;  
            setAuth({ user, pwd, roles, accessToken });
            setUser('');
            setPwd('');
            navigate(from, {replace:true})
        } catch (err) {
            console.log(err)
            if (!err?.response) {
                setErrMsg('No Server Response');
            } else if (err.response?.status === 400) {
                setErrMsg('Missing Username or Password');
            } else if (err.response?.status === 401) {
                setErrMsg('Unauthorized');
            } else {
                setErrMsg('Login Failed');
            }
            errRef.current.focus();
        }
    }

    return (
        <>

                <section>
                    <p ref={errRef} className={errMsg ? "errmsg" : "offscreen"} aria-live="assertive">{errMsg}</p>
                    <h1>Sign In</h1>
                    <form onSubmit={handleSubmit}>
                        <label htmlFor="username">Username:</label>
                        <input
                            type="text"
                            id="username"
                            ref={userRef}
                            autoComplete="off"
                            onChange={(e) => setUser(e.target.value)}
                            value={user}
                            required
                        />

                        <label htmlFor="password">Password:</label>
                        <input
                            type="password"
                            id="password"
                            onChange={(e) => setPwd(e.target.value)}
                            value={pwd}
                            required
                        />
                        <button>Sign In</button>
                    </form>
                    <p>
                        Need an Account?<br />
                        <Link to ={'/register'} className="line">
                            {/*put router link here*/}
                            Sign Up
                        </Link>
                    </p>
                </section>

        </>
    )
}

export default Login
```

**authProvider.js**

this function is to store the data so I can use it later

```html
import { createContext, useState } from "react";

const AuthContext = createContext({});

export const AuthProvider = ({ children }) => {
    const [auth, setAuth] = useState({});

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

export default AuthContext;
```

**useAuth.js hook**

I use this function in other pages to pass the data to the **authProvider.js**  

```html
import { useContext } from "react";
import AuthContext from "../context/authProvider";

const UseAuth = () => {
    return useContext(AuthContext);
}

export default UseAuth;
```