background preloader

Deal with users authentication in an AngularJS web app

Deal with users authentication in an AngularJS web app
This post is meant to share some thought about the main issues related to the user’s authentication in an AngularJS web app. This post is about how to maintain, and recognize, the status of authentication of an user (that is, if he’s logged in, or not) between the different routes of a web application. Moreover it also explains how to handle the case of a not authenticated user, who is trying to access to a page, that requires the user to be logged in. Before going into the details of my approach, it is very important to clarify that, because the user has full controll of the browser, each control implemented with front end technologies, must (!) be repeated also in the backend. Recognize an authenticated user There are probably several ways to recognize an authenticated user; infact it’s possible to set a global variable, or create a cookie… but my favourite way to reach the objective is to use an AngularJS service. Are you wondering about how to use this service? Related:  AngularJS

Why does Angular.js rock? Let’s see if we can discover why :) Angular.js is a MV* (Model – View – Whatever) Javascript framework which is maintained by Google which excels in the creation of single-page-applications or even for adding some “magic” to our classic web applications. I could spend all the day writing about why you should try Angular.js in your new project, but I feel that it would be better if we see it in action. Data binding and scopes The first question that usually comes to mind is: Does it support data binding? Let’s see an example of Angular.js’ way of data binding: In this little piece of code, there are a few things to explain but before that, I want you to get familiarized with the code: Try it Insert your name: Echo: NOTE: Don’t worry too much about the ng-app thing at this moment. As you see, what we write in the input, is echoed after it. Ok, but where are we saving that user.name? Alright alright, that wasn’t hard, but…. The idea is something like: Let’s see a complex example: See it Hello, World

Authentication with AngularJS Managing authentication within your AngularJS application is extremely important, initially I found it quite difficult to find some examples of how to do it the right way for my startup keeping the logic clean, and as automated as possible. Initially I just rolled some convoluted solution using the $rootScope to store variables, and then access those variables within my controllers, but it was messy, and created a lot of duplicate code. So I was pointed to an article on the subject (thanks @gdi2290) that had a better example of how to do this, but it wasn’t setup for ui-router, so I had to adapt it a little to work with it. First of all I adjusted my routes to the following: (note the addition of the authenticate property) Then, within my run function, I’m listening to the $stateChangeStart event, which fires each time you move within your application. angular.module("myApp") .run(function ($rootScope, $state, AuthService) { $rootScope.

Daniel Studds » Blog Archive Basic Angular front-end for authentication (SPA Part 3) » Daniel Studds Posted: May 7th, 2013 | Author: Studds | Filed under: Uncategorized | No Comments » This is the third part of a series of blog posts that will walk step-by-step through the process of creating a secure Single Page App (SPA) using node.js, passport.js, and Angular. If you’re new here, you should start at Part 1, where we set up Passport.js. Today, we’re going to get started with Angular. We’re just going to ease in to it: this is deliberately simplified. The complete series of posts will cover: Getting started with passport.jsAdding in usersHandling login, logout, and registration from a single page appAdding in robust remember-me functionalityProtecting against CSRFProtecting against XSSAdding a reasonably robust remember-me to passport jsEnhancing security by adding some simple HTTP headersSetting up to always redirect to SSLPushing our app to HerokuThrottling login attempts Let’s get started The code for this part is at: git clone node app.js

witoldsz/angular-http-auth Google Maps for AngularJS AngularJS — Superheroic JavaScript MVW Framework meliaxford/angular-client-side-auth ngDialog.js, native Angular.js Dialogs and Popups provider ngDialog.js is dialogs and popups provider for Angular.js applications. ngDialog.js is small (~2Kb), has minimalistic API, highly customizable through themes and has only Angular.js as dependency. Features With ngDialog you don’t need jQuery or Bootstrap to create dialogs for ng-app: Use it in controllers, factories or directivesCreate your own directivesStyle all UI and templatesConfigure themesAdd animations and effectsModule is shipped with both ngDialog service and default directive. 10 seconds get started Check it out

Passport | Overview Passport is authentication middleware for Node. It is designed to serve a singular purpose: authenticate requests. When writing modules, encapsulation is a virtue, so Passport delegates all other functionality to the application. This separation of concerns keeps code clean and maintainable, and makes Passport extremely easy to integrate into an application. In modern web applications, authentication can take a variety of forms. Passport recognizes that each application has unique authentication requirements. Despite the complexities involved in authentication, code does not have to be complicated. Install $ npm install passport Authenticating requests is as simple as calling passport.authenticate() and specifying which strategy to employ. authenticate()'s function signature is standard Connect middleware, which makes it convenient to use as route middleware in Express applications. Note: Strategies must be configured prior to using them in a route. Redirects Flash Messages Disable Sessions

Related: