# AccountMenu

<figure><img src="/files/ynluoXmKpzIxP7Blf1qa" alt=""><figcaption><p>AccountMenu</p></figcaption></figure>

The AccountMenu is a menu to be used in the authenticated section of your product.<br>

The **Billing** menu automatically retrieves the Customer Portal page URL from Lemon Squeezy, and opens it.\
From that page, the users can manage the subscription plans purchased on your store and update the payment method.

The route defined at`src/app/api/subscriptions/route.ts` is used to retrieve the Customer Portal URL, and a subscription must be active for the current user.

The second menu option is the Log out button, which redirects the users to the root of your website when clicked.

### Lemon Squeezy API Key

To use the Lemon Squeezy  API, you need an API key.

Go to your Lemon Squeezy store, Settings, API, and generate a new API key.

Open `.env` and set a new variable (remember set it into your hosting service as well):

{% code title=".env" %}

```yaml
LEMONSQUEEZY_API_KEY="<your_api_key>"
```

{% endcode %}

Component: `<AccountMenu />`\
File: `src/components/AccountMenu/AccountMenu.tsx`

{% code title="page.tsx" %}

```jsx
import { AccountMenu } from "@/components/AccountMenu/AccountMenu";


/* ... */
<AccountMenu
    userName="Luca"
    userEmail="hey@shipped.club"
    userPictureUrl="http://..."
/>
```

{% endcode %}

***

{% hint style="info" %}
If you need basic components like buttons, inputs, grids, etc, they are all available with [ChakraUI](https://chakra-ui.com/).
{% endhint %}


---

# 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://docs.shipped.club/components/accountmenu.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.