title: Local storage token Problems
body: <p>So this problem I am facing for quite some time. Basically Registering user work to some extent. This is what is happening, upon the user being created and me getting the Auth token displayed in the dev-tools/Application and me being pushed to the home as I should.</p>
  <p>When I refresh the page I get this error <code>× Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://reactjs.org/link/crossorigin-error for more information.</code> I can fix this by clearing the localStorage. So if every time a new user is created, and if it wants to refresh the page, I will have to clear local storage every time. Which is totally not convenient.</p>
  <p>There is another error, The logout handler is bugging, when I press the logout button it is displaying this error <code>TypeError: Cannot read property 'push' of undefined</code> and it pointing out the error is located in the UserContext. I would really appreciate some help really.</p>
  <p>User Context</p>
  <pre><code>import React from &quot;react&quot;;
  import { useHistory } from &quot;react-router-dom&quot;
  const UserContext = React.createContext();
  
  function getUserFromLocalStorage() {
      return localStorage.getItem(&quot;authToken&quot;)
        ? JSON.parse(localStorage.getItem(&quot;authToken&quot;))
        : { username: null, token: null };
    }
  
  function UserProvider({ children }) {
    const [user, setUser] = React.useState(getUserFromLocalStorage());
    const routerHistory = useHistory()
    const logoutHandler = () =&gt;{
      localStorage.removeItem(&quot;authToken&quot;);
      setUser(user);
      routerHistory.push(&quot;/&quot;)
    }
    return (
      &lt;UserContext.Provider
        value={{ user, setUser, logoutHandler  }}
      &gt;
        {children}
      &lt;/UserContext.Provider&gt;
    );
  }
  
  export { UserContext, UserProvider };
  
  </code></pre>
  <p>Login</p>
  <pre><code>import React, { useState, } from &quot;react&quot;;
  import { useHistory } from &quot;react-router-dom&quot;
  import axios from &quot;axios&quot;;
  import { Link } from &quot;react-router-dom&quot;;
  import &quot;./Signin.css&quot;;
  import { UserContext } from &quot;../../context/user&quot;;
  
  
  const Login = () =&gt; {
    const { user, setUser } = React.useContext(UserContext);
    const [email, setEmail] = useState(&quot;&quot;);
    const [password, setPassword] = useState(&quot;&quot;);
    const [error, setError] = useState(&quot;&quot;);
    
    const history = useHistory()
    
  
    const loginHandler = async (e) =&gt; {
      e.preventDefault();
      
      const config = {
        header: {
          &quot;Content-Type&quot;: &quot;application/json&quot;,
        },
      };
      try {
        const { data } = await axios.post(
          &quot;http://localhost:5000/api/auth/login&quot;,
          { email, password },
          config
        );
        user.authToken = data.token;
        setUser(user)
        history.push(&quot;/&quot;);
      } catch (error) {
        if (error.response) {
          setError(error.response.data.error);
        }
        setTimeout(() =&gt; {
           setError(&quot;&quot;);
        }, 5000);
      }
    };
  
    return (
      &lt;div className=&quot;signin&quot;&gt;
            &lt;Link to='/'&gt;
              &lt;img src='/audible/logo.png' /&gt;
            &lt;/Link&gt;  
        &lt;form onSubmit={loginHandler} className=&quot;form__container&quot;&gt;
          &lt;h3&gt;Sign in with your Amazon account&lt;/h3&gt;
          {error &amp;&amp; &lt;span className=&quot;error__message&quot;&gt;{error}&lt;/span&gt;}
            &lt;span className='labels'&gt;Email &lt;/span&gt;
            &lt;input
             className=&quot;input__field&quot;
              type=&quot;email&quot;
              required
              id=&quot;email&quot;
              onChange={(e) =&gt; setEmail(e.target.value)}
              value={email}
              tabIndex={1}
            /&gt;
            &lt;span className='signin__forgot'&gt;Password{&quot; &quot;}
              &lt;Link className='links' to=&quot;/forgotpassword&quot; &gt;
                Forgot Password?
              &lt;/Link&gt;
           &lt;/span&gt; 
            &lt;input
              className=&quot;input__field&quot;
              type=&quot;password&quot;
              required
              id=&quot;password&quot;
              autoComplete=&quot;true&quot;
              onChange={(e) =&gt; setPassword(e.target.value)}
              value={password}
              tabIndex={2}
            /&gt;
          &lt;button type=&quot;submit&quot; className=&quot;signin__btn&quot;&gt;
            Sign In
          &lt;/button&gt;
           &lt;span className='new__sign'&gt;New to Amazon? &lt;/span&gt;
           &lt;Link to=&quot;/register&quot;&gt; 
            &lt;button className='signin__register'&gt;
            Create your amazon account
            &lt;/button&gt;
          &lt;/Link&gt;
         
        &lt;/form&gt;
      &lt;/div&gt;
    );
  };
  
  export default Login;
  </code></pre>
  <p>Register</p>
  <pre><code>import { useState, } from &quot;react&quot;;
  import axios from &quot;axios&quot;;
  import { Link  } from &quot;react-router-dom&quot;;
  import { useHistory } from &quot;react-router-dom&quot;
  
  const Register = () =&gt; {
    const [username, setUsername] = useState(&quot;&quot;);
    const [email, setEmail] = useState(&quot;&quot;);
    const [password, setPassword] = useState(&quot;&quot;);
    const [confirmpassword, setConfirmPassword] = useState(&quot;&quot;);
    const [error, setError] = useState(&quot;&quot;);
    const routerHistory = useHistory()
    const registerHandler = async (e) =&gt; {
      e.preventDefault();
    
      const config = {
        header: {
          &quot;Content-Type&quot;: &quot;application/json&quot;,
        },
      };
  
      if (password !== confirmpassword) {
        setPassword(&quot;&quot;);
        setConfirmPassword(&quot;&quot;);
        setTimeout(() =&gt; {
          setError(&quot;&quot;);
        }, 5000);
        return setError(&quot;Passwords do not match&quot;);
      }
  
      try {
        const { data } = await axios.post(
          &quot;http://localhost:5000/api/auth/register&quot;,
          {
            username,
            email,
            password,
          },       
          config
        );
      
        localStorage.setItem(&quot;authToken&quot;, data.token);
  
        routerHistory.push('/login')
      } catch (error) {
        if (error.response) {
          setError(error.response.data.error);
        }
        setTimeout(() =&gt; {
           setError(&quot;&quot;);
        }, 5000);
      }
    };
  
    return (
      &lt;div className=&quot;signin&quot;&gt;
        &lt;Link to='/'&gt;
          &lt;img src='/audible/logo.png' /&gt;
        &lt;/Link&gt;  
        &lt;form onSubmit={registerHandler} className=&quot;form__container&quot;&gt;
          &lt;h3&gt;Create account&lt;/h3&gt;
          {error &amp;&amp; &lt;span className=&quot;error__message&quot;&gt;{error}&lt;/span&gt;}
            &lt;span  className='labels'&gt;Username&lt;/span&gt;
            &lt;input
              type=&quot;text&quot;
              className=&quot;input__field&quot;
              required
              id=&quot;name&quot;          
              value={username}
              onChange={(e) =&gt; setUsername(e.target.value)}
            /&gt;
            &lt;span  className='labels'&gt;Email&lt;/span&gt;
            &lt;input
              type=&quot;email&quot;
              className=&quot;input__field&quot;
              required
              id=&quot;email&quot;  
              value={email}
              onChange={(e) =&gt; setEmail(e.target.value)}
            /&gt; 
            &lt;span  className='labels'&gt;Password&lt;/span&gt;
            &lt;input
              type=&quot;password&quot;
              required
              id=&quot;password&quot;
              className=&quot;input__field&quot;
              autoComplete=&quot;true&quot;
              placeholder=&quot;At least 6 characters&quot;
              value={password}
              onChange={(e) =&gt; setPassword(e.target.value)}
            /&gt;
            &lt;span  className='labels'&gt;Re-enter password&lt;/span&gt;
            &lt;input
              type=&quot;password&quot;
              required
              id=&quot;confirmpassword&quot;
              className=&quot;input__field&quot;
              autoComplete=&quot;true&quot;
              value={confirmpassword}
              onChange={(e) =&gt; setConfirmPassword(e.target.value)}
            /&gt;   
          &lt;button type=&quot;submit&quot;  className=&quot;register__btn&quot;&gt;
            Create your Amazon account
          &lt;/button&gt;
          &lt;span &gt;
            Already have an account? &lt;Link className='links' to=&quot;/login&quot;&gt;Login&lt;/Link&gt;
          &lt;/span&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    );
  };
  
  export default Register;
  
  </code></pre>
  <p>Login Link</p>
  <pre><code>import React from &quot;react&quot;;
  import { Link, useHistory } from &quot;react-router-dom&quot;;
  import { CartContext } from &quot;../../context/cart&quot;;
  import { UserContext } from &quot;../../context/user&quot;;
  export default function LoginLink() {
    const { user, logoutHandler } = React.useContext(UserContext);
    const { clearCart } = React.useContext(CartContext);
    if (user.authToken) {
      return (
        &lt;button
          onClick={() =&gt; {
            logoutHandler();
            clearCart()
          }}
          className=&quot;login-btn&quot;
          &gt;
          logout
        &lt;/button&gt;
      );
    }
    return &lt;Link to=&quot;/login&quot;&gt;Signin&lt;/Link&gt;;
  }
  </code></pre>