title: How to use OAuth2 and Passport.js for a MEAN (Angular 2+) Application
body: <p>I’m trying to apply OAuth2 to an angular 4, MEAN stack application. I am trying to do the authentication using Passport.js and the Google Strategy.</p>
  
  <p>I’ve found a few tutorials, but the difference in stacks has made the tutorials difficult to follow. In case it's relevant the one I am currently following is 'Securing Your Application with OAuth and Passport' found on pluralsight. </p>
  
  <p>So far I configured passport on the server side. </p>
  
  <p>After the configuration, I applied the following to /server/routes.ts:</p>
  
  <pre><code>// Should redirect to main page if not authenticated
    router.route.use('/', function(req, res, next) {
      if (!req.user) {
        console.log('err');
        res.redirect('/');
      }
      next();
    });
    // Authentication
    router.route('/google/callback')
      .get(passport.authenticate('google', {
        successRedirect: '/home/', // was users
        failure: '/error/'
      }));
    router.route('/google/')
      .get(passport.authenticate('google', {
        // Tell Google what we want
        scope: ['https://www.googleapis.com/auth/userinfo.profile',
          'https://www.googleapis.com/auth/userinfo.email']
      }));
  </code></pre>
  
  <p>These changes are not pushed to my repo, but the set up of everything can be found <a href="https://github.com/cerberus-org/cerberus-app" rel="nofollow noreferrer">here</a>.</p>
  
  <p>The issue I am having with this tutorial is that the client and server do not seem to be separated in the tutorial. </p>
  
  <p>Questions/Thoughts:</p>
  
  <ol>
  <li><p>server/routes contains my api routes, not my paths to my site so it doesn't seem right that the code above would be in server/routes. </p></li>
  <li><p>Also, I cannot write <code>&lt;a href="/google/"&gt;&lt;/a&gt;</code> on my front end because my front end has it's own router and will not look at server/routes for paths. </p></li>
  <li><p>Lastly, I cannot call say </p>
  
  <p><code>.get(passport.authenticate('google', {
            // Tell Google what we want
            scope: ['https://www.googleapis.com/auth/userinfo.profile',
              'https://www.googleapis.com/auth/userinfo.email']</code></p></li>
  </ol>
  
  <p>in a front end service because then I would have to configure passport on the front end and I believe passport should be configured on the backend since it is supported by the express framework. </p>
  
  <p>If I am on the completely wrong path any guidance on where I can implement OAuth2, on a MEAN (Angular 2+) application using Passport.js would be appreciated. </p>