JAVASCRIPT

Build A Contact Management web Application with AdonisJS Framework – Part 2


Let’s continue from our last post. In this article, we will be working on:

  1. User authentication.

# User Authentication.

Let’s create an authentication controller to handle all about authentication using an ace command:

make:controller command creates a new controller called AuthController in the “app/Http/Controllers/” directory. 

Now, we are going to work on creating navigation bar and alerts view for the application so we can include it in any of our views. Let’s create ‘layout’ folder in ‘resources/views’ then create  nav.njk and alerts.njk files

nav.njk

alerts.njk

Moving on, we shall create register and login view right away.

Create a folder, name: “auth” in “resources/views” directory then create the two views needed

login.njk

Login Page

Login Page

register.njk

Register Page

Register Page

In the above views, you will discover some helper functions like;

csrfField: This helps to prevent cross-site request forgery(One Click Attack).
old: This helps to return input, a user entered in a previous submission of a form.

Now go to routes.js in ‘app/Http’ directory and add this.

Back to AuthController.js, we will add this,

The “showLogin” method renders login page to the browser while “showRegister” method renders register page

Before we continue, let’s setup our validator which will have us valid our forms for the application. To set it up, we need to install “adonis-validation-provider” from npm:

Then, we need to add it to our providers array and aliases object in “bootstrap/app.js” file

Let’s process our registration form. Head to AuthController.js and add this method.

The “postRegister” method processes the user registration form. First, we set some validation rules then we validate the user inputs. If it fails, we return to the registration page with error messages along with the original user input. If it passes, we create the user using the “User.create” method and redirect the user to login page. You can go on and register.

Before we continue, let’s quickly create contact controller and landing page for contacts. To create a contact controller using an ace command:

Then, we’ll add;

To create the landing page for contact. Create ‘contacts’ folder inside ‘resources/views’ directory then Create a file called index.njk inside the folder and add the following code,

Now, let’s process our login form.  Head over to AuthController.js and add this method.

The “postLogin” method processes the user login form. First, we get the user input then authenticate the email and password. If it’s correct, it will redirect the user to the contact landing page else it will return to the login page with an error message “Invalid Credential”.

Next, we need to add contact landing page route. Open routes.js in ‘app/Http’ directory and add this

The middleware helps in securing the route. We should be able to log in now

Logout

Let’s Head over to AuthController.js and add this method.

Now, we can authenticate the user in our application.

Watch out for the next post.

Please if you have any questions or observations, feel free to drop it in the comments section below. We would be happy to respond to you.

Olusegun Ayeni

About Olusegun Ayeni

I am a charismatic developer that's constantly in awe of modern technology changes and innovation and strives to follow these changes to build world class modern applications.