Create Login page
We already created the Login page when enabling authentication. So we will go ahead and build the UI.
Page Variables
Go to the Login page and under the VARIABLES TAB Create two text page variables for the email and password.
User Interface
Switch to the VIEW tab and add 2 inputs, 1 button and 1 paragraph. Bind the input fields to the corresponding page variables defined above. Set the Password input to True
for the password field.
Log in button logic
The logic of the Login button is as follows:
Create record : Make a call the backend
Set app variable : If the login is successful save the response into the
authUser
app variable.Set item to storage: The store the
authUser
app variable to the device aspersistedUser
Dismiss initial view : The will redirect user to the apps main (home) page.
1. Call the login API endpoint to log
Add a Create record action and set the Resource name to the login
data resource . Set the email
and password
parameters to the page variables.
2. Save the response of the login endpoint call to an app variable
Add a Set app variable action. Set the Variable name to authUser. For the id
, token
and expires
fields select the data source type as Output value of another node and set the corresponding values from the response the login
api endpoint call from 1 above.
3. Store login response to device storage
Add action Set item to storage s
Login page logic
Now let us add some logic to the login page. Since the login page is our initial view, whenever this page is created we perform the following:
Get the
persistedUser
object from storage that is stored when a user logs in.Check if the
persistedUser
object exists (i.e. it is not null).If the
persistedUser
object exists, set it to theauthUser
app variable. If it doesn't exist keep the user on the page to log in.If the
persistedUser
object exists and after setting it to the app variable, dismiss this view to take the user to the main (home) page
The condition for the If condition
action is as follows:
Last updated