I want to know how to save token to the local storage. I am registering and the relevant token is being generated which I have to save to the local storage. And further when I open login page there I have to fetch that to check it as well.
My code:
import React, { Component } from 'react';
import { Link } from 'react-router'
class Register extends Component {
constructor(props) {
super(props);
this.state = {
inputfirstname: '',
inputlastname: '' ,
inputemail: '' ,
inputpassword: ''
};
this.handleFirstName = this.handleFirstName.bind(this);
this.handleLastName = this.handleLastName.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.handleEmail = this.handleEmail.bind(this);
this.handlePassword = this.handlePassword.bind(this);
}
static contextTypes = {
router: React.PropTypes.object.isRequired
}
handleFirstName(event) {
this.setState({inputfirstname: event.target.value});
}
handleLastName(event) {
this.setState({inputlastname: event.target.value});
}
handleEmail(event) {
this.setState({inputemail: event.target.value});
}
handlePassword(event) {
this.setState({inputpassword: event.target.value});
}
handleSubmit(event) {
fetch("http://api-env.bt2qjip33m.ap-south-1.elasticbeanstalk.com/api/v1/accounts/" , {
method: 'post',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
firstName: this.state.inputfirstname,
lastName: this.state.inputlastname,
email:this.state.inputemail,
password: this.state.inputpassword
})
}).then(function(response){
if(response.ok) {
console.log(response)
return response;
}
throw new Error('Network response was not ok.');
}).then(function(data) {
console.log(data);
}).catch(function(error) {
console.log('There has been a problem with your fetch operation: ' + error);
});
alert('Submitted: ' + " " + this.state.inputfirstname + " " + this.state.inputlastname + " " + this.state.inputemail + " " + this.state.inputpassword);
event.preventDefault();
this.context.router.push('/dashboard');
}
render() {
return (
<div className="container">
<div className="row justify-content-center">
<div className="col-md-6">
<div className="card mx-2">
<div className="card-block p-2">
<center>
<img src="./img/logos.png"/></center>
<p className="text-muted">Create your account</p>
<div className="input-group mb-1">
<span className="input-group-addon"><i className="icon-user"></i></span>
<input type="text"
className="form-control"
placeholder="First name"
value={this.state.inputfirstname} onChange={this.handleFirstName}
/>
</div>
<div className="input-group mb-1">
<span className="input-group-addon"><i className="icon-user"></i></span>
<input type="text"
className="form-control"
placeholder="Last name"
value={this.state.inputlastname} onChange={this.handleLastName}
/>
</div>
<div className="input-group mb-1">
<span className="input-group-addon">@</span>
<input type="text"
className="form-control"
placeholder="Email"
value={this.state.inputemail} onChange={this.handleEmail}
/>
</div>
<div className="input-group mb-1">
<span className="input-group-addon"><i className="icon-lock"></i></span>
<input type="password"
className="form-control"
placeholder="Password"
value={this.state.inputpassword} onChange={this.handlePassword}
/>
</div>
<button type="button" onClick={this.handleSubmit.bind(this)} className="btn btn-block btn-success">Create Account</button>
<center><Link to={'/pages/login'} style={{ width: 10 + '%' }} className="nav-link" activeClassName="active"><center>Login</center></Link>
</center>
</div>
<div className="card-footer p-2">
<div className="row">
<div className="col-6">
<button className="btn btn-block btn-facebook" type="button"><span>facebook</span></button>
</div>
<div className="col-6">
<button className="btn btn-block btn-twitter" type="button"><span>twitter</span></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default Register;
4
Answers
localStorage is a global variable. You can use it in your react code just like
You most use the following code:
To set a value:
To get a value:
You shouldn’t use localStorage because it is NOT safe and is accessible through JavaScript .
As per to auth0 “Don’t store tokens in local storage” as “Browser local storage (or session storage) is not a secure place to store sensitive information”
They rather using cookies please refer to :
https://auth0.com/docs/tokens/guides/store-tokens#don-t-store-tokens-in-local-storage