I am working on a SaaS web app and I have login and logout in the app using JWT (JSON WEB TOKEN).
All the things are working fine in desktop browser like Chrome and Firefox but as I open my web app in mobile browser. I am able to login but when I click on logout I am not able to logout.
here is my code for generating JWT
const generateToken = (req, res, users) => {
var token = jwt.sign(
{
data: {
email: users[0].email,
password: users[0].password,
userID: users[0].userId
}
},
process.env.JWT_SECRET
);
res.cookie('TOKEN-NAME', token, {
domain: req.hostname,
maxAge: 2592000000, // 30 days : (1000 * 60 * 60 * 24 * 30)
httpOnly: true
});
};
and this is code for logout
router.get('/logout', function(req, res, next) {
if (!req.cookies['ONTRO-BIZ-TOKEN'])
res.status(400).send('Please login first');
else {
res.clearCookie('ONTRO-BIZ-TOKEN');
res.sendStatus(200).redirect('/login');
}
});
and this is my Frontend code having the logout code
class App extends Component {
constructor(props) {
super(props);
this.state = {
isLoggedIn: Cookies.get('isLoggedIn')
}
}
componentWillMount() {
if (this.state.isLoggedIn) {
Account.get().then(({data}) => {
this.setState({ user: data })
window.me = data
}).catch(err => handleErrors(this, err))
}
}
render() {
if (!this.state.isLoggedIn) {
return <LoginModal setLoggedIn={(data) => {
Cookies.set('isLoggedIn', true);
this.setState({ user: data, isLoggedIn: true });
window.me = data;
}}/>
}
if (!this.state.user) {
return <Loading/>
}
return (
<div>
<Router>
<ShortcutHandler>
<TopBar user={this.state.user}/>
<div className="ContentPane d-flex">
<SideBar />
<div className="Content">
<Route exact path="/" component={Dashboard} />
<Route path="/venues" component={Venues} />
<Route path="/trainers" component={TrainersList} />
<Route path="/classes" component={Coaching} />
<Route path="/plans" component={Coaching} />
<Route path="/customers/:id(\d+)?" component={PlayersList} />
<Route path="/enrollments/:id(\d+)?" component={Subscriptions} />
<Route path="/invoices/:id(\d+)?" component={Invoices} />
<Route path="/payments/:id(\d+)?" component={PaymentsList} />
<Route path="/analytics" component={ComingSoon} />
<Route path="/settings" component={Settings} />
<Route path="/logout" component={logout.bind(this)} />
</div>
</div>
</ShortcutHandler>
</Router>
</div>
);
}
}
export default App;
export const logout = () => {
Cookies.remove('isLoggedIn');
window.me = undefined;
window.currentOrg = undefined;
window.location.pathname = '/';
return null;
}
