Let’s Build Signup, SignIn, and Role-Based Access in Our E-Commerce App
Published: 2021-01-10 07:21:28

{% youtube cfgwH4XQkvI %}
An Overview Of The Tutorial!

    Introduction

    Database Design

    API Design

    Demo overview

    Signup

    Dealing with the Android Application

    Our Intention

    Requirements

    Dependencies

    Permissions

    Creating Models

    Updating the API

    Creating Activities

    The Main Page

    Signing Up Users

    Signing In Users

    Constructing the Dashboard

    Running the Application

    Resources

**Introduction**

This is a series of tutorials we are building to demonstrate how to build an E-Commerce App, one component at a time.

We are going to implement a basic authentication which will be extended to role-based access i.e. Admin can change anything, add new Users, a manager can only add/update Category and Products, users can only see the products and Category.

When users/admin sign in, we will generate an authentication token, which will be used to verify the users, when they are going to access an API later.

**Database Design**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ijakbo2gz4d78ybecaxv.png)

We will have a user table and tokens table. For every user, when they signUp and sign in, we will generate a token, which will have an expiry date. After the expiry day has passed, we should generate a new token, although we will not cover it in the tutorial.

**API Design**
{% gist https://gist.github.com/nilmadhab1995/f4c507635aebecdcd51dcd7414282d7d.js %}
UserController will have two methods, Signup and SignIn, which will be POST requests.

**Demo Overview**

{% youtube UGAjCy5Jc4A %}

**SignUp**

Let's look at signUp API. It takes SignupDto as Input and returns True or False as output depending upon if SignUp succeeds.

{% gist https://gist.github.com/nilmadhab1995/46ebfe02fd7554b20e38a7e1d331cffa.js %}
We follow these steps for signup

    1.Encrypt the password
    2.Save the User
    3.Generate auth token and save it in database
    4.Return Success

{%gist https://gist.github.com/nilmadhab1995/fcf95158baab020f7c3d6381ad54a768.js %}

We will now look at models that are mapped as a table in the database

{% gist https://gist.github.com/nilmadhab1995/c3ca9fad0745bd1e0d275aeef3e7646c.js %}

User and Tokens are linked by user_id field in tokens table, which has one to one relationship, i.e one user can have one token and vice versa.

{% gist https://gist.github.com/nilmadhab1995/96cbca2bdff1a97a80aaf0be7e9ab786.js %}

Start building the Android Application

Next, we are going to use the same REST API to perform the user authentication process in the same android application that we have created and deployed in the last tutorial. If you have not followed up, please check out the tutorial using the link given below.

{% medium https://medium.com/javarevisited/lets-add-products-in-android-for-e-commerce-app-b8468e055001 %}

**Our Intention**

In our last tutorial above, we have created ways in our application to view, add, and update our products by communicating with our REST API service.

Now we are going to limit the access of adding and updating products only to the authenticated users. Non-authenticated users can simply checkout all products we have, but they are not permitted to edit.

Our intention is to achieve such functionality mentioned above in our application. Get ready to explore!
**Requirements**

Though we have no new requirements for the application to achieve basic authentication, let’s revise them for the new readers’ convenience.

    Android Studio (Completely Setup with SDK)
    Android Virtual Device
    Cloud Hosted E-Commerce Backend API
    Retrofit- to interact with the API
    Glide- to load images

Steps to set up your work environment in Android Studio can be found here.
Dependencies

No new dependencies are needed for extending the user authentication functionality in our application. Anyway, I’ll showcase all dependencies we have used in our application.

    Recycler View
    Card View
    Retrofit
    Gson converter
    Glide

**Permissions**

Same as dependencies, we don’t need any extra permissions to extend the required functionality to our application.

We only need internet permissions to communicate with the RESTful service. It was added during the last-mentioned tutorial.

You can check out the app/src/main/AndroidManifest.xml file of our application below-

{% gist https://gist.github.com/nilmadhab1995/63e423bade56b8e813baaf749f9b990e.js %}

**Creating Models**

We already have a model for the Product to send and receive through the API. Likewise, we need to create a model for the user to pass their credentials through our API.

Our user model accepts the credentials first name, last name, email id, and a password to save a user to the backend and the respective user’s email id and password to sign in them into the application.

Therefore, create a class User, that has four fields firstName, lastName, email, and password, as shown below-

{%gist https://gist.github.com/giridhar30/52ff493913cbaaae2989ee3646662527.js %}

And now we have all the required models to interact with our API. Let’s go ahead with making the user objects interact with our RESTful service.
Updating the API

We need to update the interface API that we have created so that it also interacts with the Users API in our backend.

We already have the interaction with the products API. Without disturbing that, we need to establish interaction with the Users API in our RESTful service. For the same, we are gonna update the API.java in our project.

You can update the same as below-

{% gist https://gist.github.com/giridhar30/de7f0f68c4854111b7499118e59b0e20.js %}

Now we can interact with the Users API of our backend. Let’s move further!
Creating Activities

We all know that activities are the basic building blocks of the application. An activity consists of a layout file and a java class to control the same.

We are provided with the pre-built activity called Main Activity. And also, we have added the following working activities to our application.

    ListProducts Activity
    AddProduct Activity
    UpdateProduct Activity

For this tutorial, we need three more activities to sign up a user, sign in a user, and show the dashboard to the users respectively. Go ahead and create the following activities by following the steps: Right-click on the MainActivity residing package -> New -> Activity -> Empty Activity

    SignupActivity

    SigninActivity

    DashboardActivity

**The Main Page**

The previous main page consisted mainly of buttons that navigate to add or update products and list products. But the functionalities of adding and updating products should be available only after the user is signing in. So, we are removing it from the main activity’s layout file.

Instead of that, we are adding two buttons that navigate to the user signup and user sign-in activity. The respective layout file is as below-

{% gist https://gist.github.com/giridhar30/2ec146645ead707bac780b2ca4a3e610.js %}

Now, we need to make those newly created buttons to navigate to respective activities. For that, add on click listeners to the buttons in the MainActivity.java as below-

{% gist https://gist.github.com/giridhar30/7a331e2dd5ca7cfa9fead5c2c04a62de.js %}

Now, let’s concentrate on signing up and signing in users through our application.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/b7s0dxjaq7vej3683sd1.jpg)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/x6tvbleve2xou8gdcn46.jpg)

**Signing Up Users**

We need mainly four edit texts — one for getting the first name, one for getting the last name, one for getting the email id and the last one for getting the password.
{% gist https://gist.github.com/giridhar30/a3bf1b92f15ccfed3f8c13afc306d581.js %}

The input data has to be trimmed, validated and verified before we pass it to the backend. All these are done in the SignupActivity.java.

An On Click Listener is added to the button that submit the data. Once the data is submitted, it is validated. After validation, a user object is created with the data and the object is passed through the API to Signup.

Once the signup is completed successfully, the application navigates to the signin activity. The controlling file of the signup activity as below-

And finally, we need a button to submit these data. The layout for the signup activity is modified as follows-
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fl9k8gu76y8ipprsnqvl.jpg)

{%gist https://gist.github.com/giridhar30/d8dfd25f8995b79fd89054ef8266da8b.js %}

We have the sign up part all ready. Let’s move to the sign in part of our application!
Signing In Users

For signing in users, we need just the user’s email to identify them and their password to verify them. To get them, we need two edit text views.

And also, a button is needed to submit the data. Below given is the layout file for sign-in activity.

{% gist https://gist.github.com/giridhar30/ef20ec8b9d658f96647d34b78578da75.js %}

The data from this layout is fetched, processed and verified with the backend API by the SigninActivity.java. It also should contain the on click listener for the button to submit the data.

Through the on click listener added, we receive the data from the fields and process it to create a user object. The object is then passed to the REST API, which verifies it and sends us a response to authenticate the user.

After successful authentication of the user, they are directed to the dashboard activity of the application.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5kp69y9h5nxbokecggqp.jpg)
{%gist https://gist.github.com/giridhar30/68bd587280b24802b6ca36a735fc3094.js %}

{% gist https://gist.github.com/giridhar30/68bd587280b24802b6ca36a735fc3094.js %}

The only remaining task before us is to make the dashboard activity. Without any delay, let’s do that!
Constructing the Dashboard

The dashboard activity seems similar to that of our main activity. It can also be called the main activity for authenticated users.

Authenticated users must be able to edit the products or add new products. For that sake, add the buttons for adding and updating the products. Also, add a button for viewing the products.

The layout file of the dashboard activity should be constructed as follows-
{% gist https://gist.github.com/giridhar30/6fda6c6feb7814ebc9af6639ec9069c4.js %}

Let’s make these buttons in the dashboard activity functional! Go to the file DashboardActivity.java that controls the functioning of the activity. Add on click listeners to the buttons that we have added previously.

Set up the navigation correctly so that the user is navigated to the respective activities from the buttons.

The corresponding DashboardActivity.java file is as follows-
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/byfqzha1wmx1tao1fwym.jpg)

{% gist https://gist.github.com/giridhar30/3edeedd85c0d61f09b19acd04b5814ba.js %}
Hurray! we have completed the coding section! Let’s run the application now!
Running the Application

Now, it’s time for running the application, after adding the required functionalities. Select the required Android Virtual Device from the toolbar and click on the run button on the same(Green triangle icon)

After a certain amount of time, your android virtual device will get the application installed and opened. You can completely use it now!

Some of its screenshots are as below —
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/szi1pcke2st6zwo3z4sf.jpg)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pf0g1mvygawzs97dubnh.jpg)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/m3xfe0ommf16babcwmem.jpg)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/amhtn3stlf4xa12aqvty.jpg)

Yahoo! That’s it! Hope you have learned many things from this tutorial. Stay tuned for such an awesome series of tutorials!

Happy Learning!