Would be nice to have an integrated GitHub provider in addition to all the provided ones.

This is from the README, once I saw this, my jaw literally dropped.

🌟 🌟 🌟 Props to you @sahat and all the contributers, where can I jump in? Im relatively new to Angular but I got the basics down.

angular.module('MyApp', ['Satellizer'])
  .config(function($authProvider) {

    $authProvider.facebook({
      clientId: '624059410963642',
    });

    $authProvider.google({
      clientId: '631036554609-v5hm2amv4pvico3asfi97f54sc51ji4o.apps.googleusercontent.com'
    });

    $authProvider.github({
      clientId: '0ba2600b1dbdb756688b'
    });

    $authProvider.linkedin({
      clientId: '77cw786yignpzj'
    });

    $authProvider.twitter({
      url: '/auth/twitter'
    });

    $authProvider.oauth2({
      name: 'foursquare',
      url: '/auth/foursquare',
      redirectUri: window.location.origin
      clientId: 'MTCEJ3NGW2PNNB31WOSBFDSAD4MTHYVAZ1UKIULXZ2CVFC2K',
      authorizationEndpoint: 'https://foursquare.com/oauth2/authenticate',
    });

  });

Seeing the route protected as a way to avoid access to protected routes, I am wondering if satellizer should care about that.

Let me explain:

Your implementation is cool, but as soon as I need different access levels (like user or admin) your implementation won't work. I mean, it is really for basic use cases.

In fact, your idea of "You can't access login / signup if you're logged in" is pretty much a specific use case. What if I want the user to access it and if logged in previously I want just to delete the old token?

What I want to say is that you could probably be safe deleting that last .run for both ngRouter and ui-router and let the developers create their own .run method with their own rules. That way you don't limit anyway to work with your use cases.

What do you think?

If http://satellizer.herokuapp.com/auth/login returns 401 Forbidden, the UI should give an indication of a failed login.

Are there any plans to refactor satellizer.js into respective files for factories, providers, etc? Just curious if this is already in progress (as to avoid duplicate work). If not, are you interested in such a pull request?

Tried the example at http://satellizer.herokuapp.com and observed this.

I logged in using google account, clicked on protected link, it displayed a page with Welcome, ... heading but immediately snapped back to login page.

Bug?

Hey @sahat, I saw you prepared rails-api server. If you want I can prepare for you pull request today or tomorrow.

I just want first to finish our provider side app which I already mostly did.

Or maybe you want to learn ruby and rails :)

After facebook login

local.parseUser = function(token, deferred) {
var payload = JSON.parse(window.atob(token.split('.')[1]));
console.log(payload);
localStorage.setItem(config.tokenName, token);
$rootScope[config.user] = payload.user;

outputs:
{iss: "localhost", sub: "53fd16cd211929f8029a146f", iat: 1409097777032, exp: 1410307377032}

since payload.user is undefined, i always get $auth.isAuthenticated() === false
Altrough /api/me/ gives me the correct profile...

This happens on facebook login + express example - pretty much stock...
Any ideas of what I am doing wrong ?

@creminss It would be great if you could take a look at the PHP folder and see if you could refactor it. I don't know any PHP and this is my first time using Laravel writing that code. You have no doubt more experience with PHP than me so any contributions would be appreciated.

The game goes for Flask example. It is currently behind Node.js and PHP in that it does not support account linking and it still uses payload.user to store user object inside the token instead of payload.sub which only stores user's id.

Since I don't have much experience with Flask either, any code cleanup and refactoring would be nice. Especially refactoring some logic into config.py, database.py, models.py, etc.

Use your best judgement in both tasks.

Thanks for helping out! 👍

hey.

just wondering - how do you handle session expiration - hard logout?

hey.

as in other libs i explored, it would make sense to actually filter for requests that require token.

scenario:

• user logs in
• user pulls data from our API (ret 200)
• user pulls data from some other API (ret 401)
• user gets logged out, despite the fact, that the request returning 401 was not from our API

ideally, during config, one could provide a function that would return true for requests / responses getting to/from our API, like:

function isAPI(config) {
  return /^https?\:\/\/(www\.)?example\.com/.test(config.url);
}

app.config(function ($authProvider) {
  $authProvider.requestFilter = isAPI;
  $authProvider.responseFilter = isAPI;
});

and the interceptor would check the config against this filter, like:

// ...
request: function(httpConfig) {
  var skip = angular.isFunction($authProvider.requestFilter) && !$authProvider.requestFilter(httpConfig);
  if (skip) {
    return httpConfig;
  }

  if (localStorage.getItem([config.tokenPrefix, config.tokenName].join('_'))) {
    httpConfig.headers.Authorization = 'Bearer ' + localStorage.getItem([config.tokenPrefix, config.tokenName].join('_'));
  }
  return httpConfig;
},
responseError : function (response) {
  var skip = angular.isFunction($authProvider.responseFilter) && !$authProvider.responseFilter(response.config);
  if (skip) {
    return $q.reject(rejection);
  }

  if (response.status === 401) {
    localStorage.removeItem([config.tokenPrefix, config.tokenName].join('_'));
  }
  return $q.reject(response);
}

On this line:

Satellizer is expecting in the JSON response the token to be in the key token. However the spec says it should be access_token: http://tools.ietf.org/html/rfc6749#section-5.1

I am working with https://github.com/bshaffer/oauth2-server-php and it is highly configurable about anything including query keys, key names and others. However it does not allow configuring the keys of this particular response, because this is what the specification defines: https://github.com/bshaffer/oauth2-server-php/blob/6a30b9b67ae35c228e852109ed743bf34da22568/src/OAuth2/ResponseType/CryptoToken.php#L86-L91

I think Satellizer should respect the specification or at least provide a configuration about the token key to read from the data.

Currently page transitions in Firefox are not as smooth as Chrome and Safari.

Right now, this code doesn't work in error scenarios:

$auth.authenticate(provider).then(
  function() {
    console.log('success');
  },
  function() {
    console.log('error');
  }
);

The error handler is never called because you are not properly rejecting failed promises. To make it easier, you should just use promise chaining.

Relevant changes to make my example code work:

$auth.authenticate = function(name) {
  var provider = (providers[name].type === '1.0') ? Oauth1 : Oauth2;
  return provider.open(providers[name]).then(function(response) {
    return Local.parseUser(response.token);
  });
};

local.parseUser = function(token) {
  var payload = JSON.parse($window.atob(token.split('.')[1]));
  $window.localStorage.jwtToken = token;
  $rootScope[config.user] = payload.user;
  $location.path(config.loginRedirect);
  return payload.user;
};

oauth2.open = function(options) {
  angular.extend(defaults, options);
  var url = oauth2.buildUrl();

  return Popup.open(url, defaults.popupOptions).then(function(oauthData) {
    return oauth2.exchangeForToken(oauthData).then(function(response) {
      return response.data;
    });
  });
};

I haven't tested against a success scenario but it should work fine - if you want, I can submit a PR changing all the promise code (and verify it works in various success and error scenarios too)

I think the jwt==0.3.1 should be PyJWT==0.2.1

The jwt module you currently have in there doesn't have the encode function you reference. They both install a jwt module that you import as jwt which is probably where the confusion came from.

Thanks for this project! I found it really useful.

The code climate score badge in the readme is linked to this project: https://github.com/kabisaict/flow.

Hey @sahat . You new convention of satellizer.foo to name the different services is not a good idea.

That only works with array notation like:

app.controller('foo', ['satellizer.Oauth2', function(Oauth2) {

}]);

but not with:

app.controller('foo', function(satellizer.Oauth2) {

});

For internal usage is ok because you are using the first mode, but if I want to override or decorate something, you are forcing me to use array notation.

I would think about our own prefix like: ss (s from sahat and s from stallizer) or even stl (satellizer).

ssOuath2, stlOauth2 or something like that.

What do you think?

So far we are using window.localStorage directly to store the token. That is ok, but not enough.

There is a common use case where you want to store the token in sessionStorage (to delete it when you close the browser). For example in a bank or any page with high security. You could even store the token in a cookie, nothing wrong.

So the thing is that we should abstract the storage into a service (repository pattern).

So there is a lot of different solutions, but since it is mostly local vs session, I vote to implement those two inside satellizer instead of giving the user the need of doing that.

I can't think atm about the best solution for us, but I open this issue to gather ideas.

This would be awesome to use with django and all-auth and see what would be done with satellizer and what would still be done with all-auth.

Is there any way to log in with a redirect instead of a popup (like Stack Overflow's login)?

Excuse my ignorance, am pretty new in Angular and I was wondering how could I send the login data wrapped in a JSON object instead of just email and password I want to send it like this developer: { email: ' ', password: ' '}

Another thing I'd like to know is how can I set the token and email to be sent in each request once signed in?

Thanks

This is a cool library. Can you make an Angular Dart version of it? I'm using Dart for my next projects.

I checked the source and I saw something I was curious about. Why did you decide to use a plain old js object instead of a angular constant? It could reduce the code (no need of that Object.defineProperties). You just need to wrap the config and providers in 1/2 configs.

You could leave the defineProperties to keep the same way of configuration or you could do:

angular.module('app').config(function(satellizer) {
   satellizer.loginUrl = "foo";
   satellizer.providers.google({ ... });
});

Or even two different configs, satellizer and satellizerProviders that is just personal preference.

Then you could inject that into $auth and Local so you don't have to wonder where that stuff comes from and would certainly help for unit testing.

It is up to you, I respect your decisions but this is more Angular-ish. (You're gonna hate me soon ;( )

I checked Satellizer demo page on firefox and i notice that sometimes "provider pop-up" is closing too fast. Too fast closure does not allow the user to signin.
My super fast solution is to put some delay on $window.close() in RunBlock() function on line 392:

$timeout(function(){
  $window.close();
},5);

If anyone else noticed this error ?

I have used capitalized module name Satellizer without giving it much thought. But before moving forward with broadcasting events and namespacing all internal services I need to pick one or the other convention.

It's a minor thing, but it is better to change it now in the 0.x stage rather after the 1.0 release.

Capitalized:

1. Import.

angular.module('MyApp', ['ngResource', 'ngMessages', 'ngRoute', 'Satellizer', 'mgcrea.ngStrap'])

1. Events.

$scope.$on('Satellizer.loginSuccess', function(event) {

});

1. Internal namespace.

.factory('Satellizer.Popup')
.factory('Satellizer.Oauth2')
.service('Satellizer.Utils')

Lowercase:

1. Import.

angular.module('MyApp', ['ngResource', 'ngMessages', 'ngRoute', 'satellizer', 'mgcrea.ngStrap'])

1. Events.

$scope.$on('satellizer.loginSuccess', function(event) {

});

1. Internal namespace.

.factory('satellizer.Popup')
.factory('satellizer.Oauth2')
.service('satellizer.Utils')

Do Satelizer support IE ?
Because i have problem when try to authorize on IE (11,10 or 9), after log-in in provider window the pop-up close and nothing else happend, user is still not log-in.

Hi.

Redirecting to the login page on 403 stops me from using 403 as it should be (Forbidden). It means that the user is not allowed to execute the given action on a resource. In that case I want to display an error message to the user not redirecting to the login page as that won't solve anything.

401 on the other hand means that the user is not authorized and it is thus OK to require a login.

http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html

Hi sahat,

Great work on satellizer so far. Should you consider integrating oauth2 of django REST server?
You will need to modify the parseUser function to extract the returned token.
In django REST server (and other oauth2 providers), the value of the returned token is in 'access_token' key instead of 'token' key as in your server examples.

Example of the django REST framework is available at this page:
http://www.django-rest-framework.org/api-guide/authentication#oauth2authentication

Hello,

I've looked at a few different auth seeds, and I really like yours, however in testing, I might have crashed your test site.

What I did was:

• click login, auth with google
• log out
• click on the login again, auth with facebook
• click on profile
• try to link google (I saw a message popup with no text in the bottom right)
• try to link facebook (another no-text message in the bottom right)
• log out
• try to register
• site no longer responding

What I was trying to test, as it seems to be a common oversight, I often auth with a random service, and what I'd like to see is a seamless experience based on e-mail address.

So if I auth with google, it should know my e-mail address, and no matter what, the e-mail should always be verified. Once this happens, if I log out and try to login with facebook the next time, it should see that my e-mail is already registered, and ask me to authenticate with my e-mail / password, to ensure that the link is legitimate.

The next time, whether I choose google (linked with e-mail from first login) or facebook (linked with e-mail on second login) I would hope that I'd get a profile with both of these services linked.

If next time I choose github, I'd like the same thing, a verification of the e-mail/password to make sure I'm not trying to take someone's account when I don't own that e-mail, and once that's done, the profile should have all three linked + e-mail/pass.

--Cory

I noticed in the screenshot here:

https://camo.githubusercontent.com/e44f1cad38b343b3ff5fde6d21840aaac470a69e/68747470733a2f2f6c68342e676f6f676c6575736572636f6e74656e742e636f6d2f2d305555496563542d334e342f552d4c514a6b64373569492f4141414141414141455a592f594e334f652d65555047632f77313637362d68313135382d6e6f2f736174656c6c697a65722e706e67

There is a forgot password link. Are there plans to support this by default on the client side? I didn't see it in the node.js server example either.

http://www.jsdelivr.com/

Hello,

Can you please help me with this problem : i'm trying to set-up linkedin auth and i get this message :
Invalid redirect_uri. This value must match a URL registered with the API Key.

From the configs i've seen that the redirect uri is windows.location.origin, but i guess linkedin is asking me for a real api like http://localhost:3000 (i'm using node).
My question is how should i get this going?:D

Thanks,
Alex

I implemented all the example code and a blank window pops up from facebook (no option to authorize). Nothing hits the node.js server (no console.log from any route)

I pasted in my facebook appId and appSecret to the right places. I think I need additional config on the facebook side. Do I have to put a Site URL or something? I want to run the login locally as I don't have a domain name yet

Is there some interest in adding functionality to link-up accounts?

example: I'm logged in by email/password or Facebook, and i like to add
LinkedIn as an alternative login-provider to my existing account.

I was thinking about the following methods:

• link(name)
• unlink(name)

On angular, we need to check that your only able to execute this methods once your logged-in.
On the server the corresponding api calls need to be protected.

Facebook expects scope as a string with each scope separated by comma, where as some other providers like Google expect scope to be separated by space.

Provide a universal interface by using an array notation for all providers.

If setting your own custom OAuth provider, you can specify whether to use comma or space via the scopeDelimiter option.

Hi,

I'm trying to use Satellizer with yeoman/bower. I've added Satellizer to my application, run 'bower build' command and after opening the site in the browser:

Uncaught Error: [$injector:unpr] Unknown provider: aProvider <- a <- $http <- $compile

When i remove Satellizer then everything works correctly. From what i know, bower runs scripts to minify and concatenate files. If i disable this and include satellizer.js in "a normal way" everything works correctly as well. I guess that the code of Satellizer is not adapted to minify/concatenate. In the spare time i will try to check where the problem can be but maybe someone will fix this faster ;-)

There issue with linkedin login related to redirect_uri.

If a user closes a popup or declines authorization reject the promise.

If there is a real error on the back-end (e.g. status comes back as 501 or similar), there is no way of getting at that using $auth.login().catch(), since by then this information is long gone.

Also, if $auth.login() results in e.g. a 401 with message="Bad username or password", the interceptor quietly eats it and puts up the configured login page again. There is no feedback to the user that a login attempt was performed (and failed).

Only in the case that there is an error other than 401 and with JSON message attribute will there be a message displayed to the user.

Hello!

I saw you're assigning currentUser on $rootScope which seems to be a very very common solution, but it is wrong. $rootScope shouldn't be used for that, it is a global variable and that is and always be wrong.

I suggest putting a auth.currentUser() or even a new service for the currentUser. Before you think that you need to inject that new service everywhere, you don't really need it that much, but even so, that is the Angular way.

What do you think? :)

Hi!

We(@bslipek and I) want to build three example apps. One will be a sinatra oauth2 provider and second will be rails app with angular.js on frontend and rails on backend and third with sinatra on backend and angular.js on frontend.

Our Rails/Sinatra app will be authenticate users using satelizer and our custom provider.

This is our Oauth2 workflow right now.

1.Using Satellizer we get the code from provider. We send this code to our backend.
2. In backend using this code, secret key and other params we send an request to provider to get an access token.
3. Using this obtain access token we call '/me' action to get an uid, email and other user attributes from provider.
4. In the same action we parse the response body and we find or create user based on uid.
5. We are wondering about this step which should somehow set the user's authentication token.
a) store the provider access token in user database record.
b) generate new authentication token and change it on every request
6. Generate JWToken with user uid and token and send it back to satellizer.
7. Then on each request Satellizer include Bearer JWToken in header. After recive request our backend verify header token stored in database and call sing_in method in our case devise(sign_in, store: false) maybe in sinatra app we will use warden.

Of course we want to add these apps to satelizer example apps.

What do you think about this concept? Maybe we are missing something. These is our first oauth2 authentication implementation and we are worried about it.

Thanks for Your work! @sahat @lynndylanhurley

EDIT: I moved comment to new issue.

I recently read this stack:
http://stackoverflow.com/questions/18605294/is-devises-token-authenticatable-secure

in short they say that auth tokens should:

• changed after every request,
• of cryptographic strength,
• hashed using BCrypt (not stored in plain-text),
• securely compared (to protect against timing attacks),
• invalidated after 2 weeks (thus requiring users to login again)

But currently satellizer use the same token, and doesn't change token for the new one from request.
So @sahat what do you think? :)

Some applications may not have authentication on a separate page and the library shouldn't force a redirect after a successful login or logout. It should be possible through some value (null) of the loginRedirect and logoutRedirect configuration to disable this behavior.

For example, when I make a remote call which is not authenticated, I display the login partial the user and re-try the call that failed right away. This doesn't require the user to leave the page (and would destroy his work in doing so).

Sahat,

I was thinking that it's maybe a good idea to develop a node-satellizer & express-satellizer middleware module, that hooks up most of the boilerplate code.

• node-satellizer -> basic library with methods to exchange authorization codes etc.. this if someone wants to use satellizer with his own http derived framework like restify etc...
• express-satellizer -> library on top of node-satelizer that hooks into express as middleware, and in which you just register your callback functions like signup user, find user, link, unlink, etc...

(for link, unlink -> see my previous issue)

If you like, i want to help on this.

see #26

Should be a pretty simple fix. The default scope is 'email', but the default 'requiredUrlParams' for Facebook does not include the scope. If we're not asking for the scope, then we should not have a default scope that is not being used.

In the httpInterceptor there is a hardcoded redirect to /login.
$location.path('/login');

This should probably use the value from loginRoute in config

Hi!
Your demo page is currently broken:

Failed to load resource: the server responded with a status of 404 (Not Found) http://rawgit.com/sahat/satellizer/master/lib/satellizer.js

Hello,

Just discovered this library. I have to say that it is plain awesome, really really love it. I am a big fan of JWT and this is a proper implementation (I have to dig into the code yet, but so far so good).

The only thing that bothers me is the service names. $ is reserved for angular services and we shouldn't use it. You can see more here.

You can read:

Do not use $ to prepend your own object properties and service identifiers. Consider this style of naming reserved by AngularJS and jQuery.

It is a pretty big BC, I just leave it for you to consider. If you decide to not change it, that is good for me too, I just pointed it :P

Keep this coming!