Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.ollie.shop/llms.txt

Use this file to discover all available pages before exploring further.

Use this hook when you need to control the login modal programmatically. It’s useful for protected actions that require authentication, like adding items to a wishlist or accessing account-specific features.

Import

import { useLogin } from '@ollie-shop/sdk';

Return Value

PropertyTypeDescription
openLogin(options?: OpenLoginOptions) => voidOpens the login modal with optional configuration
closeLogin() => voidCloses the login modal

OpenLoginOptions

PropertyTypeDefaultDescription
isRequiredbooleanfalseWhen true, prevents the modal from being closed by clicking the backdrop
titlestringnullCustom title to display in the login modal header

Usage

const { openLogin, closeLogin } = useLogin();

// Open with default settings
openLogin();

// Open with custom title
openLogin({ title: "Sign in to continue" });

// Open as required (can't dismiss by clicking backdrop)
openLogin({ isRequired: true, title: "Login required" });

// Close programmatically
closeLogin();

Example

A favorites button that prompts the user to log in before adding an item to their wishlist.
import { useLogin, useCheckoutSession } from '@ollie-shop/sdk';
import styles from './styles.module.css';

function FavoriteButton({ productId }: { productId: string }) {
  const { openLogin } = useLogin();
  const { session: { user } } = useCheckoutSession();

  const handleFavorite = () => {
    if (user.isGuest) {
      openLogin({
        isRequired: true,
        title: "Sign in to save favorites"
      });
      return;
    }

    // User is logged in, add to favorites
    addToFavorites(productId);
  };

  return (
    <button className={styles.button} onClick={handleFavorite}>
      Add to Favorites
    </button>
  );
}