AngularJS User Registration and Login Example & Tutorial | Jason [PDF]

MARCH 10 2015

AngularJS User Registration and Login Example & Tutorial December 13 2016 - Updated to Angular 1.6 Building on from a previous tutorial I posted on how to implement Basic HTTP Authentication with AngularJS (/post/2014/05/26/AngularJS-Basic-HTTPAuthentication-Example.aspx), in this post I've extended that example to include a simple user registration form. The project is available on GitHub at https://github.com/cornflourblue/angular-registration-login-example (https://github.com/cornflourblue/angular-registrationlogin-example) The example uses HTML5 local storage for storing the users so I could show it working without a back end, however the project also contains a user service built to interact with a RESTful web service. To switch from local storage to the web service implementation just update which script is embedded in the index.html file, note that for this to work you also need to create the RESTful web service for managing users :) Here it is in action:

AngularJS User Registration and Login Example



Preview

Project home home.view.html login login.view.html register register.view.html app.js index.html

Plunker is Backed By: Read more…

Google Cloud - Learn and build on GCP for free. Try it free.



AD



(See on Plunker at http://plnkr.co/edit/tg25kr?p=preview (http://plnkr.co/edit/tg25kr?p=preview))

Update History:

13 Dec 2016 - Updated to Angular 1.6.0 and replaced deprecated $cookieStore service with $cookies 29 Sep 2016 - For an updated version of this example built with Angular 2 & TypeScript go to Angular 2 User Registration and Login Example & Tutorial (/post/2016/09/29/angular-2-user-registration-and-login-example-tutorial) 09 Dec 2015 - For a full stack example & tutorial that includes a back end using the MEAN stack on NodeJS go to MEAN Stack User Registration and Login Example & Tutorial (/post/2015/12/09/MEAN-Stack-User-Registration-and-Login-Example.aspx)

Running the AngularJS Tutorial Project Locally To run the project on your local machine first download the code from GitHub at https://github.com/cornflourblue/angular-registration-login-example (https://github.com/cornflourblue/angular-registration-login-example). Once you've downloaded the code you need to use a local web server to serve the files to your browser, opening the index.html directly from the file system will not work. One of the easiest ways to setup a local web server is to use NodeJS, to find out how I've written another short post on how to setup a simple web server with NodeJS (/post/2016/06/22/NodeJS-Setup-Simple-HTTP-Server-Local-Web-Server.aspx).

AngularJS Project Structure I've based a lot of the project and code structure on recommendations from John Papa's style guide (https://github.com/johnpapa/angular-styleguide) with my own tweaks here and there, for example I've placed application config and routes within the app.js file rather than separate files because there isn't much code in either section, these could be split out later if the sections grow. I'm also trying out placing application services and content in folders prefixed with 'app-' to prevent having a name clash if I need to add a section to my app called 'services' or 'content', it also has the added benefit of grouping all the 'non-gui' code together at the top of the folders. Here's what the project structure looks like: app-content app.css app-services authentication.service.js flash.service.js user.service.js user.service.local-storage.js home home.controller.js home.view.html login login.controller.js login.view.html register register.controller.js register.view.html app.js index.html Below I've included brief descriptions of the main files that have to do with user registration and authentication, all the files are available at the github project linked at the top of the post.

AngularJS Authentication Service Back to top The authentication service contains methods for authenticating a user, setting credentials and clearing credentials from the HTTP "Authorization" headers used by the AngularJS $http service, so effectively logging in and out. The example uses dummy authentication in order to show the example working on plunker without a back end, but real authentication can be setup by following the comments in the Login function. (function () { 'use strict'; angular .module('app') .factory('AuthenticationService', AuthenticationService); AuthenticationService.$inject = ['$http', '$cookies', '$rootScope', '$timeout', 'UserService']; function AuthenticationService($http, $cookies, $rootScope, $timeout, UserService) { var service = {}; service.Login = Login; service.SetCredentials = SetCredentials; service.ClearCredentials = ClearCredentials; return service; function Login(username, password, callback) { /* Dummy authentication for testing, uses $timeout to simulate api call ----------------------------------------------*/ $timeout(function () { var response; UserService.GetByUsername(username) .then(function (user) { if (user !== null && user.password === password) { response = { success: true }; } else { response = { success: false, message: 'Username or password is incorrect' }; } callback(response); }); }, 1000); /* Use this for real authentication ----------------------------------------------*/ //$http.post('/api/authenticate', { username: username, password: password }) // .success(function (response) { // callback(response); // }); } function SetCredentials(username, password) { var auth> Login Username Username is required Password Password is required Register Cancel

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30



AngularJS App.js Back to top The part of this file related to authentication is in the run function, when the app starts it checks if there's a cookie containing user credentials meaning the user has already logged in, this is to keep the user logged in after a page refresh. On each location change there's a check to verify that the user is logged in if trying to access a restricted page, if not they're redirected to the login page. (function () { 'use strict'; angular .module('app', ['ngRoute', 'ngCookies']) .config(config) .run(run); config.$inject = ['$routeProvider', '$locationProvider']; function config($routeProvider, $locationProvider) { $routeProvider .when('/', { controller: 'HomeController', templateUrl: 'home/home.view.html', controllerAs: 'vm' }) .when('/login', { controller: 'LoginController', templateUrl: 'login/login.view.html', controllerAs: 'vm' }) .when('/register', { controller: 'RegisterController', templateUrl: 'register/register.view.html', controllerAs: 'vm' }) .otherwise({ redirectTo: '/login' }); } run.$inject = ['$rootScope', '$location', '$cookies', '$http']; function run($rootScope, $location, $cookies, $http) { // keep user logged in after page refresh $rootScope.globals = $cookies.getObject('globals') || {}; if ($rootScope.globals.currentUser) { $http.defaults.headers.common['Authorization'] = 'Basic ' + $rootScope.globals.currentUser.authdata; } $rootScope.$on('$locationChangeStart', function (event, next, current) { // redirect to login page if not logged in and trying to access a restricted page var restrictedPage = $.inArray($location.path(), ['/login', '/register']) === -1; var loggedIn = $rootScope.globals.currentUser; if (restrictedPage && !loggedIn) { $location.path('/login'); } }); } })();

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

?



Recommended Books on AngularJS To learn more about all the ins and outs of AngularJS I recommend checking out the AngularJS Web Application Development Cookbook (https://www.amazon.com/gp/product/1783283351/ref=as_li_tl? ie=UTF8&camp=1789&creative=9325&creativeASIN=1783283351&linkCode=as2&tag=jasonwatmore-20&linkId=7aecda99efd0a460dd00b5ed247c3c30) by Matt Frisbee, it's full of great real-world examples that are broken down really well by the author.

Web Development Consultant and AngularJS Consultant Sydney Feel free to drop me a line (/contact) if you're looking for web development or AngularJS development or consulting services in Sydney Australia, I also provide remote contracting services for clients outside Sydney.

AngularJS Books

Angular JS for Beginners: Your Guide to Easily Learn Angular JS In 7 Days (http://aaxus-east.amazon$13.92 $17.95 adsystem.com/x/c/QrteE1ZvWA2jlPXQJ_R… JS-Beginners-Guide (37) Easily/dp/1549578561/ref=sm_n_se_dkp_J… adId=1549578561&creativeASIN=1549578… 20&linkCode=w42&refrefURL=http%3A%2F%2Fjasonwatmore.co… user-registration-and-login-exampletutorial&slotNum=0&imprToken=oCGrwB…

Pro AngularJS (Expert's Voice in Web Development) (http://aax-us-east.amazonadsystem.com/x/c/QrteE1ZvWA2jlPXQJ_R… $29.59 AngularJS-Experts-Voice-Developmentebook/dp/B00HX4PJ9I/ref=sm_n_se_dkp_J… (107) adId=B00HX4PJ9I&creativeASIN=B00HX… 20&linkCode=w42&refrefURL=http%3A%2F%2Fjasonwatmore.co… user-registration-and-login-exampletutorial&slotNum=0&imprToken=oCGrwB…

ANGULARJS: Easy AngularJS For Beginners, Your Step-By-Step Guide to A… (http://aax-us-east.amazon$29.95 adsystem.com/x/c/QrteE1ZvWA2jlPXQJ_R… Step-Step-Application (32) Development/dp/1534639403/ref=sm_n_se_… adId=1534639403&creativeASIN=1534639… 20&linkCode=w42&refrefURL=http%3A%2F%2Fjasonwatmore.co… user-registration-and-login-exampletutorial&slotNum=0&imprToken=oCGrwB…

AngularJS: Up and Running: Enhanced Productivity with Structured Web Apps (http://aax-us-east.amazon$26.73 $39.99 adsystem.com/x/c/QrteE1ZvWA2jlPXQJ_R… Running-Enhanced-Productivity (24) Structured/dp/1491901942/ref=sm_n_se_dk… adId=1491901942&creativeASIN=1491901… 20&linkCode=w42&refrefURL=http%3A%2F%2Fjasonwatmore.co… user-registration-and-login-exampletutorial&slotNum=0&imprToken=oCGrwB…

AngularJS, JavaScript, and jQuery All in One, Sams Teach Yourself (http://aax-useast.amazon$29.36 $44.99 adsystem.com/x/c/QrteE1ZvWA2jlPXQJ_R… JavaScript-jQuery-Teach (9) Yourself/dp/0672337428/ref=sm_n_se_dkp…

AngularJS Web Application Development Cookbook (http://aax-us-east.amazonadsystem.com/x/c/QrteE1ZvWA2jlPXQJ_R… $35.99 Web-Application-DevelopmentCookbook/dp/1783283351/ref=sm_n_se_dk… (25) adId=1783283351&creativeASIN=1783283…

Learning AngularJS: A Guide to AngularJS Development (http://aax-us-east.amazonadsystem.com/x/c/QrteE1ZvWA2jlPXQJ_R… $29.90 $34.99 AngularJS-GuideDevelopment/dp/1491916753/ref=sm_n_se_… (8) adId=1491916753&creativeASIN=1491916…

Professional AngularJS (http://aax-useast.amazonadsystem.com/x/c/QrteE1ZvWA2jlPXQJ_R… $13.99 $45.00 AngularJS-ValeriKarpov/dp/1118832078/ref=sm_n_se_dkp_… (20) adId=1118832078&creativeASIN=1118832…

Ads by Amazon (http://aax-us-east.amazon-adsystem.com/x/c/QrteE1ZvWA2jlPXQJ_RYwRgAAAFhrgNilQEAAAFKAT3zwAE/https://affiliate-program.amazon.com/home/ads/ref=sm_n_se_dkp_JP_logo? adId=logo&creativeASIN=logo&linkId=4fb95c3ae51a57ccd0fdd8ceff384bd2&tag=jasonwatmore-20&linkCode=w42&ref-refURL=http%3A%2F%2Fjasonwatmore.com%2Fpost%2F2015%2F03%2F10%2Fangularjsuser-registration-and-login-example-tutorial&slotNum=0&imprToken=oCGrwBGG.3IPq18..DFOmg&adType=smart&adMode=search&adFormat=grid&impressionTimestamp=1519042587752&ac-ms-src=nsaads&cid=nsa-ads)

(https://www.amazon.com/adprefs)

Tags: AngularJS (/posts/tag/angularjs), Login (/posts/tag/login), Registration (/posts/tag/registration), Authentication and Authorization (/posts/tag/authentication-and-authorization)

Share:





More AngularJS Posts Angular 1 vs Angular 2+ - Comparing Examples to Learn Angular 2+ (/post/2016/11/20/angular-1-vs-angular-2-comparing-examples-to-learn-angular-2) MEANie - Lightweight MEAN Stack CMS & Blogging Platform (/post/2016/10/29/meanie-mean-stack-blogging-platform) AngularJS - Slugify Filter (/post/2016/08/30/angularjs-slugify-filter) AngularJS - Enable HTML5 Mode Page Refresh Without 404 Errors in NodeJS and IIS (/post/2016/07/26/angularjs-enable-html5-mode-page-refreshwithout-404-errors-in-nodejs-and-iis) AngularJS - Custom Modal Example & Tutorial (/post/2016/07/13/angularjs-custom-modal-example-tutorial) Angular - CKEditor Directive with ngModel Binding (/post/2016/05/26/angular-ckeditor-directive-with-ngmodel-binding) AngularJS JWT Authentication Example & Tutorial (/post/2016/04/05/angularjs-jwt-authentication-example-tutorial) AngularJS - UTC to Local Date Time Filter (/post/2016/03/31/angularjs-utc-to-local-date-time-filter) AngularJS - Pagination Example with Logic like Google (/post/2016/01/31/angularjs-pagination-example-with-logic-like-google) Angular ngAnimate Tutorial & Example with UI Router (/post/2016/01/20/angular-nganimate-tutorial-with-ui-router) AngularJS - Google Analytics with the UI Router (/post/2015/11/07/angularjs-google-analytics-with-the-ui-router) Unit Testing in AngularJS with Mocha, Chai, Sinon & ngMock (/post/2015/04/09/unit-testing-in-angularjs-with-mocha-chai-sinon-ngmock) AngularJS - Unit Testing code that uses $timeout (/post/2015/03/06/angularjs-unit-testing-code-that-uses-timeout) Web API 2 + Angular - Basic HTTP Authentication Example (/post/2014/12/01/web-api-2-angular-basic-http-authentication-example) AngularJS directives for social sharing buttons - Facebook Like, Google+, Twitter and Pinterest (/post/2014/08/01/angularjs-directives-for-social-sharingbuttons-facebook-like-google-plus-twitter-and-pinterest) AngularJS Basic HTTP Authentication Example (/post/2014/05/26/angularjs-basic-http-authentication-example) Post a simple string value from AngularJS to .NET Web API (/post/2014/04/18/post-a-simple-string-value-from-angularjs-to-net-web-api)

Sponsored by

Ionic Framework - Getting 'ionic start [appName]' Working Behind a Proxy (/post/2014/04/02/ionic-framework-getting-ionic-start-appname-working-behind-aproxy) AngularJS - A Better Way to Implement a Base Controller (/post/2014/03/25/angularjs-a-better-way-to-implement-a-base-controller) AngularJS - Reverse Geocoding Directive (/post/2014/02/15/angularjs-reverse-geocoding-directive)

Student Stuns Doctors With Crazy Method to Melt Fat Are you looking to burn belly fat, but diet and exercise is not enough? A student from Cornell University recently discovered the fastest way to lose weight by combining these two ingredients. Learn More Sponsored by Online Health & Fitness

Report ad

(//srv.carbonads.net /ads/click/x/GTND42 QJF6YDVKQWC6B 4YKQMC6AIT5QNC KADEZ3JCWYIE5Q JCV7I6KJKC6BI45Q ECEYIKK3EHJNCLS IZZRLCP7I35MNFV ? segment=placement :jasonwatmore;&enc redirect=https%3A% 2F%2Fad.doubleclic k.net%2Fddm%2Ftr ackclk%2FN5295.16 76840CARBONADS .COM%2FB104446 36.213266676%3Bd c_trk_aid%3D41239 6604%3Bdc_trk_cid %3D75142946%3B dc_lat%3D%3Bdc_r did%3D%3Btag_for _child_directed_trea tment%3D)

ABOUT

MONTHS

TAGS

I'm a web developer in Sydney Australia and the

2018 January (/posts/2018/01) (1) 2017 2016 2015 2014 2013 2012 2011

Angular 2, Angular 4, Angular 5, Angular Directive, Angular UI Router, Kubernetes made easy AngularJS, Animation, ASP.NET, ASP.NET Web API, with Google Container Authentication and Authorization, Bootstrap, C#, Chai, CKEditor, CSS3, Engine. Try it free. (//srv.carbonads.net/ads DDD, Design Patterns, Dynamic LINQ, ELMAH, ES6, Exchange, /click/x/GTND42QJF6Y Facebook, Fluent NHibernate, Google Analytics, Google API, DVKQWC6B4YKQMC6 Google Maps API, Google Plus, Heroku, HTML5, HTTP, AIT5QNCKADEZ3JCW IIS, YIE5QJCV7I6KJKC6BI Insecure Content, Instagram API, Ionic Framework, iOS, iPhone, 45QECEYIKK3EHJNCL JavaScript, jQuery, LINQ, Login, MEAN Stack, Mocha, Modal, MongoDB, SIZZRLCP7I35MNFV? Moq, MVC, MVC5, ngMock, NHibernate, Ninject, NodeJS, Pagination, segment=placement:jas Pinterest, React, Redmine, Redux, Registration, Repository, onwatmore;&encredirec Security, t=https%3A%2F%2Fad. Sinon, SinonJS, TDD, Twitter, TypeScript, Umbraco, Unit of Work,

technical lead at Point Blank Development (https://www.pointblankdevelopment.com.au), I've been building websites and web applications in Sydney since 1998.

doubleclick.net%2Fdd

m%2Ftrackclk%2FN52 Unit Testing, URL Rewrite, Validation, Windows Server 2008,

Find me on:

95.1676840CARBONA DS.COM%2FB1044463 6.213266676%3Bdc_tr k_aid%3D412396604 %3Bdc_trk_cid%3D751 42946%3Bdc_lat%3D %3Bdc_rdid%3D%3Bta g_for_child_directed_tr eatment%3D)

(https://twitter.com/jason_watmore) (https://github.com/cornflourblue) (http://stackoverflow.com/users/2955770/jason)

Powered by MEANie (http://jasonwatmore.com/post/2016/10/29/meanie-mean-stack-blogging-platform) © 2018 JasonWatmore.com

ads via Carbon (http://carbonads.net/? utm_source=jasonwatm ore&utm_medium=ad_ via_link&utm_campaig n=in_unit&utm_term=ca rbon)