4 min readUpdated Mar 2, 2026

SignOutModal Documentation

Overview

The SignOutModal component is a functional modal dialog used within the Vantage platform to confirm the user's intent to log out of their session. This component provides a clear and unobtrusive way for users to sign out, ensuring that accidental logouts are minimized. Once confirmed, it triggers a backend API call to log the user out and redirects them to the home page.

Purpose

The primary purpose of the SignOutModal is to enhance user experience by providing a safety confirmation before signing out, preventing users from inadvertently logging out and losing unsaved work. It utilizes a minimal and straightforward design, integrated into the user interface of the Vantage platform.

How It Works

  1. Display Trigger: The modal is displayed when the user opts to sign out and is typically triggered by a sign-out button in the application interface.
  2. User Confirmation: It presents a clear message asking the user to confirm their decision, along with options to either confirm the sign-out or cancel the action.
  3. Sign-Out Handling:
    • When the user clicks "Sign Out", an asynchronous API request is made to /api/auth/logout to perform the logout operation.
    • After the logout request is successfully processed, the modal is closed, and the user is redirected to the home page.
  4. Closure: The modal can be closed either through the cancel button or by clicking on the backdrop, provided the default options permit it.

Settings

Detailed Settings Explanation

  1. Title

    • Input Type: String
    • Description: The title of the modal dialog, displayed prominently at the top of the modal. Changing this setting affects the text displayed and potentially the user's context.
    • Default Value: "Confirm Sign Out"

  2. OnClose

    • Input Type: Function Callback
    • Description: A callback function that is executed when the modal is closed, either through the cancel button or when the action is confirmed. Altering this function allows for custom behavior upon modal closure.
    • Default Value: None (must be provided by the parent component)

  3. Footer

    • Input Type: JSX/UI element
    • Description: The contents displayed in the bottom section of the modal, specifically the action buttons. Modifying this impacts the actions available to the user.
    • Default Value: Contains two buttons - "Cancel" (to close the modal) and "Sign Out" (to confirm sign out).

  4. Size

    • Input Type: String
    • Description: Determines the physical size of the modal (e.g., small, medium, large). Affects how much screen space the modal occupies and can impact usability and aesthetics.
    • Default Value: "sm" (small)

  5. defaultModalOptions

    • Input Type: Object
    • Description: Contains settings for default modal behavior. For example, closeOnBackdropClick controls whether clicking outside the modal will close it.
    • Default Value: { closeOnBackdropClick: true }

Additional Notes

The SignOutModal component currently does not integrate any AI functionalities or have billing impacts as it is strictly focused on UI and user interaction pertaining to session management.

Use Cases & Examples

Use Cases

  1. User Session Management: Ensures users can sign out of a shared system safely without accidentally losing their session due to misclicks.
  2. Logout Flow Enhancements: Allows businesses to prompt users with information or warnings pertinent to their ongoing work during the sign-out process.
  3. User Experience Improvements: Provides a consistent UI approach across the application for user interactions relating to session lifecycle.

Example Configuration for Use Case

Scenario: A company using the Vantage platform wants to ensure that all users confirm their intents when signing out, reducing the chances of accidental logouts that can disrupt work.

Sample Configuration:

javascript
<SignOutModal 
  onClose={() => console.log("Modal closed")}
/>

In this configuration, upon clicking "Cancel" or "Sign Out", the default behavior will execute. The application’s console will log a message when the modal is closed, which can be replaced with additional functionality like displaying a success message or analytics tracking of user actions.

By utilizing the SignOutModal, the technology team can ensure that all user sessions are managed correctly, enhancing user satisfaction and reducing confusion.