Login - Create a Working User Login Page

Wappler makes creating a Login page with a Login form simple and secure.

Having a Login page is an important part of any website, we strive to make the process completely secure using the most robust technologies.


 

Setting Up a Login Page

Step 1: Now after you added the security provider in your server action let’s add the login functionality. Right click the security provider step (doesn’t matter which security provider type you are using):


 
Step 2: Open the “Security Provider” group:


 
Step 3: And press “Add Security Login”:


 
Step 4: In the login properties you see the Username, Password and Remember fields. Their values contain predefined POST variables - these are just the names of the form fields which this step expects. Of course you can change them, but the easiest way is to create a form with fields using these names instead of changing them later:


 
Step 5: Select your Security Provider instance:


Save your server action, as we are done with the server-side part.


 

Creating a Login Page

Step 6: Then let’s go to the page. We included the App Connect framework and Bootstrap 4 framework on our page already. Click the add button, where you’d like to create the login form:


 
Step 7: Create a Form which contains 3 inputs - username, password and a checkbox. The first field has a Name and ID of “username” and input Type “text”:


 
Step 8: The second field has a Name and ID of “password” and input Type “password”:


 
Step 9: The third input is a checkbox with a Name and ID of “remember” it also has a Static Value set to 1:


 
Step 10: We also created a button and its Type is “submit”:


 
Step 11: Now, select your form within the “App Structure” panel:


 
Step 12: And change its method to POST:


 
Step 13: Then click the “Make Server Connect Form” button. This is how we connect the form with the back-end, which expects the values of our form fields:


 
Step 14: Click the “Select Server Action” button:


 
Step 15: And select the login server action:


 
Step 16: We are done with the login part. Let’s setup the redirect on success and an alert message, when wrong user details are provided. Select App in the App Structure panel and add a new component:


 
Step 17: Open the Browser category:


 
Step 18: And select Browser:


 
Step 19: Select your Server Connect Form(1) and add new Dynamic Event(2):


 
Step 20: Open the “Server Connect” category:


 
Step 21: And click the “Success” event:


 
Step 22: Click the dynamic action picker button, in order to assign an action on success:


 
Step 23: Under the Browser component, select “Go To” and click the Add button:


 
Step 24: Enter the page where the user should be redirected after a successful log in. If you are entering a static URL, make sure to wrap it inside single quotes like: ‘your-page.php’. If you are using the dynamic data picker to retrieve the URL from a dynamic data source, then quotes should not be used:


 
Step 25: With the form still selected add a new Dynamic Event:


 
Step 26: Open the “Server Connect” category:


 
Step 27: And click on Unauthorized. This event is being triggered, when wrong user details are provided:


 
Step 28: Click the dynamic action picker button:


 
Step 29: Under Browser select Alert(1) and click the Add button(2):


 
Step 30: Enter the alert text wrapped in single quotes, like “Wrong login details!”:

And you are done! If the user provides correct login details he will be redirected, and if the login details are wrong the alert will be displayed.


WapplerPrevious   WapplerNext


3 Likes

The tutorial is working great. Thanks @George.
To add to it for intermediate users seeking to block users after a number of failed attempts or to send an email when the password is wrong, this is an approach I propose in case it helps (click on it twice to view it):

8 Likes

Is there an equivalent to this, but using cordova and framework7 ?

I have followed these instructions and have a working login page, but my Remember Me check-box doesn’t do anything. When I login and check the box I stayed logged in for that session, but when I close the browser and come back to my site I am no longer logged in. Am I doing something wrong, or do I not understand what the checkbox should do? Here is my code for the button:

    <div class="form-group">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" value="1" id="remember" name="remember">
                  <label class="form-check-label" for="remember">Keep me logged in</label>
                </div>
              </div>

Any help is appreciated.

Hi having something similar, the log in session/security is expiring before 30 days. Did you find the problem?

I may be wrong, I think the terminology Keep me logged in is not correct, I think this should be Remember me. This allows a user to log in using the data stored in a cookie.

1 Like

This is the default that was set when creating a security login action step
image

2 Likes

@wsmillett and @fdgfdgfdg if you really want to stay logged in for 30 days when you check this “remember me” checkbox, you need to add this “static value” to this checkbox : 1 :slight_smile:
wappler-05
If you don’t do that, I think (not sure) the default behaviour (not related to Wappler) is:

  • You’ll be logged out after 30 min of inactivity
  • You’ll be logged out if you close the tab/window
    :wave:
1 Like

The domain field has to be empty or has the name of the domain you are using
And then you will see that after a sucsessfull login 2 cookies has been made in one named phpsessid and one with the name of the security provider.

bilde

You also have to remeber to save and relink the security provider.

bilde

1 Like

There is a bug… when adding …then removing …certain components such as recaptcha… component.

the backend is trying to call a component that is not there on the front end…