title: Make a secure oauth API with passport.js and express.js (node.js)
body: <p>I've got I think a specific problem, unless I'm not doing things in the right way.</p>
  
  <p>I've got an application with 2 sides, a client (html site), and an API (built with express + mongodb). The API will need to be securely accessed. They both are on different domains, for now let's say my site is on domain.com and my API is on api.com:3000.</p>
  
  <p>I've added passport to get an access token from Github as I'm creating my users with their data, so I can have a "Sign in with Github" basically.</p>
  
  <p>My current process is:</p>
  
  <p>1) the client (the site), opens a popup on the API</p>
  
  <pre><code>window.open("http://api.com:3000/oauth")
  </code></pre>
  
  <p>2) The express server, start the passport process:</p>
  
  <pre><code>app.get('/oauth', passport.authenticate('github'), function(req, res) {
  
  });
  </code></pre>
  
  <p>For the strategy, I used <a href="https://github.com/jaredhanson/passport-github/blob/master/examples/login/app.js" rel="noreferrer">this code</a>.</p>
  
  <p>3) I redirect the callback to a url that closes the popup (javascript with a window.close()):</p>
  
  <pre><code>app.get('/oauth/callback', passport.authenticate('github', { failureRedirect: '/' }), function(req, res) {
      res.redirect('/auth_close');
  });
  </code></pre>
  
  <p>At that point, all is fine, I am now logged in the API. My problem is how to get data back to the client, as the client doesn't know anything yet about accessToken, user or user id.</p>
  
  <p>So, from the client (the site that opens the popup), I tried different approaches:</p>
  
  <ul>
  <li><p>getting a value from the popup: doesn't work because of the redirection, I lose track of the popup javascript information</p></li>
  <li><p>calling my API to get the "current user" in session, such as <a href="http://api.com:3000/current" rel="noreferrer">http://api.com:3000/current</a>
  One more request, not ideal, but this one work. However, I still have a problem.</p></li>
  </ul>
  
  <p>This /current url is returning the user if I reach it from the browser, because the browser send in the header request the express session cookie:</p>
  
  <pre><code>Cookie:connect.sid=s%3AmDrM5MRA34UuNZqiL%2BV7TMv6.Paw6O%2BtnxQRo0vYNKrher026CIAnNsHn4OJdptb8KqE
  </code></pre>
  
  <p>The problem is that I need to make this request from jquery or similar, and that's where it fails because the session is not sent. So the user is not returned:</p>
  
  <pre><code>app.get('/current', function() {
      // PROBLEM HERE, req.user is undefined with ajax calls because of the session!
  });
  </code></pre>
  
  <p>I found a way of making it work but I'm not happy with because I'll have cross-browsers CORS problems, it is adding to express:</p>
  
  <pre><code>res.header("Access-Control-Allow-Credentials", "true");
  </code></pre>
  
  <p>And add the withCredentials field in a jquery ajax call, as explained <a href="http://api.jquery.com/jQuery.ajax/" rel="noreferrer">here</a>.</p>
  
  <p>A map of fieldName-fieldValue pairs to set on the native XHR object. For example, you can use it to set withCredentials to true for cross-domain requests if needed.</p>
  
  <pre><code>$.ajax({
     url: a_cross_domain_url,
     xhrFields: {
        withCredentials: true
     }
  });
  </code></pre>
  
  <p>I am also not happy with this as I'm losing the wildcard on my header: <code>Access-Control-Allow-Origin</code>, I need to specify a domain, as explained <a href="https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS?redirectlocale=en-US&amp;redirectslug=HTTP_access_control#Requests_with_credentials" rel="noreferrer">here</a>.</p>
  
  <p>So, I'm not sure the approach I should take here, the only thing I need is the client getting either an accessToken, or a userID back from the passport oauth process. The idea is using that token in each call to the API to validate the calls.</p>
  
  <p>Any clue?</p>