CODEWITHSUNDEEP
angularjsauthenticationsatellizer
John McNeill
John McNeill

Reputation: 143

Satellizer google auth service - CORS issue

Working through a tutorial and learning how to use Satellizer to authenticate users. Had just finished a section where we built a google auth service from the ground up that worked. Now Attempting to use the Satellizer module to do the same thing but I am now getting this error:

XMLHttpRequest cannot load http://localhost:3000/auth/google. A wildcard '*' >cannot be used in the 'Access-Control-Allow-Origin' header when the credentials >flag is true. Origin 'http://localhost:9000' is therefore not allowed access.

Here are my settings:is the middle ware that sets my header:

    app.use(function (req, res, next){
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');

    next();
});

The thing I don't understand is that the $scope.google function in my controller works, but when I switch to the $scope.authenticate function to use the $authProvider with Satellizer I get that error even though my Access headers don't change. Any idea what I am doing wrong?

My HTML:

<button ng-click="authenticate('google')" class="btn btn-lg btn-default btn-block" type="button">Google</button>

Controller:

angular.module('psJwtApp').controller('LoginCtrl', function ($scope, alert, auth, $auth) {
$scope.submit = function(){

    auth.login($scope.email, $scope.password)
        .success(function(res){
            alert('success', 'Welcome', 'Thanks for coming back, ' + res.user.email + '!');
        })
        .error(handleError);
};

$scope.google = function() {
    auth.googleAuth().then(function(res){
        alert('success', 'Welcome', 'Thanks for coming back, ' + res.user.displayName + '!');
    }, handleError);
};

function handleError(err) {
    alert('warning', 'Something went wrong :(', err.message);
}

$scope.authenticate = function(provider) {
    $auth.authenticate(provider).then(function(res){
        alert('success', 'Welcome', 'Thanks for coming back ' + res.data.user.displayName + '!');
    }, handleError);
};

});

app.js:

angular.module('psJwtApp', ['ui.router', 'ngAnimate', 'satellizer']);

app.config.js:

   angular.module('psJwtApp').config(function($stateProvider, $urlRouterProvider, $httpProvider, $authProvider, API_URL){
...
$authProvider.google({
        clientId: 'clientId',
        url: API_URL + 'auth/google'
    });

Upvotes: 2

Views: 1028

Answers (1)

John McNeill
John McNeill

Reputation: 143

Well, after 2 days I finally fixed it. Not sure exactly why it works though.

changed my CORS settings to:

res.header('Access-Control-Allow-Origin', 'http://localhost:9000');
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
res.header('Access-Control-Allow-Credentials', 'true');

Upvotes: 1

Related Questions