title: How to Authenticate & Authorize a Client-Side Web App using Remote NodeJS API that uses Passport.js
body: <p>As shown in the illustration below, I have a standalone API Project running on a server with a port say <code>3001</code>, and I have a Web App running on a server with port say <code>3002</code>. </p>
  
  <p><a href="https://i.stack.imgur.com/ovvAZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ovvAZ.png" alt="Flow of Web APP to API"></a></p>
  
  <p><strong>API on port <em>3001</em></strong>, has all the API routes required for the Web App (&amp; mobile apps) to fetch and put data, including Authentication API (Using <code>passport-local</code> and <code>passport-jwt</code>). In the API side of the project, I have also handled user role authorization, and every routes has list of roles who can access the APIs. </p>
  
  <p><strong>Example Route</strong></p>
  
  <pre><code>todoRoutes.get('/', 
                 requireAuth,
                 AuthController.roleAuth(['user','editor','admin']),
                 TodoController.getTodos);
  </code></pre>
  
  <p><strong>Role Authorization API Method in port 3001</strong></p>
  
  <pre><code>exports.roleAuth = function(roles){
  
      return function(req, res, next){
  
          var user = req.user;
  
          User.findById(user._id, function(err, foundUser){
  
              if(err){
                  res.status(422).json({error: 'No user found.'});
                  return next(err);
              }
  
              if(roles.indexOf(foundUser.role) &gt; -1){
                  return next();
              }
  
              res.status(401).json({error: 'You are not authorized to view this content'});
              return next('Unauthorized');
  
          });
      }
  }
  </code></pre>
  
  <p><strong>Response json after login successfully is like this</strong></p>
  
  <pre><code>{
      "token": "JWT eyJhbGci...",
      "user": {
          "_id": "5986b81d940bab06ddc79b34",
          "email": "myemail@gmail.com",
          "role": "admin"
      }
  }
  </code></pre>
  
  <p>Now in <strong>Web App</strong>, I want to use same role authorization and authentication (login), but you see, Web App is not connected to database, for me to make queries like check if the user in session is valid and has the role as in the response it got after login successfully.</p>
  
  <p><strong>Summary</strong> 
  Here are bullet points of what I was looking for in this question:</p>
  
  <ol>
  <li>Login on Client-Side Web Application, via Remote API on port 3001 (achieved)</li>
  <li>Get User Token and other information (<em>response shown above</em>) (achieved)</li>
  <li>Ensure user is authenticated on Client-Side Web App and also remember role of the user loggedin, to use these information for authorization of every routes on Client-side app. In client-side app I have few pages with forms to send data to Server-Side API on port <em>3002</em>, these pages are used by two different user with roles <em>editor</em> and <em>admin</em>.</li>
  </ol>
  
  <p>TIA</p>