How to achieve a Safe (!) authentication system in an angularjs app?

I'm new with angularjs...

I read the docs, and completed the tutorial; i also tried something else by myself, and things start to make sense to me.

Now i wonder how to make a safe authentication system.

The easy part: no code, i will describe operations my code execute:

> I've a classic form: username, and password text input. > > The user fills the form, and press ENTER. > > An ajax request starts, and the response is a JSON telling me > something like "ok i know you" or "i don't know who you are".

What i need now is to mantain the logged status of the visitor (or not logged) between the different views of my application.

I read on the internet that, to achieve this objective, someone sets a variable ($scope.isLogged = true), someone else uses cookies; but javascript variables, and cookies can be easily edited using firebug, or similiar development tools.

... and finally the question:

So, have you some suggestion to achieve a safe authentication system in an angularjs app?

You cannot authorize anything in angularjs, because the user has full controll of the execution environment (namely, the browser). Each check, case, if - anything you can think of - can be tampered with. There are javascript libraries that use asymmetric keys to perform local encryption to store local data somewhat safely, but they are not what you are looking for, really.

You can, and you should, authorize things on the server - the standard way you would do it in an ordinary application - using session; no special code is necessary, ajax calls use ordinary session cookies. Application does not need to know whether it's authenticated or not. It only needs to check what server thinks.

From the perspective of your angularjs application, being "logged in" or "logged out" is merely a gui hint for the user.

Probably you found a solution, but currently I made up an authenticaiton scheme I'm implementing in my Angular App.

On .run the app is registered with an ActiveSession set to false. It then checks if the browser has a cookie with a token and a userId.

If YES, check token+userId on server and updates the token on both server and local (token it's a server generated key unique for each user)

If NO shows login form, check credentials and again if they are valid does a server request t get a new token and saves is locally.

The token is used to make a persistent login (remember me for 3 weeks) or when user refreshes the browser page.

Thank you

I asked this question three months ago.

I would like to share what has become my favourite approach when I've to deal with user authentication in a web app built over AngularJS.

Of course fdreger's answer is still a great answer!

> You cannot authorize anything in angularjs, because the user has full > controll of the execution environment (namely, the browser).

> From the perspective of your angularjs application, being "logged in" > or "logged out" is merely a gui hint for the user.

So, briefly my approach consists in:

1. Bind to each route additional information about the route itself.

   $routeProvider.when('/login', { templateUrl: 'partials/login.html', controller: 'loginCtrl', isFree: true });

2. Use a service to mantain the data about each user, and their authentication status.

   services.factory('User', [function() { return { isLogged: false, username: '' }; }]);

3. Everytime the user try to access a new route, check if they have the grant to access.

   $root.$on('$routeChangeStart', function(event, currRoute, prevRoute){ // prevRoute.isFree tell me if this route is available for all the users, or only for registered user. // User.isLogged tell me if the user is logged })

I also wrote about this approach (more in detail) on my blog, users authentication with angularjs.

First of all: Client-side data can always be manipulated or tampered with.

As long as valid session IDs aren't easily guessable and measures like associating session tokens with the client's IP there is no big deal about it.

You could, in theory, also encrypt the cookie, as long as you do so on the server side.

For details on how to encrypt your cookies, see the docs of your server-side (e.g http://expressjs.com/api.html#res.cookie for Express.js)

You need to learn about the server side / database end of it.

User logins need to be stored somewhere - 99.9% of the time this is in a server side database.

Ideally for a really secure system you want a backend (server side) membership system that stores the session in a database table that is related to the member table that holds the encrypted password, but also provides a RESTful interface where you can build your api calls to.

One Script that I've used successfully a lot has been Amember https://www.amember.com/. It's a really cost effective way to go although there are a lot of other script out there, I've had a lot of success with this one.. It's also PHP so you can build your build out an API for your angular http calls really easily.

All of these javascript frameworks are great but the effect is that now too many are focusing too much on the front end of things - learn the database / backend as well! :-)