title: React JS - Login system with Remember LocalStorage
body: <p>I learn a bit of React. It's time to login for users. But there was a problem.
  To get started, the code:</p>
  
  <p>App.js</p>
  
  <pre><code>import React, {useState} from "react";
  import { BrowserRouter as Router, Link, Route } from "react-router-dom";
  import PrivateRoute from './PrivateRoute';
  import Home from './Home';
  import Login from "./Login";
  
  import { AuthContext } from "./Auth";
  
  function App(props) {
      const [authTokens, setAuthTokens] = useState(localStorage.getItem("tokens") || "");
      const setTokens = (data) =&gt; {
          localStorage.setItem("tokens", JSON.stringify(data));
          setAuthTokens(data);
      }
  
      return (
          &lt;AuthContext.Provider value={{ authTokens, setAuthTokens: setTokens }}&gt;
              &lt;Router&gt;
                  &lt;div&gt;
                      &lt;ul&gt;
                          &lt;li&gt;
                              &lt;Link to="/"&gt;Home&lt;/Link&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;Link to="/login"&gt;Login&lt;/Link&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
  
                      &lt;PrivateRoute exact path="/" component={Home} /&gt;
                      &lt;Route path="/login" component={Login} /&gt;
                  &lt;/div&gt;
              &lt;/Router&gt;
          &lt;/AuthContext.Provider&gt;);
  }
  
  export default App;
  </code></pre>
  
  <p>Login.js</p>
  
  <pre><code>import React, { useState } from "react";
  import { Link, Redirect } from 'react-router-dom';
  import axios from 'axios';
  import { useAuth } from "./Auth";
  
  function Login(props) {
      const [isLoggedIn, setLoggedIn] = useState(false);
      const [isError, setIsError] = useState(false);
      const [userName, setUserName] = useState("");
      const [password, setPassword] = useState("");
      const { setAuthTokens } = useAuth();
  
      const referer = props.location.state ? props.location.state.referer : '/';
  
      function postLogin() {
          axios.post("https://myapi.com/login.php", {
              userName,
              password
          }).then(result =&gt; {
              if (result.status === 200) {
                  setAuthTokens(result.data);
                  setLoggedIn(true);
                  console.log(result.data);
              } else {
                  setIsError(true);
              }
          }).catch(e =&gt; {
              setIsError(true);
              console.log(e);
          });
      }
  
      if (isLoggedIn) {
          return &lt;Redirect to={referer} /&gt;;
      }
  
      return (
             &lt;input type="username" value={userName} onChange={e=&gt;{ setUserName(e.target.value); }} placeholder="username"
                  /&gt;
             &lt;input type="password" value={password} onChange={e=&gt;{ setPassword(e.target.value); }} placeholder="password"
                  /&gt;
             &lt;input type="submit" onClick={postLogin}&gt;Sign In&lt;/Button&gt;
             { isError&amp;&amp; &lt;div&gt;The username or password provider were incorrect.&lt;/div&gt;}
      );
  }
  
  export default Login;
  </code></pre>
  
  <p>Auth.js</p>
  
  <pre><code>import { createContext, useContext } from 'react';
  
  export const AuthContext = createContext();
  
  export function useAuth() {
      return useContext(AuthContext);
  }
  </code></pre>
  
  <p>PrivateRoute.js</p>
  
  <pre><code>import React from 'react'
  import { Redirect, Route } from 'react-router-dom'
  
  import { useAuth } from "./Auth";
  
  const PrivateRoute = ({ component: Component, ...rest }) =&gt; {
      const { authTokens } = useAuth();
  
      return (
          &lt;Route
              {...rest}
              render={props =&gt;
                  authTokens ? (
                      &lt;Component {...props} /&gt;
                  ) : (
                      &lt;Redirect to={{ pathname: "/login", state: { referer: props.location } }} /&gt;
                  )
              }
          /&gt;
      );
  }
  
  export default PrivateRoute
  </code></pre>
  
  <ol>
  <li><p>At login, everything works well. But when I try to log in to <code>/login</code> again, it doesn’t throw me back to the <code>referer</code> page. Although it should, otherwise why would the user once again see the login page, if he is already logged in.</p></li>
  <li><p>Is it possible to store LocalStorage, such as cookies, for 30 days?</p></li>
  <li><p>If possible, please explain the logic of logging in to react.
  I understand it this way (correct if I am mistaken):</p>
  
  <ul>
  <li>user enters login and password</li>
  <li>in response, I send a TOKEN (if the username and password on the server side match)</li>
  <li>I load this token, for example in Mysql, store it there.</li>
  <li>the next time I log on to the site, I check if there is a token in the Mysql database (if so, leave it logged in - if not, then delete the row from the database and throw it on the login page).
  Right?)</li>
  </ul></li>
  </ol>