> For the complete documentation index, see [llms.txt](https://docs.shipped.club/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.shipped.club/components/accountmenu.md).

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