# Create Home page

The home page is the first screen a user sees after they log in or if they're already logged in. In this tutorial this will be a simple page that displayed the currently logged in Name, Email and a button to logout.

User Interface

The home page contains the following elements

* Title for the **Welcome** text
* Paragraph text to display the currently logged in user Name
* Another paragraph text to display the text **Logged in as `<email_address>`**
* Button for logging out

The Name text is bound to the app variable `currentUser.Name`

The "Log in as ..." is the following formula

```
"Logged in as "+appVars.currentUser.email
```

![](https://1990900596-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAt7rtTFHf56GLwoUyJ%2F-MB8wY214wwPe6zaGHUQ%2F-MB8x1ZUA6oIrd9XnHV2%2Fimage.png?alt=media\&token=150de55e-8367-415b-990c-356e93287576)

### Home page logic

Whenever this page is mounted we want to retrieve the currently logged in user's information from our backend. We will use the [User data resource](https://seanhoots22.gitbook.io/tutorials/appgyver-3rd-party-authentication-with-bubble/create-data-resources#user-data-resource) that we created for retrieving a user from our database. Then we will save the response from the call to our [`currentUser` ](https://seanhoots22.gitbook.io/tutorials/appgyver-3rd-party-authentication-with-bubble/untitled#app-variables)app variable so that we can reference it on any page in the app.

The logic for the page is as shown below. For the Get record action&#x20;

![](https://1990900596-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAt7rtTFHf56GLwoUyJ%2F-MB9-HWQ77iEzd_rxYV7%2F-MB9-IqQzuCOyM-MwJEA%2Fimage.png?alt=media\&token=e91a9fb0-64f9-4bdc-9578-250c37e93875)

The **Get record action** is defined as follows. In the Resource name we select the User data resource. For the Authorization we use the following formula

```
"Bearer "+appVars.authUser.token
```

And the for the id we select the app variable `authUser.id`

![](https://1990900596-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAt7rtTFHf56GLwoUyJ%2F-MB9-HWQ77iEzd_rxYV7%2F-MB9-h078R3Di4z0y69Y%2Fimage.png?alt=media\&token=8371ef05-f1bd-407f-ba05-bf37a434062a)

We then store the returned user into the `currentUser` app variable.

![](https://1990900596-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAt7rtTFHf56GLwoUyJ%2F-MB9-HWQ77iEzd_rxYV7%2F-MB90Z_C59Td-RJy1UM8%2Fimage.png?alt=media\&token=362720a8-1607-40b3-855e-2c97cf310a6c)

### Logout button logic

Finally we add the logic to the Logout button. When the logout button is clicked we first delete the persistedUser object from storage, then call our our [`logout` ](https://seanhoots22.gitbook.io/tutorials/appgyver-3rd-party-authentication-with-bubble/create-data-resources#logout-data-resource)endpoint, and finally return to the initial view (i.e. login screen).

{% hint style="info" %}
We can simply delete the persistedUser object from storage without calling the logout endpoint and the app will still work the same. But technically the token will still be valid even if it has been deleted from the device. Calling the logout endpoint informs our backend that the user's login session has ended.
{% endhint %}

Here I could have connected the Return to initial view.

![](https://1990900596-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAt7rtTFHf56GLwoUyJ%2F-MB910p6VMEQNneiFoPi%2F-MB93ccCeCRNTCAoctMr%2Fimage.png?alt=media\&token=d4f87f1a-c9ed-4092-b3de-ac3560a6b8da)

The End


---

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