> ## Documentation Index
> Fetch the complete documentation index at: https://docs.base.org/llms.txt
> Use this file to discover all available pages before exploring further.

# requestSpendPermission

> Create and sign an EIP-712 Spend Permission for a user's Base Account

export const Button = ({children, disabled, variant = "primary", size = "medium", iconName, roundedFull = false, className = '', fullWidth = false, onClick = undefined}) => {
  const variantStyles = {
    primary: 'bg-blue text-black border border-blue hover:bg-blue-80 active:bg-[#06318E] dark:text-white',
    secondary: 'bg-white border border-white text-palette-foreground hover:bg-zinc-15 active:bg-zinc-30',
    outlined: 'bg-transparent text-white border border-white hover:bg-white hover:text-black active:bg-[#E3E7E9]'
  };
  const sizeStyles = {
    medium: 'text-md px-4 py-2 gap-3',
    large: 'text-lg px-6 py-4 gap-5'
  };
  const sizeIconRatio = {
    medium: '0.75rem',
    large: '1rem'
  };
  const classes = ['text-md px-4 py-2 whitespace-nowrap', 'flex items-center justify-center', 'disabled:opacity-40 disabled:pointer-events-none', 'transition-all', variantStyles[variant], sizeStyles[size], roundedFull ? 'rounded-full' : 'rounded-lg', fullWidth ? 'w-full' : 'w-auto', className];
  const buttonClasses = classes.filter(Boolean).join(' ');
  const iconSize = sizeIconRatio[size];
  return <button type="button" disabled={disabled} className={buttonClasses} onClick={onClick}>
      <span>{children}</span>
      {iconName && <Icon name={iconName} width={iconSize} height={iconSize} color="currentColor" />}
    </button>;
};

export const BaseBanner = ({content = null, id, dismissable = true}) => {
  const LOCAL_STORAGE_KEY_PREFIX = 'cb-docs-banner';
  const [isVisible, setIsVisible] = useState(false);
  const onDismiss = () => {
    localStorage.setItem(`${LOCAL_STORAGE_KEY_PREFIX}-${id}`, 'false');
    setIsVisible(false);
  };
  useEffect(() => {
    const storedValue = localStorage.getItem(`${LOCAL_STORAGE_KEY_PREFIX}-${id}`);
    setIsVisible(storedValue !== 'false');
  }, []);
  if (!isVisible) {
    return null;
  }
  return <div className="fixed bottom-0 left-0 right-0 bg-white py-8 px-4 lg:px-12 z-50 text-black dark:bg-black dark:text-white border-t dark:border-gray-95">
      <div className="flex items-center max-w-8xl mx-auto">
        {typeof content === 'function' ? content({
    onDismiss
  }) : content}
        {dismissable && <button onClick={onDismiss} className="flex-shrink-0 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors" aria-label="Dismiss banner">
          ✕
        </button>}
      </div>
    </div>;
};

Defined in the [Base Account SDK](https://github.com/base/account-sdk)

<Info>
  Constructs an EIP-712 payload for a spend permission and prompts the user to
  sign it. Returns a `SpendPermission` object containing the signature and
  normalized permission data you can later use to spend or register onchain.
</Info>

## Parameters

<ParamField body="account" type="address" required>
  Smart account that this spend permission applies to.
</ParamField>

<ParamField body="spender" type="address" required>
  The spender that can move funds from `account` within the configured limits.
</ParamField>

<ParamField body="token" type="address" required>
  Token address. Supports ERC-7528 native token address and ERC-20 contracts.
</ParamField>

<ParamField body="chainId" type="number" required>
  Chain ID where this permission is valid.
</ParamField>

<ParamField body="allowance" type="bigint" required>
  Maximum amount that can be spent during each period (in wei).
</ParamField>

<ParamField body="periodInDays" type="number" required>
  Length of each allowance period in days.
</ParamField>

<ParamField body="start" type="Date">
  Start time when the spend permission becomes valid. Defaults to now.
</ParamField>

<ParamField body="end" type="Date">
  Time when the spend permission expires. Defaults to never.
</ParamField>

<ParamField body="salt" type="string">
  Arbitrary salt to differentiate otherwise identical permissions. Hex string.
  Defaults to a random value.
</ParamField>

<ParamField body="extraData" type="string">
  Arbitrary data to attach to the permission. Hex string. Defaults to `0x`.
</ParamField>

<ParamField body="provider" type="EIP1193Provider" required>
  EIP-1193 compliant Ethereum provider instance. Get this from `sdk.getProvider()`.
</ParamField>

## Returns

<ResponseField name="permission" type="SpendPermission">
  Signed spend permission payload.

  <Expandable title="SpendPermission properties">
    <ResponseField name="permissionHash" type="string">
      Deterministic EIP-712 hash of the permission.
    </ResponseField>

    <ResponseField name="signature" type="string">
      Signature for the EIP-712 payload.
    </ResponseField>

    <ResponseField name="chainId" type="number">
      Target chain ID.
    </ResponseField>

    <ResponseField name="permission" type="object">
      Underlying permission fields.

      <Expandable title="permission fields">
        <ResponseField name="account" type="address" />

        <ResponseField name="spender" type="address" />

        <ResponseField name="token" type="address" />

        <ResponseField name="allowance" type="bigint" />

        <ResponseField name="period" type="number">Duration in seconds.</ResponseField>
        <ResponseField name="start" type="number">Unix timestamp (seconds).</ResponseField>
        <ResponseField name="end" type="number">Unix timestamp (seconds).</ResponseField>

        <ResponseField name="salt" type="string" />

        <ResponseField name="extraData" type="string" />
      </Expandable>
    </ResponseField>
  </Expandable>
</ResponseField>

<RequestExample>
  ```typescript Create and sign a spend permission theme={null}
  import { requestSpendPermission } from "@base-org/account/spend-permission";
  import { createBaseAccountSDK } from "@base-org/account";

  const sdk = createBaseAccountSDK({
    appName: 'My App',
    appLogoUrl: 'https://example.com/logo.png',
    appChainIds: [84532],
  });

  const permission = await requestSpendPermission({
    account: "0xUserBaseAccountAddress",
    spender: "0xAppSpenderAddress",
    token: "0xTokenContractAddress",
    chainId: 84532,
    allowance: 1_000_000n,
    periodInDays: 30,
    provider: sdk.getProvider(),
  });

  console.log("Spend Permission:", permission);
  ```
</RequestExample>

## Error Handling

Always wrap the call in a try-catch block to handle these errors gracefully.

<BaseBanner
  id="privacy-policy"
  dismissable={false}
  content={({ onDismiss }) => (
<div className="flex items-center">
  <div className="mr-2">
    We're updating the Base Privacy Policy, effective July 25, 2025, to reflect an expansion of Base services. Please review the updated policy here:{" "}
    <a
      href="https://docs.base.org/privacy-policy-2025"
      target="_blank"
      className="whitespace-nowrap"
    >
      Base Privacy Policy
    </a>. By continuing to use Base services, you confirm that you have read and understand the updated policy.
  </div>
  <Button onClick={onDismiss}>I Acknowledge</Button>
</div>
)}
/>