AccountMenu

Show a menu button for the authenticated users

AccountMenu

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

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 atsrc/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):

.env

LEMONSQUEEZY_API_KEY="<your_api_key>"

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

page.tsx

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


/* ... */
<AccountMenu
    userName="Luca"
    userEmail="[e-mail]"
    userPictureUrl="http://..."
/>

---

If you need basic components like buttons, inputs, grids, etc, they are all available with ChakraUI.