title: Disallowing concurrent logins for same user at once
body: <p>I am working on a project , first i did user signup and login based on jwt authentication * note i am using reactjs * i want to disallow users from logging in several time from different tabs or browsers , what shall i do ? how to implement such service and where? i will provide the whol code that may be helpful</p>
  
  <p>This is my main express file :</p>
  
  <pre><code>//the main framework , express
  var express = require('express');
  //path , used for joining pathes
  var path = require('path');
  //cross origin resource sharing 
  var cors= require('cors')
  //body parser used to take data from forms , to be used later on
  var bodyParser=require("body-parser");
  //for security reasons , http security(not https)
  var helmet= require('helmet')
  //for parsing tokens and session cookies
  var cookieParser= require('cookie-parser')
  //assigning express functionaities as a global variable
  const app = express()
  //assigning cors functionaities as a global variable
  app.use(cors())
  
  
  
  //headers that will be sent to the browser
  app.use((req, res, next) =&gt; {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Credentials', true);
    res.setHeader('Access-Control-Allow-Methods', ['PATCH', 'POST', 'GET', 'DELETE', 'PUT']);
    res.setHeader('Access-Control-Allow-Headers' , '*')
    res.setHeader('Access-Control-Expose-Headers' ,'content-type')
    next();
  });
  
  //body parser for form data
  app.use(bodyParser.json())
  app.use(bodyParser.json({ type: 'application/json' }))
  app.use(bodyParser.urlencoded({ extended: true }))
  app.use(cookieParser())
  // secure apps by setting various HTTP headers
  app.use(helmet())
  // enable CORS - Cross Origin Resource Sharing
   app.options('*', cors()); 
  
  
  //fetching index from react
  app.use(express.static('./build/'));
  app.use(express.static(path.join(__dirname, './client/build')));
  app.get('*', (req, res) =&gt; {
    res.send(express.static(path.join(__dirname, './client/build/index.html')))  ;
  });
  
  //giving the functionalities of users.js to a variable users to be used later on
  var Users = require('./routes/Users')
  //using the functions assigned for users
  app.use('/users', Users)
  
  //exporting the app file 
   module.exports = app
  </code></pre>
  
  <p>this is the routes file which contains my controller:</p>
  
  <pre><code>const express = require('express')
  //setting a users variable to be used as a router instead of app post , get ..
  const users = express.Router()
  //cross oigin resource sharing 
  const cors = require('cors')
  //jwt for user login authentication
  const jwt = require('jsonwebtoken')
  //bcrypt for password encryption and decryption
  const bcrypt = require('bcrypt')
  //using te user model
  const User = require('../model/user')
  //setting users as cros origin functionalities
  users.use(cors())
  //privat key or jwt encryption and decryption
  process.env.SECRET_KEY = 'q1w2e3r4t5y6u7i8o9p0o9i8u7y6t5r4e3w2q1'
  
  //main signup function , exported
  users.post('/signup', (req, res) =&gt; {
    //setting a new user object to be manipulated and inserted to db 
    //data taken from react client side 
    const today = new Date()
    const userData = {
      username : req.body.username,
      first_name: req.body.first_name,
      last_name: req.body.last_name,
      email: req.body.email,
      password: req.body.password,
      created: today
    }
  
    //a function from sequelize , a wrapper for later on functions
    //searches if the username is found or not 
    User.findOne({
      where: {
        //searching in the whhole db for this user name 
       username: req.body.username
      }
    })
      // encrypting the password using bcrypt encryption function
      //bcrypt uses a hash function to encrypt the user given password
      //will not reach this part if user is duplicated
      .then(user =&gt; {
        if (!user) {
          //hashing the password , 10 is a number for permutations 2pwr10 = a certain string built in
          bcrypt.hash(req.body.password, 10, (err, hash) =&gt; {
            userData.password = hash
            //creating a user with the given data
            User.create(userData)
            //send the username to the response tab in console
              .then(user =&gt; {
                res.json({ status: user.username + '    '+ 'Registered!' })
              })
              //any error will be consoled here
              .catch(err =&gt; {
                res.send('error: ' + err)
              })
          })
        } else {
          //will reach if username is found ,  User.findOne 
          res.json({ error: 'User already exists' })
        }
      })
      .catch(err =&gt; {
        res.send('error: ' + err)
      })
  })
  
  //main login functionality
  users.post('/login', (req, res) =&gt; {
    ///searches for username in db at first
    User.findOne({
      where: {
       username: req.body.username
      }
    })
    //if the user is found , it compared the password with the given password
    //it compared it the encrypted pass in the db
    //and decrypts it to compare
      .then(user =&gt; {
        if (user) {
          //if user name is found the deryption starts here
          if (bcrypt.compareSync(req.body.password, user.password)) {
            //each user is given a certain jwt token for authentication
            //jwt.sign , Synchronously sign the given payload into a JSON Web Token string payload
            //secret key provided above
            //token is assigned using the front end whuck sends it with the request
            let token = jwt.sign(user.dataValues, process.env.SECRET_KEY, {
              expiresIn: 1440
            })
            //send token to local storage of the browser that checks it 
            res.send(token)
          }
        } else {
          //reaches here if user isnt found
          res.status(400).json({ error: 'User does not exist' })
        }
      })
      //catches any error from the above blocks
      .catch(err =&gt; {
        res.status(400).json({ error: err })
      })
  })
  
  users.get('/profile', (req, res) =&gt; {
    //Synchronously verify given token using a secret or a public key to get a decoded token token -
    // JWT string to verify secretOrPublicKey - Either the secret for HMAC algorithms, 
    //or the PEM encoded public key for RSA and ECDSA.
    // [options] - Options for the verification returns - The decoded token.
    var decoded = jwt.verify(req.headers['authorization'], process.env.SECRET_KEY)
  
  
    //searches for user
    User.findOne({
      //decode user id and jwt 
      where: {
        id: decoded.id
  
      }
  
    })
    //if true, user is sent as a json object to browser
      .then(user =&gt; {
        if (user) {
          console.log(user)
          res.json(user)
        } else {
          //if false , send this response
          res.send('User does not exist')
        }
      })
      .catch(err =&gt; {
        res.send('error: ' + err)
      })
  })
  
  module.exports = users
  </code></pre>
  
  <p>react front end end-points:</p>
  
  <pre><code> import axios from 'axios'
  import jwt_decode from 'jwt-decode'
  //the signup endpoint sent from front end and interpreted by the browser
  //route is an api called users , exported from server side
  //posting user data as in server
  //sending a response if true
  export const signup = newUser =&gt; {
    return axios
      .post('users/signup', {
        username : newUser.username,
        first_name: newUser.first_name,
        last_name: newUser.last_name,
        email: newUser.email,
        password: newUser.password
      })
      .then(response =&gt; {
        console.log('Registered')
      })
  }
  
  //login end point
  //using username and password , using the decoded id 
  export const login = async user =&gt; {
    try {
      const response = await axios
        .post('users/login', {
          username: user.username,
          password: user.password
        });
      localStorage.setItem('usertoken', response.data);
      return response.data;
    }
    catch (err) {
      console.log(err);
    }
  }
  
  </code></pre>
  
  <p>Login react page:</p>
  
  <pre><code>import React, { Component } from 'react'
  import {  withRouter} from 'react-router-dom';
  import { login } from './api-user'
  
  
  class Login extends Component {
    constructor() {
      super()
      this.state = {
        username: '',
        password: '',
        errors: {}
      }
  
      this.onChange = this.onChange.bind(this)
      this.onSubmit = this.onSubmit.bind(this)
    }
  
    onChange(e) {
      this.setState({ [e.target.name]: e.target.value })
    }
  
  //   parseJwt(token) {
  //     if (!token) { return; }
  //     const base64Url = token.split('.')[1];
  //     const base64 = base64Url.replace('-', '+').replace('_', '/');
  //     return JSON.parse(window.atob(base64));
  // }
  
  onSubmit(e) {
    e.preventDefault()
  
    const user = {
      username:this.state.username,
      password: this.state.password
    }
  
    login(user).then(res =&gt; {
      if (res) {
        this.props.history.push(`/profile`)
      }
    })
    localStorage.setItem('username',
    JSON.stringify(this.state.username))
  }
  
  
    render() {
    return (
  
  
  
        &lt;div className="container"&gt;
          &lt;div className="row"&gt;
            &lt;div className="col-md-6 mt-5 mx-auto"&gt;
              &lt;form noValidate onSubmit={this.onSubmit}&gt;
                &lt;h1 className="h3 mb-3 font-weight-normal"&gt;Please sign in&lt;/h1&gt;
                &lt;div className="form-group"&gt;
                  &lt;label htmlFor="text"&gt;Username&lt;/label&gt;
                  &lt;input
                    type="text"
                    className="form-control"
                    name="username"
                    placeholder="Enter username"
                    value={this.state.username}
                    onChange={this.onChange}
                  /&gt;
                &lt;/div&gt;
                &lt;div className="form-group"&gt;
                  &lt;label htmlFor="password"&gt;Password&lt;/label&gt;
                  &lt;input
                    type="password"
                    className="form-control"
                    name="password"
                    placeholder="Password"
                    value={this.state.password}
                    onChange={this.onChange}
                  /&gt;
                &lt;/div&gt;
                &lt;button
                  type="submit"
                  className="btn btn-lg btn-primary btn-block"
                &gt;
                  Sign in
                &lt;/button&gt;
              &lt;/form&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
  
    )
    }
  }
  
  export default withRouter(Login);
  </code></pre>
  
  <p>signup react page</p>
  
  <pre><code>mport React, { Component } from 'react'
  import { signup } from './api-user'
  
  class SignUp extends Component {
    constructor() {
      super()
      this.state = {
        username:'',
        first_name: '',
        last_name: '',
        email: '',
        password: '',
        errors: {}
      }
  
      this.onChange = this.onChange.bind(this)
      this.onSubmit = this.onSubmit.bind(this)
    }
  
    onChange(e) {
      this.setState({ [e.target.name]: e.target.value })
    }
    onSubmit(e) {
      e.preventDefault()
  
      const newUser = {
        username: this.state.username,
        first_name: this.state.first_name,
        last_name: this.state.last_name,
        email: this.state.email,
        password: this.state.password
      }
  
      signup(newUser).then(res =&gt; {
        this.props.history.push(`/login`)
      })
    }
  
    render() {
      return (
        &lt;div className="container"&gt;
          &lt;div className="row"&gt;
            &lt;div className="col-md-6 mt-5 mx-auto"&gt;
              &lt;form noValidate onSubmit={this.onSubmit}&gt;
                &lt;h1 className="h3 mb-3 font-weight-normal"&gt;Register&lt;/h1&gt;
                &lt;div className="form-group"&gt;
                  &lt;label htmlFor="username"&gt;User Name&lt;/label&gt;
                  &lt;input
                    type="text"
                    className="form-control"
                    name="username"
                    placeholder="Enter your username"
                    value={this.state.username}
                    onChange={this.onChange}
                  /&gt;
                &lt;/div&gt;
                &lt;div className="form-group"&gt;
                  &lt;label htmlFor="first_name"&gt;First name&lt;/label&gt;
                  &lt;input
                    type="text"
                    className="form-control"
                    name="first_name"
                    placeholder="Enter your first name"
                    value={this.state.first_name}
                    onChange={this.onChange}
                  /&gt;
                &lt;/div&gt;
                &lt;div className="form-group"&gt;
                  &lt;label htmlFor="last_name"&gt;Last name&lt;/label&gt;
                  &lt;input
                    type="text"
                    className="form-control"
                    name="last_name"
                    placeholder="Enter your lastname name"
                    value={this.state.last_name}
                    onChange={this.onChange}
                  /&gt;
                &lt;/div&gt;
                &lt;div className="form-group"&gt;
                  &lt;label htmlFor="email"&gt;Email address&lt;/label&gt;
                  &lt;input
                    type="email"
                    className="form-control"
                    name="email"
                    placeholder="Enter email"
                    value={this.state.email}
                    onChange={this.onChange}
                  /&gt;
                &lt;/div&gt;
                &lt;div className="form-group"&gt;
                  &lt;label htmlFor="password"&gt;Password&lt;/label&gt;
                  &lt;input
                    type="password"
                    className="form-control"
                    name="password"
                    placeholder="Password"
                    value={this.state.password}
                    onChange={this.onChange}
                  /&gt;
                &lt;/div&gt;
                &lt;button
                  type="submit"
                  className="btn btn-lg btn-primary btn-block"
                &gt;
                  Register!
                &lt;/button&gt;
              &lt;/form&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  
  
  export default SignUp
  </code></pre>
  
  <p>App.js main routing file</p>
  
  <pre><code>import React, { Component } from 'react'
  import { BrowserRouter as Router, Route } from 'react-router-dom'
  
  
  import Landing from './components/user/Landing'
  import Login from './components/user/Login'
  import SignUp from './components/user/Signup'
  import Profile from './components/user/Profile'
  
  
  class App extends Component {
  
  
  
  
    render() {
      return (
        &lt;Router&gt;
          &lt;div className="App"&gt;
          &lt;Route exact path="/landing" component={Landing} /&gt;
            &lt;Route exact path="/" component={Login} /&gt;
            &lt;div className="container"&gt;
              &lt;Route exact path="/signup" component={SignUp} /&gt;
  
              &lt;Route exact path="/profile" component={Profile} /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/Router&gt;
      )
    }
    }
  
  
  export default App
  </code></pre>