> ## 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.

# useLogin

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**

```typescript theme={"system"}
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**

```typescript theme={"system"}
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.

<Tabs>
  <Tab title="index.tsx">
    ```typescript theme={"system"}
    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>
      );
    }
    ```
  </Tab>

  <Tab title="styles.module.css">
    ```css theme={"system"}
    .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;
    }
    ```
  </Tab>
</Tabs>

## **Related**

* [Ollie Login Configuration](/ollie-shop/configuration/ollie-login) — Enable or disable the native login modal in the Admin
* [Login Required](/ollie-shop/configuration/login-required) — Configure guest access settings for cart and checkout
* [useCheckoutSession](/ollie-shop/api/useCheckoutSession) — Access customer information and session state