Creating a Login Screen for Mobile Apps

Intro

You can easily create a login screen for your mobile app and log users in, using Framework 7 and its components.

As you know from our docs, in order to use dynamic data for your mobile apps you need to setup a separate data API project. This is the same for the Login and any other action requiring server-side workflows.

Login API Action

You need to setup your security provider and login action in the data API Project. It’s no different than a login action for a regular web site.

You need to setup a Security Provider and then an API Action with a Login Step:

Add two POST variables named username and password:

And for the Login step, make sure to set 1 as value for the Remember option. This is required so that the login cookie is created and your user stays logged in across your app pages:

So that’s pretty much everything you need for the login API Action.

Login Page

Switch to your mobile project.
On our main page we have a links list, with several links in it. We will use the Sign In link, to open the login screen:

Let’s first create it.

Adding a Login Screen

Right click the Page element:

Select Login Screen:

The Login Screen has been added to our page. You can customize it as you need, we will just use its default design in our example:

Setup Login Form

Select the form element inside the Login Screen and click Make Server Connect Form:

Then Select Server Action:

Select your data API project from the dropdown (1), then select the Login API Action from this project (2) and click Select (3):

Then select the Sign In button:

Add new Dynamic Event:

Select Mouse > Click:

And select an action:

Under Server Connect Form, select Submit and add it:

This will submit the form, when the sign in button is clicked. Now let’s setup what happens when the user enters wrong login details and what happens when the correct ones are entered.

Select the form:

Add new Dynamic Event:

Select Server Connect > Unauthorized:

And select an action:

Select Alert, under App Root:

Enter the text that should be displayed inside the alert and click Select:

Then add a new Dynamic Event:

Select what happens, when the user logs in successfully - Server Connect > Success:

And select an action:

We want to hide the login screen, when the user logs in successfully. So we select Close under the Login Screen component:

You can enable or disable animation on close.
Add any other dynamic events that need to run on success login - such as reload server actions or others.
Click Select when you are done:

Open Login Screen

You can open the Login Screen on click of a button. Select your page content:

Select the button/link which should open the Login Screen:

And open the Action menu:

Select Open Login:

And select the Login Screen from the menu:

Save your page and you are done. After the login you can do what you need with the user identity - just as you do on regular web sites and web apps.

You can see the results:

2 Likes

So it looks like I have my login screen set up properly. But I have two issues.

1: I can’t get the login screens to show in Design View at all. I have to make any changes directly in the code.
2: I don’t see the option to close the screen on success.

Good to see I was on the right track though! Thanks for this!

Both issues have been fixed in Wappler 3.8.3 :slight_smile:

2 Likes

Ah, cool! Thank you.