LoginButton Module

Overview

The LoginButton module provides a customizable button that changes its title and link destination based on the user's authentication state. If the user is logged in, the button displays a title like "Dashboard" and directs to a protected page. If the user is logged out, it shows a title like "Get Started" and links to the login page. The button size can also be adjusted using props.

Location

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

URLS in `settings.js`

The settings.js file, located at /settings.js, is the central configuration file for your StartupBolt application. This file contains various settings that control different aspects of your app, allowing for easy customization and management of your project's core parameters. It is important to update these configuration values according to your product or service.

1. URLS

Set this to Stripe:

const URLS = {
  login: "/login",
  protected: "/private",
}

These settings work out of the box, so you do not need to edit the URLS object. However, you can make changes in the URL and it will be used in this module.

Usage

The LoginButton module can be customized using props. Most props have default values, which can be modified directly within the module itself.

Props

1. `loggedOutTitle`

Default Value: "Get Started"
Description: Specifies the button text displayed when the user is logged out. This title guides the user towards initiating the login process.

2. `loggedInTitle`

Default Value: "Dashboard"
Description: Specifies the button text displayed when the user is logged in. This title typically navigates the user to the protected page.

3. `buttonLarge`

Default Value: false
Description: Determines the size of the button. If set to true, the button will be rendered in a larger size, suitable for more prominent placement in your UI.

Usage Example without Props

If you want to use the LoginButton module with all the default settings, you can simply include it without passing any props:

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

Usage Example with Props

Here’s an example of how to use the LoginButton module in your project, fully customized with props:

import LoginButton from "@/modules/native/LoginButton";
 
const MyPage = () => {
  return (
    <LoginButton 
      loggedOutTitle="Sign In" 
      loggedInTitle="Account" 
      buttonLarge={true} 
    />
  );
}
 
export default MyPage;

In this example:

loggedOutTitle="Sign In" changes the button text to "Sign In" when the user is logged out.
loggedInTitle="Account" changes the button text to "Account" when the user is logged in.
buttonLarge={true} renders the button in a larger size for better visibility.

Conclusion

The LoginButton module is a flexible component that adapts based on the user's authentication state, and it's easy to integrate and customize.

Icons Navbar