Skip to main content
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>
  );
}