React JS authentication - html

Question

Im new to react js. I am having trouble understanding how to use store. Can anyone help me with the very basic way to create login and handle redirects?
Im creating a simple 2 page application. I want the user to redirect to login page if he is not authorized. Also if anyone has a link to good tutorials for react js kindly share.
index.js
import React, { Component } from 'react'
import ReactDOM from 'react-dom';
import './index.css';
strong text
import Create from "./components/createshipment";
import App from './App';
import {BrowserRouter as Router} from 'react-router-dom';
import {Switch, Redirect} from 'react-router-dom';
import Route from 'react-router-dom/Route';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(
<Router>
<div className="App">
<Switch>
<Route path="/login" exact strict component={App} />
<Route path="/cs" component={Create} />
</Switch >
</div>
</Router>,
document.getElementById('root')
);
registerServiceWorker();
App.js
import React, { Component } from 'react';
import Login from "./components/login";
import "./components/App.css";
class App extends Component {
constructor(props){
super(props);
// this.onHandle = this.onHandle.bind(this);
}
state={
logged:false,
}
onHandle =(e)=>{
return this.setState({ logged: e});
}
render() {
return (
<div >
<Login logged={this.state.logged} onHandle={e=>this.onHandle(e)} />
</div>
);
}
}
export default App;
Login.js
import React, { Component } from 'react';
import './App.css';
// import er from "./error.png";
import Create from "./createshipment";
import { Route, Link, Switch, Redirect } from 'react-router-dom';
class Login extends React.Component {
constructor(props) {
super(props);
this.onChange = this.onChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);
}
state={
username:"",
password:"",
flag: false,
showResults:false,
}
isLoggedIn(){
// console.log(Login.flag);
return this.state.flag;
}
onChange =(e)=>{
return this.setState({
[e.target.name]: e.target.value,
});
}
onSubmit = async (event) =>{
// debugger;
event.preventDefault();
const { username, password,flag} = this.state;
this.setState({ flag: false });
if (!(username === 'george' && password === 'george')) {
this.username="";
this.password="";
alert('Invalid username/password');
return false;
}
else{
console.log("abc")
this.props.onHandle(true);
return true;
}
}
render() {
if (this.props.logged === true) {
return <Redirect to='/cs'/>
}
// <div className="errormain">
// { this.state.showResults ? <label className="ErrorMsg"> Invalid Login Details</label> : null }
// </div>
return (
<div className="App">
<form className="frame" >
<h1 className="App-title">ALPHA</h1>
<h2 className="App-para"> Aid Tracking Portal</h2>
<br/><br/> <br/>
<br/><br/><br/>
<br/><br/><br/> <br/>
<br/><br/>
<input required="required" placeholder= "Username" className="lmain" name="username" placeholders='Email' onChange={e=> this.onChange(e)} value={this.state.username}/>
<br/>
<input type="text" required placeholder= "Password" className="lmain" name="password" placeholders='Password' type='password' onChange={e=> this.onChange(e)} value={this.state.password}/>
<button className="LB" value="true" onClick={this.onSubmit} > Login</button>
</form>
</div>
);
}
}
export default Login
CreateShipment.js
import React, { Component } from 'react';
// import logo from '/home/zubair/Desktop/projectmanager/src/logo.svg';
import NewShipment from './form/NewShipment.js';
import Navigation from './navigation';
import './form/createshipment.css';
class Createshipment extends React.Component {
constructor(props){
super(props);
}
render() {
return (
<div >
<header className="App-header">
<h1 className="App-title2">Aid Tracker</h1>
<Navigation/>
</header>
<br/><br/>
<NewShipment />
</div>
);
}
}
export default Createshipment;

Answer 1

On web you can use LocalStorage to store data.If you plan to use Redux then I would suggest github.com/rt2zz/redux-persist.