Setting up a seamless member profile page is essential for any membership-driven site, giving users the power to manage their personal information, update billing details, and unlock features with license keys—all from one place.

This guide will walk you through building a profile page that keeps your members in control. Let’s dive in and create an experience that enhances engagement and streamlines account management.

Create a free account on our CuratorHub template to preview an account page powered by FramerAuth.

1. Create account page on your website: /account

Use our free remix as a baseline to help add the member profile elements.

2. Display member's name

• withFirstName - this override displays the member's first name.

• withFullName - this override displays the member's full name (first + last).

3. Display member's email address

• withEmail - this override displays the member's email address.

4. Change password

Give your member's the ability to change their password by sending them to your /forgot-password page which has the Forgot Password component.

5. The member profile form

Add the member profile form provided during setup which will allow members to make changes to their email address, first, and last name.

6. Optional: add 'sign out' button

Add a frame or a button component from your project and apply the override withSignOut. Make sure this button or frame does not have a redirect link.

7. Optional: conditionally hide the account page from logged out visitors

Since the account page is only useful to logged in members, there are a few things you can do to ensure only they can access the page.

• Apply to the 'my account' button in your navigation withLoggedIn to ensure only logged in members see the button to take them to their account page.

• Set the /account page to be locked in the dashboard

• Alternatively, rather than locking the page, you can keep the account page visible to all visitors and use overrides to display different content based on the user’s login status. Apply withLoggedIn to the account section so that logged-in members can view their account details. For logged-out users, create a section like the example below and apply withLoggedOut to the entire section.

For websites utilizing the Lemon Squeezy integration:

1. Add the 'Activate License' component

Add the Activate License component from the setup to the account page. This component allows existing members to add a new license if theirs has expired, to upgrade from a free to paid account, or to unlock new products.

2. Add a 'manage billing' option if your site offers subscriptions

When offering a subscription, you should link to your Lemon Squeezy billing portal which will allow your member to pause, cancel, and change a subscription as well as update billing details. You can find your billing portal link at the top of this page: Customer Portal.

3. Display which active plans the member has

By customizing the withPlanStandard override with the Lemon Squeezy variant IDs of your products, you can display to the member which products they've already purchased. For example "You're on the lifetime plan!"

Follow this guide to implement: Conditionally show content to specific Lemon Squeezy plans

Thanks for following along!

By setting up a flexible member profile page as described in this guide, you’re empowering your members to manage their own accounts with ease—whether updating their information, adjusting billing, or upgrading their plans.

This approach not only supports a more personalized user experience but also adds a professional touch to your site by making account management straightforward and accessible.

If you have any questions or need assistance, please find us on the Support page.