2. Create an authentication system and a private client area. 

Login UI, Database, API Function, all the steps to get a working client area and auth system.

Transcript

Hello and welcome to the second episode of AppDrag Academy. I'm Mike Sabbah and today we're going to learn how to create an authentication system by setting up the database, the APIs and the front end.
So let's begin.

Creating a New Project and Backend Development
I'm going to create a new project. And once again, we're going to begin by developing the backend first. So let's go ahead and create our users' table. Add in the columns we're going to need. We have a first name, a last name, email, phone number, a password, this time it's going to be of type password, a token of type text, and a last update of type datetime. I'm going to manually add a sample user.

Create a Login API
Now that the table is set, let's move onto the APIs.

I'm going to add a folder so my authentication APIs remain together. We're going to begin with the login function which will be a VisualSQL function. First thing to make sure is that we're choosing the right table to select from, the method will be POST, and we enter our parameters. Those are going to be email and password.

The output columns will give us in response only the columns we select, but we'll just leave that blank. Then we plug in our conditions. So that's going to be where "email" is equal to the email parameter, and the "password" is equal to the password parameter. Let's save and try, and the result we get is an object containing our user.

Let's take a look at the table; and as we can see, the API worked just great.  

Frontend Development
Now, it's time to move to the frontend and create our form.
So this button is linked to the anchor of the registration form down here.  However, this form is a static form that just sends the information to a destination email.  But what we want is to populate our database.

So what we're going to do is first add a row below this one by clicking this plus.  Let's make that a 3 column row, so our form could be nicely centered.  And now, we remove this form by just clicking this delete button.
For our new form's column, which is the middle one, let's make it a bit larger by stretching it a bit here and there.
And now we add input fields.  So let's click the "Add Component" control at the left.  The components are categorized by sections and elements, and we want inputs, which are simple elements.  

Down here are the subcategories, and we're going to choose "Cloud Backend Inputs".  All the way at the bottom are the text inputs, we'll select a First Name input. 
So this is how the drag&drop tool works.  Click and hold the element, drag it over and locate the position you want it to be in.  Once you find it, drop it in, et voila.

Double clicking into the field will give us the options such as the name attribute, the placeholder, validation options, and styles.  Let's change the name and placeholder.  And we'll do the same for email, except this time we'll choose the email input, which includes a standard email regular expression.
For the Date of Birth, we're going to pick a date input.  Let's change the placeholder, the name, and the date format as well, as it needs to match the backend's formatting.

All that's left now is a button.  Let's go to the buttons subcategory, find a button, and drag it into our form.  There we go.  Double click into this button, and once again, we have some options.  So first off we'll change the content.  And let's give it also a full width.  So to do that, we go to position, and check off the full width.  Now we assign it an action. 

API Integration
We've got a few options, and since we're looking to assign it a backend API, we choose Cloud Backend.  We'll enable the trigger and select the API we want from this dropdown menu.  If you haven't yet created your API and wish to do so, there's a link right beside it that'll open your backend on a new tab.  As you can see, I'm automatically given the input parameters of my API to map with my frontend sources. 

Create a Check-Token API
Now, the next API we're going to write is called CheckToken, and will be almost identical.

Again, we're going to choose the visual select, and in the parameters, add in the "email", so let's put the one I entered earlier, and the token, with the example of that same user.

Now for the conditions, we're going to check that the "email" is equal to the email parameter, and the "token" is equal to the token parameter. Save and try, and once again, we have the same object in response.

Frontend Development
So this concludes the backend side of our project, so we move onto the frontend.

We're going to take this button and link it to our form. But before we do anything, let's first create the couple of pages that we'll need. Click on new page . The first one we're going to create is going to be the client area, to which we will redirect to once our user has logged in. And the second will be for our form.

We're also going to hide this page from the menu, as we don't need it to be displayed. For the sake of esthetics, I'm going to add in a pre-made section, and run a little time lapse of styling and insertion of the inputs.

Assigning Login API to the Form
Now. let's assign the API to this button. So Action > Cloud Backend > Enable trigger, select the login API, allocate the parameters to the sources, and finally, execute JavaScript.

Here is where we write some simple logic based on the response we got from the back. We create a variable called "row" which will parse the JSON containing a table array of rows. If our response has no rows, that means no one matches the email and password entered, therefore alert that the email or password is incorrect. Else, and this means that there is a user in the table, we set the user's email and token in his browser's local storage by selecting the email attribute of the row in position 0.

And the same for the token. Once they're stored, we can redirect our user to the client area page.

Wonderful. Hit save. And save one more time. Let's go back to our home page. Double-click into this button, change the content to log in, link it to the login page, save, and preview.

And now we fill out the form. Let's put in a wrong password just to see the error handling. And there is our alert. Let's put in the correct password, and here we are, redirected to our client area.

Let's go back to the home for a minute, and open the browser's local storage. So here's my email and token. I'm going to delete them, and try accessing the client area page from the menu, and as you can see, I do have access, which is wrong, but that's because it isn't protected. How do we protect it? Let's find out.

Protecting the Restricted Page
We're going to open the client area page, and I'm going to select an element called Source Code, and insert a piece of jQuery right at the top of the page. In here, we're going to first verify if the local storage even has anything. So we're going to create variables that'll get the values of "email" and "token".

And we begin. So if the email or token is either an empty string or null, then redirect to the login page. However, if they do contain information, we enter the else statement that will verify if the credentials match our user.

So let's visit our backend. If we open the check-token API, there's a caret at the top that'll give you some options. One of them is the API documentation where I can test it out and see what returns.

So if the credentials are correct, I get the user's object. But if not, I get an empty table.

What I also get is my API in a variety of different languages. We'll select jQuery, and copy the code.

Back to the front end, I'm quite simply going to paste it in the else clause.

Now let's replace these values for our variables and remove these two lines as they're not needed here. And after the Ajax call, we check to see what was returned.

So let's parse the JSON as a row, and if there are no rows, once again, we redirect to the login page.

Save and save, go back to home, and preview.

Now, if we click the client area from the menu and we're not logged in, we're redirected to the login page. If I login successfully, I'm redirected to the client area.

Open the local storage, let's just modify the token a little. Go back home and try accessing the client area, and there we are, once again, redirected to the login page.

► 1. Create your first database and API function.

► 2. Create an authentication system

► 3. Create an account form.

► 4. Add a Forgot Password function and an updatable account details page

► 5. List dynamic data from the db and display a detail page for a particular item of the list.

► 6. Event Reservation function, email template with variables, send.