title: Express server with passport-twitchtv can't get the login to work from my angularjs client
body: <p>I'm absolutely certain that I am missing something fundamental here but I am lost as to what to try next.</p>
  
  <p>I have built an express application using passport-twitchtv based on the sample application here: <a href="https://github.com/johnkernke/passport-twitchtv/tree/master/examples/login" rel="nofollow">https://github.com/johnkernke/passport-twitchtv/tree/master/examples/login</a></p>
  
  <p>When I use my browser and browse to <a href="http://localhost:3000/auth/twitchtv" rel="nofollow">http://localhost:3000/auth/twitchtv</a> I get successfully redirected to Twitch to perform a login, here's the snippet from the express code:</p>
  
  <pre><code>app.get('/auth/twitchtv', 
    passport.authenticate('twitchtv', {scope: [ 'user_read' ]}), 
    function(req, res){
  
    });
  
  app.get('/auth/twitchtv/callback', 
    passport.authenticate('twitchtv', { failureRedirect: "/" }), 
    function(req, res) {
      // Successful authentication, redirect home.
      //DEBUG 
      console.log('Hit the auth callback');
      res.redirect("/");
  });
  </code></pre>
  
  <p>My actual problem is that I am trying to perform the login from an angularjs application served from the express server, I have a button which I want to press to allow the login however it does not work, here's some code:</p>
  
  <p>Login view:</p>
  
  <pre><code>&lt;!-- login.html --&gt;
      &lt;div class="jumbotron text-center"&gt;
          &lt;h1&gt;Login&lt;/h1&gt;
  
          &lt;p&gt;{{ message }}&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="container-fluid"&gt;
          &lt;div ng-controller="twitchLoginController" class="row"&gt;
          &lt;button ng-click="twitchLogin()" class="btn btn-default mybutton" &gt;
              &lt;img src="images/twitchconnect.png" img-responsive /&gt;
          &lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Controller Code:</p>
  
  <pre><code>myApp.controller('twitchLoginController', function($scope, $http, $location) {
  
          $scope.twitchLogin = function() {
              console.log("in the login call");
              var response = $http.get('/auth/twitchtv');
              //$location.url('/auth/twitchtv');
              console.log(response);
              response.success(function(data, status, headers, config) {
                  $scope.message = 'ok';
              });
  
              response.error(function(data, status, headers, config) {
                  $scope.message = status;
              })
          }
      });
  </code></pre>
  
  <p>As you can see here I am trying to do a GET to the url which is what I think I need to do but whenever I click the button I get an error in the browser:</p>
  
  <p>XMLHttpRequest cannot load https  (removed://) api.twitch.tv/kraken/oauth2/authorize?response_type=code&amp;redirect_u…tchtv%2Fcallback&amp;scope=user_read&amp;client_id=ire1vyl32phgrfofwab5uebs3er8htr. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http (removed://) localhost:3000' is therefore not allowed access.</p>
  
  <p>As you can see from my code I just tried setting the url to be /auth/twitch using $location but when I do that nothing happens at all, no error, no login either.</p>
  
  <p>So I am stuck and I don't know whether it's because my code is wrong or whether I have a fundamental misunderstanding of what it is I am trying to achieve, I at least know that my server code is working and so I have been concentrating on the angular piece.</p>
  
  <p>I have tried the following in my angular code:</p>
  
  <pre><code>$httpProvider.defaults.useXDomain = true;
  delete $httpProvider.defaults.headers.common['X-Requested-With'];
  </code></pre>
  
  <p>To enable CORS but that doesn't seem to have helped.</p>
  
  <p>Any ideas?</p>
  
  <p>EDIT</p>
  
  <p>I added this to my Login view:</p>
  
  <pre><code>&lt;!-- login.html --&gt;
      &lt;div class="jumbotron text-center"&gt;
          &lt;h1&gt;Login&lt;/h1&gt;
  
          &lt;p&gt;{{ message }}&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="container-fluid"&gt;
          &lt;div ng-controller="twitchLoginController" class="row"&gt;
          &lt;button ng-click="twitchLogin()" class="btn btn-default mybutton" &gt;
              &lt;img src="images/twitchconnect.png" img-responsive /&gt;
          &lt;/button&gt;
  
  -------&gt;&lt;a target="_self" href="/auth/twitchtv"&gt;Login&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And when I click on the link the login is performed, only works with _self enabled.  So this seems like the only solution, from my point of view this is OK but can someone confirm that this is how you are supposed to get this to work so I know I'm not doing something stupid or worse insecure :-)</p>
  
  <p>Thanks
  Adrian</p>