Token based Authentication with Angular

Question

I want to authenticate users through api, when username and password is right it returns a token and store on local storage using ngStorage but I read some articles that it's not secure saving token on localStorage, and they made reference to storing it to cookies Http. How can I store the token on cookies Http and is it secure or is there a better way of handling token authentication

$scope.loginUser = function(){
    $http({
      method: 'POST',
      url: 'ourdomain.com/api/token',
      headers: 
      {
          'Content-type': 'application/x-www-form-urlencoded',
      },
      data: 
      'UserName=' + $scope.username + 
      '&Password=' + $scope.password 
      }).success(function(data, status) {
               $localStorage.token = data;
               console.log(data);
      })
      .error(function(data, status) {
          console.log("Error");
      });
}

You could start with looking into angular-cookies: https://github.com/angular/bower-angular-cookies — Rob, Apr 29 '16 at 14:19

score 2 · Answer 1 · edited May 23 '17 at 11:52

2

for cookie the user can disable cookie.

this link can explain you Token based vs. Cookie based

https://auth0.com/blog/2014/01/07/angularjs-authentication-with-cookies-vs-token/

and this for the difference between localStorage, sessionStorage, session and cookies : What is the difference between localStorage, sessionStorage, session and cookies?

edited May 23 '17 at 11:52

Community

1
1

answered Apr 29 '16 at 14:39

EL missaoui habib

1,075
1
14
24

score 1 · Answer 2 · answered Apr 29 '16 at 14:39

1

I warmly suggest you to use stallizer: https://github.com/sahat/satellizer

Login with Email and Password

Client: Enter your email and password into the login form.

Client: On form submit call $auth.login() with email and password.

Client: Send a POST request to /auth/login. Server: Check if email exists, if not - return 401.

Server: Check if password is correct, if not - return 401.

Server: Create a JSON Web Token and send it back to the client.

Client: Parse the token and save it to Local Storage for subsequent use after page reload.

var user = {
  email: $scope.email,
  password: $scope.password
};

$auth.login(user)
  .then(function(response) {
    // Redirect user here after a successful log in.
  })
  .catch(function(response) {
    // Handle errors here, such as displaying a notification
    // for invalid email and/or password.
  });


// Controller
$scope.isAuthenticated = function() {
  return $auth.isAuthenticated();
};

<!-- Template -->
<ul ng-if="!isAuthenticated()">
  <li><a href="/login">Login</a></li>
  <li><a href="/signup">Sign up</a></li>
</ul>
<ul ng-if="isAuthenticated()">
  <li><a href="/logout">Logout</a></li>
</ul>

answered Apr 29 '16 at 14:39

thegio

1,233
7
27

Can I use this with my api? I can see clientID, what is clientID? Also I think it uses other social network login but not with my own Login API – user3055606 Apr 29 '16 at 14:56
for example to respond to POST request to /auth/login. instead of ourdomain.com/api/token – thegio Apr 29 '16 at 15:03
what of the clientID, what is it about? – user3055606 Apr 29 '16 at 15:07
if you want to use an external auth provider, like Facebook, but that is not your case – thegio Apr 29 '16 at 15:08
I read about auth0, it seems to be an online user management system, that's not what i want – user3055606 Apr 29 '16 at 15:10
https://github.com/sahat/satellizer#-login-with-email-and-password check this section, I'm just telling you not to reinvent the wheel... I'm not saying it is all automagic – thegio Apr 29 '16 at 15:11
my problem is that how can i adapt my api to it? do you have any example you can show – user3055606 Apr 29 '16 at 15:18
dude you are not reading, I wrote it in the 2nd comment, you need to adapt the API to respond to the /auth/login POST and return the JWT Token. – thegio Apr 29 '16 at 15:20
you mean my post request will go to ourdomain.com/auth/login – user3055606 Apr 29 '16 at 15:23
exactly! and then serverside you have to return a valid JWT Token – thegio Apr 29 '16 at 15:26
check the server examples: https://github.com/sahat/satellizer/tree/master/examples/server, then it will work :) – thegio Apr 29 '16 at 15:29

Token based Authentication with Angular

2 Answers2