📑
AppGyver + Bubble Tutorials
  • WELCOME
  • AppGyver 3rd-Party Authentication with Bubble
    • Backend (Bubble) Setup
    • Frontend (AppGyver) Setup
      • Background
      • Enable authentication
      • Create data resources
      • Create Signup page
      • Create Login page
      • Create Home page
Powered by GitBook
On this page
  • Page Variables
  • User Interface
  • Log in button logic
  • Login page logic

Was this helpful?

  1. AppGyver 3rd-Party Authentication with Bubble
  2. Frontend (AppGyver) Setup

Create Login page

PreviousCreate Signup pageNextCreate Home page

Last updated 4 years ago

Was this helpful?

We already created the Login page when . 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:

  1. Create record : Make a call the backend

  2. Set app variable : If the login is successful save the response into the authUser app variable.

  3. Set item to storage: The store the authUser app variable to the device as persistedUser

  4. 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:

  1. Get the persistedUser object from storage that is stored when a user logs in.

  2. Check if the persistedUser object exists (i.e. it is not null).

  3. If the persistedUser object exists, set it to the authUser app variable. If it doesn't exist keep the user on the page to log in.

  4. 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:

!IS_NULL(outputs["Get item from storage"].item)

enabling authentication