React JS - Login system with Remember LocalStorage - reactjs

Question

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

Answer 1

Right :
when you submit your login credentials like username and password then you are getting token from your server then you have to store your token in your local-storage or as cookie like token : Your_token
Then in your router in your App.js check if you are having token or not like
{
!localStorage.getItem('token') ? <Redirect from='/' to='/login' /> : ''
}
Here if you don't have your token then you are redirecting to login else redirecting to your following page.
You can use your token as header in api calls and then you can check if your token is valid or not from your back-end if not then return with error message.
If your token is expire then you can set your token : ' ' in localstorage .Then you can redirect to login page from that api response.
Main thing is token create token which automatically expire as per your requirement and use it with local-storage or cookie.