AccountDropdown Module

Overview

The AccountDropdown module provides a user-friendly interface for managing user account actions, such as signing in, accessing the billing portal, and signing out.

Location

The source code for the AccountDropdown module can be found in the /modules/native/AccountDropdown.js file.

Usage

The AccountDropdown module is customizable and can be configured through various props. By default, it provides a simple interface, but these defaults can be easily overridden to match your specific needs.

Props

1. showLoginButton

• Default Value: true
• Description: Controls whether the login button should be displayed when the user is not authenticated.
• Usage Example:

  <AccountDropdown showLoginButton={false} />

2. loggedOutTitle

• Default Value: "Login"
• Description: Specifies the text displayed on the login button when the user is logged out.
• Usage Example:

  <AccountDropdown loggedOutTitle="Sign In" />
• Additional Note: loggedOutTitle is relevant only if showLoginButton is true. Otherwise, the button will not appear when the user is not logged in.

Functionality

The AccountDropdown module provides account-related options for authenticated users through a dropdown menu. If the user is not authenticated, it shows a login button based on the showLoginButton prop. When the user is authenticated, the module displays their avatar (or a placeholder if no avatar is available) along with a dropdown that includes the following options:

1. Billing:

   • Description: This option allows the user to manage their billing and subscription details.
   • Functionality: When the user clicks on the "Billing" option, the component redirects them to the appropriate billing portal based on the payment provider configured in your settings.js configuration file.
     • If the payment provider is LemonSqueezy, the user is redirected to the LemonSqueezy customer portal.
     • If the payment provider is Stripe, the user is redirected to the Stripe customer portal.
   • Use Case: This is useful for users who want to update their payment methods, view their subscription status, or manage other billing-related tasks.
   • Additional Note: In LemonSqueezy, the Billing portal will only be accessible if the user has an active subscription. It will not open for users who have made a one-time payment.

2. Sign Out:

   • Description: This option allows the user to securely sign out of their account.
   • Functionality: When the user clicks on the "Sign out" option, the component triggers the sign-out process using Supabase's authentication service. After signing out, the user is redirected to the homepage (or another specified URL).
   • Use Case: This is used to log the user out of the application, ending their current session and requiring them to log in again to access protected resources.

These account-related options enhance the user experience by providing easy access to essential account management functions directly from the dropdown menu.

CSS Classes

The module comes with predefined CSS classes for buttons and the dropdown popover, ensuring consistent styling across the interface:

• Base Button Classes:
  • text-base py-2 px-6 flex items-center justify-center font-bold rounded-md transition duration-300 text-center
• Primary Button Classes:
  • bg-primary text-primary-foreground hover:bg-primary/90
• Popover Button Classes:
  • bg-popover text-popover-foreground

Feel free to adjust these classes to fit your design needs.

Usage Example

Basic Usage with Default Settings

To use the AccountDropdown module with its default settings, include it in your page as follows:

import AccountDropdown from "@/modules/native/AccountDropdown";
 
const MyPage = () => {
  return (
    <AccountDropdown />
  );
}
 
export default MyPage;

Customizing the Login Button Text

You can easily customize the login button text when the user is logged out by passing the loggedOutTitle prop:

import AccountDropdown from "@/modules/native/AccountDropdown";
 
const MyPage = () => {
  return (
    <AccountDropdown loggedOutTitle="Sign In" />
  );
}
 
export default MyPage;

Hiding the Login Button

If you want to hide the login button when the user is logged out, you can use the showLoginButton prop:

import AccountDropdown from "@/modules/native/AccountDropdown";
 
const MyPage = () => {
  return (
    <AccountDropdown showLoginButton={false} />
  );
}
 
export default MyPage;

Conclusion

The AccountDropdown module is a flexible and essential part of any user management interface, offering a seamless and customizable experience for handling user authentication and account actions. With easy customization options, it can be tailored to fit the needs of your application perfectly.