# Create Login page

We already created the Login page when [enabling authentication](/tutorials/appgyver-3rd-party-authentication-with-bubble/setup-appgyver/creating-the-app.md). 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.

![](/files/-MB5s17FeHtemYGKc93D)

### 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.

 

![](/files/-MB5sissEtg_klqz0yC7)

![](/files/-MB8oRVrib3J4W_vQSnm)

### 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.

![](/files/-MB6tU3tFRdGgIYA1sfJ)

#### 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.

![](/files/-MB6rhfwSQ0nlCRCtTBP)

#### 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. 

![](/files/-MB6tzk-cJjK0EjqMUz7)

#### 3. Store login response to device storage

Add action **Set item to storage** s

![](/files/-MB6vGXDjstTA--UF2pL)

### 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

    

![](/files/-MB8oRVrib3J4W_vQSnm)

The condition for the `If condition` action is as follows:

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://seanhoots22.gitbook.io/tutorials/appgyver-3rd-party-authentication-with-bubble/setup-appgyver/create-login-page.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.