# Create Login page

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

![](https://1990900596-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAt7rtTFHf56GLwoUyJ%2F-MB5rb5HPtdUS8IwmuaT%2F-MB5s17FeHtemYGKc93D%2Fimage.png?alt=media\&token=36e80f3a-beb2-4ddc-ba87-1081585cf673)

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

 

![](https://1990900596-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAt7rtTFHf56GLwoUyJ%2F-MB5rb5HPtdUS8IwmuaT%2F-MB5sissEtg_klqz0yC7%2Fimage.png?alt=media\&token=33c1cae2-8284-4b73-9b90-cc128b24f1fa)

![](https://1990900596-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAt7rtTFHf56GLwoUyJ%2F-MB8nogWMh0ReZxFv4ce%2F-MB8oRVrib3J4W_vQSnm%2Fimage.png?alt=media\&token=d1d9d84d-384b-4b55-94c6-67fde3cb92b9)

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

![](https://1990900596-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAt7rtTFHf56GLwoUyJ%2F-MB6-xOws5k6obl3EiHZ%2F-MB6tU3tFRdGgIYA1sfJ%2Fimage.png?alt=media\&token=ddf1de4c-6319-4f2c-ab7c-60945326b5e2)

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

![](https://1990900596-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAt7rtTFHf56GLwoUyJ%2F-MB6-xOws5k6obl3EiHZ%2F-MB6rhfwSQ0nlCRCtTBP%2Fimage.png?alt=media\&token=77189e36-c667-4d81-b3cd-2ac0097f18fb)

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

![](https://1990900596-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAt7rtTFHf56GLwoUyJ%2F-MB6-xOws5k6obl3EiHZ%2F-MB6tzk-cJjK0EjqMUz7%2Fimage.png?alt=media\&token=f5deea30-076c-4212-a727-1ea26d5265d1)

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

Add action **Set item to storage** s

![](https://1990900596-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAt7rtTFHf56GLwoUyJ%2F-MB6-xOws5k6obl3EiHZ%2F-MB6vGXDjstTA--UF2pL%2Fimage.png?alt=media\&token=6dca6dd8-40c7-4ab1-bbb1-5b10da3bd3fa)

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

    

![](https://1990900596-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAt7rtTFHf56GLwoUyJ%2F-MB8nogWMh0ReZxFv4ce%2F-MB8oRVrib3J4W_vQSnm%2Fimage.png?alt=media\&token=d1d9d84d-384b-4b55-94c6-67fde3cb92b9)

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

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