AngularJS User Registration Login Authentication Example

User authentication is very common in modern web application. User authentication is a security mechanism that is used to identify whether a user is someone who he claimed to be and to restrict unauthorized access to member only areas in a web application. In this tutorial we’ll show you how to create simple user registration and login system using angularjs. In our previous articles we have demonstrated you how to create simple user login in angularjs and how to create simple user registration in angularjs.

In this tutorial, we’ll guide you through the complete process of creating a user registration system where users can create an account by providing username, email and password, login and logout using Angularjs. We’ll also show you how you can make some pages accessible only to logged-in users. In this tutorial we will first create user registration form in angularjs, and then we’ll create user authentication or login form in angularjs, as well as a welcome page and a logout script.

Project’s Directory Structure :-

AngularJS Application Layout

Before starting with this tutorial we will create base layout i.e. index.html file where all our application views will be loaded. Let’s create index.html file and put the following code in it –

index.html

AngularJS Application

Every angular application starts from creating a angular module. Module is a container that holds the different parts of your application such as controllers, service, etc. In this step we will create a main javascript file app.js that will hold all the required configuration to run an angularjs application. We will also configure application routes in this file using AngularJS UI Router module. Let’s create app.js file and put the following code in it –

app.js

The app variable is initialized as angular module, notice that we have used ng-app directive in index.html file to bind the angular application to a container in base layout file. Now, we have created an app module and added ngRoute and ngCookies module for application routing and for storing user information in cookies. Here, we are using $routeProvider in config() function to configure our application routing. In routing configuration, every route you specify have a template file and a controller attached to it.

AngularJS Template and Controller

As you can see in routing configuration, every route you specify have a template and controller attached to it. Angularjs Template file holds all html that is being used to display route specific page. The angularjs controller hold the actual business logic attached with the route. In this step we will create separate template and controller files for user registration, login and home page respectively.

User Registration :-

In this step we’ll create a registration form that allows users to create a new account by filling out a web form. User Registration form will have First Name, Last Name, Username and Password along with Register and Cancel buttons. Let’s create a register.html file in your project’s root directory and put the following code in it –

register.html

Now, we’ll create registerController.js file and define our registration controller. Let’s create registerController.js file and put the following code in it –

registerController.js

Here, register() function is invoked when Register button is clicked. The register() function takes the user input and pass it to create() function in UserService. UserService will process the user input and respond back with either success or failure.

User Login :-

In this step we’ll create a simple login form having two input fields ( UserName and Password) along with a login button. Here, user will input their username and password and submit the login form using login button. As the login form is submitted it will call login() function from our login controller(loginController.js) which will further use Authentication Service(AuthenticationService.js) to authenticate user. if the user is authenticated successfully they will be redirected to a user home page using $location service. If authentication fails, the user is notified with an error message.

login.html

In this step we’ll create a simple login form that allows users login using their username and password. Let’s create a login.html file in your project’s root directory and put the following code in it –

Now, we’ll create loginController.js file and define our login controller. Let’s create loginController.js file and put the following code in it –

loginController.js

User Home :-

Once a user is successfully logged in the home page (home.html) will be loaded. Here, we have simple welcome message along with a list of registered users. Let’s create a home.html file in your project’s root directory and put the following code in it –

home.html

Now, we’ll create homeController.js file and define our home page controller. Let’s create homeController.js file and put the following code in it –

homeController.js

This will have loadCurrentUser() and loadAllUsers() functions to display currently logged in user details and to to display a list of all the registered users.

AngularJS Services

In this step, we will define angualrjs service for user authentication and to store and fetch user information form local storage.

Authentication Service :-

Here, we will create a authentication service(authenticationService.js) that will be used to authenticate user with login credentials provided and to set and clear user credentials from angularjs rootScope object. Let’s create authenticationService.js file and put the following code in it –

authenticationService.js

User Service :-

Next, we will create a user service(userService.svc.js) to store and fetch user details from the localStorage object. Let’s create userService.svc.js file and put the following code in it –

userService.svc.js

Fially, we will have css(style.css) file that will hold all the styling rules for our application/ Let’s create a style.css file and put the following code in it –

style.css

Run AngularJS Application

Now start the application server and visit the application to view the output.

Registration Page :-

Login Page :-

Home Page :-