useLogin - Ollie Shop

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

Property	Type	Description
`openLogin`	`(options?: OpenLoginOptions) => void`	Opens the login modal with optional configuration
`closeLogin`	`() => void`	Closes the login modal

OpenLoginOptions

Property	Type	Default	Description
`isRequired`	`boolean`	`false`	When `true`, prevents the modal from being closed by clicking the backdrop
`title`	`string`	`null`	Custom 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.

index.tsx
styles.module.css

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>
  );
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background-color: #556AEB;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.button:hover {
  background-color: #4458d1;
}

Ollie Login Configuration — Enable or disable the native login modal in the Admin
Login Required — Configure guest access settings for cart and checkout
useCheckoutSession — Access customer information and session state

​Import

​Return Value

​OpenLoginOptions

​Usage

​Example

​Related

Import

Return Value

OpenLoginOptions

Usage

Example

Related