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

# CLI Installation and Configuration

export const ProgressBar = ({pages = [], ...props}) => {
  const [currentStep, setCurrentStep] = useState(0);
  const [isDarkMode, setIsDarkMode] = useState(false);
  useEffect(() => {
    const checkDarkMode = () => {
      const isDark = document.documentElement.classList.contains('dark');
      console.log('ProgressBar - isDarkMode:', isDark);
      setIsDarkMode(isDark);
    };
    checkDarkMode();
    const observer = new MutationObserver(() => {
      checkDarkMode();
    });
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ['class']
    });
    return () => {
      observer.disconnect();
    };
  }, []);
  useEffect(() => {
    if (pages.length > 0) {
      const currentPath = window.location.pathname;
      const stepIndex = pages.findIndex(page => {
        const pagePath = page.startsWith('/') ? page : `/${page}`;
        return currentPath.endsWith(pagePath) || currentPath.includes(pagePath);
      });
      if (stepIndex !== -1) {
        setCurrentStep(stepIndex + 1);
      }
    }
  }, [pages]);
  if (!pages || pages.length === 0) {
    return null;
  }
  const step = currentStep;
  const total = pages.length;
  console.log('ProgressBar - Rendering with isDarkMode:', isDarkMode);
  const progressBarContainerStyle = {
    width: '100%',
    marginBottom: '32px',
    display: 'flex',
    alignItems: 'center',
    gap: '16px'
  };
  const stepsContainerStyle = {
    display: 'flex',
    alignItems: 'center',
    gap: '8px',
    flexShrink: 0
  };
  const progressBarTrackStyle = {
    flex: 1,
    height: '22px',
    backgroundColor: 'rgba(169, 210, 244, 0.06)',
    border: isDarkMode ? '1px solid rgba(230, 241, 247, 0.67)' : '1px solid #e3ecf3',
    borderRadius: '4px',
    overflow: 'hidden',
    position: 'relative'
  };
  const progressBarFillStyle = {
    height: '100%',
    backgroundColor: 'rgba(113, 192, 248, 0.23)',
    width: `${step / total * 100}%`,
    transition: 'width 0.3s ease'
  };
  const getStepStyle = (stepNumber, isActive) => {
    if (isDarkMode) {
      return {
        width: '22px',
        height: '22px',
        borderRadius: '4px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: '12px',
        fontWeight: '600',
        position: 'relative',
        zIndex: 1,
        transition: 'all 0.3s ease',
        backgroundColor: isActive ? 'rgba(113, 192, 248, 0.23)' : 'transparent',
        color: isActive ? '#60a5fa' : '#a0aec0',
        border: isActive ? '1px solid #e3ecf3' : '1px solid #e0e6eb',
        cursor: 'pointer',
        textDecoration: 'none'
      };
    }
    if (isActive) {
      return {
        width: '22px',
        height: '22px',
        borderRadius: '4px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: '12px',
        fontWeight: '600',
        position: 'relative',
        zIndex: 1,
        transition: 'all 0.3s ease',
        backgroundColor: 'rgba(169, 210, 244, 0.32)',
        color: '#374151',
        border: '1px solid #e1eef8',
        cursor: 'pointer',
        textDecoration: 'none'
      };
    }
    return {
      width: '22px',
      height: '22px',
      borderRadius: '4px',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      fontSize: '12px',
      fontWeight: '600',
      position: 'relative',
      zIndex: 1,
      transition: 'all 0.3s ease',
      backgroundColor: '#fbfbfb',
      color: '#9ca3af',
      border: '1px solid #e3ecf3',
      cursor: 'pointer',
      textDecoration: 'none'
    };
  };
  return <div style={progressBarContainerStyle} {...props}>
      <div style={stepsContainerStyle}>
        {Array.from({
    length: total
  }, (_, index) => {
    const stepNumber = index + 1;
    const pageIndex = index;
    const pagePath = pages[pageIndex];
    const fullPath = pagePath.startsWith('/') ? pagePath : `/${pagePath}`;
    const isActive = stepNumber === step;
    return <a key={stepNumber} href={fullPath} style={getStepStyle(stepNumber, isActive)}>
              {stepNumber}
            </a>;
  })}
      </div>
      <div style={progressBarTrackStyle}>
        <div style={progressBarFillStyle}></div>
      </div>
    </div>;
};

export const Store = ({id, children, placeholder, field, pattern, disabled, inline, obscured, ...props}) => {
  const [value, setValue] = useState('');
  const [isDarkMode, setIsDarkMode] = useState(false);
  const [isHovered, setIsHovered] = useState(false);
  const storageKey = `com.box.developer.${id}`;
  useEffect(() => {
    const checkDarkMode = () => {
      if (document.documentElement.classList.contains('dark')) {
        setIsDarkMode(true);
      } else if (document.documentElement.classList.contains('light')) {
        setIsDarkMode(false);
      } else {
        setIsDarkMode(window.matchMedia('(prefers-color-scheme: dark)').matches);
      }
    };
    checkDarkMode();
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    const handleMediaChange = e => {
      if (!document.documentElement.classList.contains('dark') && !document.documentElement.classList.contains('light')) {
        setIsDarkMode(e.matches);
      }
    };
    mediaQuery.addEventListener('change', handleMediaChange);
    const observer = new MutationObserver(() => {
      checkDarkMode();
    });
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ['class']
    });
    return () => {
      mediaQuery.removeEventListener('change', handleMediaChange);
      observer.disconnect();
    };
  }, []);
  useEffect(() => {
    const loadFromStorage = () => {
      try {
        const stored = localStorage.getItem(storageKey);
        if (stored) {
          if (field) {
            try {
              const obj = JSON.parse(stored);
              const fieldValue = obj && obj[field] ? obj[field] : '';
              setValue(fieldValue);
            } catch (e) {
              localStorage.setItem(storageKey, JSON.stringify({}));
              setValue('');
            }
          } else {
            setValue(stored);
          }
        } else {
          if (field) {
            localStorage.setItem(storageKey, JSON.stringify({}));
          }
          setValue('');
        }
      } catch (e) {
        console.error('Error loading from localStorage:', e);
        setValue('');
      }
    };
    loadFromStorage();
    const interval = setInterval(() => {
      loadFromStorage();
    }, 500);
    return () => clearInterval(interval);
  }, [id, field, storageKey]);
  const handleChange = e => {
    const newValue = e.target.value;
    setValue(newValue);
    try {
      if (field) {
        const stored = localStorage.getItem(storageKey);
        let obj = {};
        if (stored) {
          try {
            obj = JSON.parse(stored);
          } catch (e) {
            obj = {};
          }
        }
        obj[field] = newValue;
        localStorage.setItem(storageKey, JSON.stringify(obj));
      } else {
        localStorage.setItem(storageKey, newValue);
      }
    } catch (e) {
      console.error('Error saving to localStorage:', e);
    }
  };
  const getDisplayValue = () => {
    if (obscured && value && !isHovered) {
      return ('•').repeat(value.length);
    }
    return value;
  };
  const hasValue = value && value.length > 0;
  const isValid = () => {
    if (!hasValue) return true;
    if (pattern) {
      const regex = new RegExp(pattern);
      return regex.test(value);
    }
    return true;
  };
  const isValidValue = isValid();
  const containerStyles = {
    display: 'block',
    fontSize: '14px',
    marginBottom: inline ? '0.5rem' : '1rem',
    position: 'relative',
    zIndex: 2
  };
  const labelStyles = {
    border: inline ? isDarkMode ? '1px dashed #4b5563' : '1px dashed #dde6ed' : 'none',
    borderRight: inline ? 'none' : undefined,
    display: inline ? 'inline-block' : 'block',
    height: inline ? '2.5em' : 'auto',
    padding: inline ? '0.3333333333rem 0.5rem' : '0 0 0.3333333333rem 0',
    textAlign: inline ? 'right' : 'left',
    verticalAlign: inline ? 'top' : undefined,
    width: inline ? '200px' : '100%',
    fontSize: '14px',
    fontWeight: '500',
    color: isDarkMode ? '#f9fafb' : '#374151',
    margin: 0,
    boxSizing: 'border-box'
  };
  const getBorderColor = () => {
    if (disabled) {
      return isDarkMode ? '1px dashed #4b5563' : '1px dashed #dde6ed';
    }
    if (isValidValue && hasValue) {
      return '1px solid #2e8540';
    }
    if (!isValidValue && hasValue) {
      return '1px solid #e31c3d';
    }
    return isDarkMode ? '1px solid #4b5563' : '1px solid #d1d5db';
  };
  const getTextColor = () => {
    if (disabled) {
      return isDarkMode ? '#9ca3af' : '#607079';
    }
    if (isValidValue && hasValue) {
      return '#2e8540';
    }
    if (!isValidValue && hasValue) {
      return '#e31c3d';
    }
    return isDarkMode ? '#f9fafb' : '#111827';
  };
  const getBackgroundColor = () => {
    if (!isValidValue && hasValue) {
      return isDarkMode ? 'rgba(227, 28, 61, 0.1)' : 'rgba(255, 255, 255, 0.2)';
    }
    return isDarkMode ? '#1f2937' : '#fff';
  };
  const inputStyles = {
    display: inline ? 'inline-block' : 'block',
    verticalAlign: inline ? 'top' : undefined,
    width: inline ? 'calc(100% - 200px)' : '100%',
    fontFamily: 'courier new, courier, monospace',
    height: '2.5em',
    margin: 0,
    padding: '0.3333333333rem 0.5rem',
    backgroundColor: getBackgroundColor(),
    border: getBorderColor(),
    color: getTextColor(),
    outline: 'none',
    boxSizing: 'border-box'
  };
  const iconContainerStyles = {
    position: 'absolute',
    right: inline ? '0.7em' : '1em',
    top: inline ? '0.6rem' : '1.8em',
    display: obscured && value ? 'flex' : 'none',
    alignItems: 'center',
    justifyContent: 'center',
    pointerEvents: 'none',
    zIndex: 10
  };
  return <span style={containerStyles} data-obscured={obscured || false} data-disabled={disabled || false} data-inline={inline || false} onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} {...props}>
      {children && <label style={labelStyles}>{children}</label>}
      {obscured && value && <div style={iconContainerStyles}>
          <Icon icon={isHovered ? 'eye-slash' : 'eye'} size={16} />
        </div>}
      <input type="text" value={getDisplayValue()} onChange={handleChange} placeholder={placeholder} pattern={pattern} disabled={disabled} data-valid={isValidValue} data-has-value={hasValue ? 'true' : ''} style={inputStyles} />
    </span>;
};

export const ChoiceDebug = ({option}) => {
  const [currentValue, setCurrentValue] = useState(null);
  const [allState, setAllState] = useState({});
  const [isDarkMode, setIsDarkMode] = useState(false);
  useEffect(() => {
    const updateState = () => {
      if (window.choiceStateManager) {
        setCurrentValue(window.choiceStateManager.getValue(option));
        setAllState(window.choiceStateManager.getState());
      }
    };
    updateState();
    const unsubscribe = window.listenToChoice?.(option, updateState) || (() => {});
    const handleGlobalUpdate = () => updateState();
    window.addEventListener("choiceStateUpdate", handleGlobalUpdate);
    return () => {
      unsubscribe();
      window.removeEventListener("choiceStateUpdate", handleGlobalUpdate);
    };
  }, [option]);
  useEffect(() => {
    const checkDarkMode = () => {
      if (document.documentElement.classList.contains("dark")) {
        setIsDarkMode(true);
      } else if (document.documentElement.classList.contains("light")) {
        setIsDarkMode(false);
      } else {
        setIsDarkMode(window.matchMedia("(prefers-color-scheme: dark)").matches);
      }
    };
    checkDarkMode();
    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
    const handleMediaChange = e => {
      if (!document.documentElement.classList.contains("dark") && !document.documentElement.classList.contains("light")) {
        setIsDarkMode(e.matches);
      }
    };
    mediaQuery.addEventListener("change", handleMediaChange);
    const observer = new MutationObserver(() => {
      checkDarkMode();
    });
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["class"]
    });
    return () => {
      mediaQuery.removeEventListener("change", handleMediaChange);
      observer.disconnect();
    };
  }, []);
  return <div style={{
    padding: "10px",
    backgroundColor: isDarkMode ? "#2d3748" : "#f5f5f5",
    border: isDarkMode ? "1px solid #4a5568" : "1px solid #ddd",
    borderRadius: "4px",
    fontSize: "12px",
    fontFamily: "monospace",
    marginTop: "20px",
    color: isDarkMode ? "#e2e8f0" : "inherit"
  }}>
      <strong>Choice Debug:</strong>
      <br />
      Option: {option}
      <br />
      Current Value: {currentValue || "undefined"}
      <br />
      All State: {JSON.stringify(allState, null, 2)}
    </div>;
};

export const Observe = ({option, value, children, ...props}) => {
  const [shouldShow, setShouldShow] = useState(false);
  useEffect(() => {
    const updateVisibility = () => {
      const matches = window.matchesChoiceValues?.(option, value) || false;
      setShouldShow(matches);
    };
    updateVisibility();
    const unsubscribe = window.listenToChoice?.(option, updateVisibility) || (() => {});
    return unsubscribe;
  }, [option, value]);
  if (!shouldShow) {
    return null;
  }
  return <div {...props}>{children}</div>;
};

export const Trigger = ({option, value, children, ...props}) => {
  const handleClick = () => {
    window.triggerChoice?.(option, value);
  };
  return <div onClick={handleClick} style={{
    cursor: "pointer"
  }} {...props}>
      {children}
    </div>;
};

export const Grid = ({columns = 2, compact = false, children, ...props}) => {
  const gridStyles = {
    display: "grid",
    gridTemplateColumns: `repeat(${columns}, 1fr)`,
    gap: compact ? "8px" : "16px",
    marginBottom: compact ? "10px" : "20px"
  };
  return <div style={gridStyles} {...props}>
      {children}
    </div>;
};

export const Choice = ({option, value, color = "", unset = false, lazy = false, children, ...props}) => {
  const [shouldShow, setShouldShow] = useState(false);
  const [hasEverShown, setHasEverShown] = useState(false);
  const [isDarkMode, setIsDarkMode] = useState(false);
  useEffect(() => {
    const updateVisibility = () => {
      const hasOptionValue = window.hasChoiceValue?.(option) || false;
      const matchesValue = window.matchesChoiceValues?.(option, value) || false;
      let show = false;
      if (unset && !hasOptionValue) {
        show = true;
      } else if (!unset && matchesValue) {
        show = true;
      }
      setShouldShow(show);
      if (show && !hasEverShown) {
        setHasEverShown(true);
      }
    };
    updateVisibility();
    const unsubscribe = window.listenToChoice?.(option, updateVisibility) || (() => {});
    return unsubscribe;
  }, [option, value, unset, hasEverShown]);
  useEffect(() => {
    const checkDarkMode = () => {
      if (document.documentElement.classList.contains("dark")) {
        setIsDarkMode(true);
      } else if (document.documentElement.classList.contains("light")) {
        setIsDarkMode(false);
      } else {
        setIsDarkMode(window.matchMedia("(prefers-color-scheme: dark)").matches);
      }
    };
    checkDarkMode();
    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
    const handleMediaChange = e => {
      if (!document.documentElement.classList.contains("dark") && !document.documentElement.classList.contains("light")) {
        setIsDarkMode(e.matches);
      }
    };
    mediaQuery.addEventListener("change", handleMediaChange);
    const observer = new MutationObserver(() => {
      checkDarkMode();
    });
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["class"]
    });
    return () => {
      mediaQuery.removeEventListener("change", handleMediaChange);
      observer.disconnect();
    };
  }, []);
  const getColorStyles = () => {
    const baseStyles = {
      border: isDarkMode ? "1px dashed #4a5568" : "1px dashed #e1e5e9",
      padding: "20px",
      marginBottom: "20px",
      borderRadius: "8px",
      backgroundColor: isDarkMode ? "#1a202c" : "#ffffff"
    };
    const colorMap = {
      green: {
        light: {
          backgroundColor: "#d4edda",
          borderColor: "#28a745"
        },
        dark: {
          backgroundColor: "#1a3a2a",
          borderColor: "#66bb6a"
        }
      },
      red: {
        light: {
          backgroundColor: "#f8d7da",
          borderColor: "#dc3545"
        },
        dark: {
          backgroundColor: "#3a1a1a",
          borderColor: "#ef5350"
        }
      },
      blue: {
        light: {
          backgroundColor: "#d1ecf1",
          borderColor: "#0c5460"
        },
        dark: {
          backgroundColor: "#1a2a3a",
          borderColor: "#42a5f5"
        }
      },
      none: {
        backgroundColor: "transparent",
        padding: "0",
        margin: "0",
        border: "none"
      }
    };
    const colorStyles = color !== "none" ? colorMap[color]?.[isDarkMode ? "dark" : "light"] || ({}) : colorMap.none;
    return {
      ...baseStyles,
      ...colorStyles
    };
  };
  if (lazy && !hasEverShown && !shouldShow) {
    return null;
  }
  return <div style={{
    ...getColorStyles(),
    display: shouldShow ? "block" : "none"
  }} className="choice-content" {...props}>
      {children}
    </div>;
};

export const Choose = ({option, value, color = "", children, ...props}) => {
  const [isSelected, setIsSelected] = useState(false);
  const [hasOptionTriggered, setHasOptionTriggered] = useState(false);
  const [isDarkMode, setIsDarkMode] = useState(false);
  useEffect(() => {
    const currentValue = window.getChoiceValue?.(option);
    const optionTriggered = window.hasChoiceValue?.(option) || false;
    setIsSelected(currentValue === value);
    setHasOptionTriggered(optionTriggered);
    const unsubscribe = window.listenToChoice?.(option, newValue => {
      setIsSelected(newValue === value);
      setHasOptionTriggered(true);
    }) || (() => {});
    return unsubscribe;
  }, [option, value]);
  useEffect(() => {
    const checkDarkMode = () => {
      if (document.documentElement.classList.contains("dark")) {
        setIsDarkMode(true);
      } else if (document.documentElement.classList.contains("light")) {
        setIsDarkMode(false);
      } else {
        setIsDarkMode(window.matchMedia("(prefers-color-scheme: dark)").matches);
      }
    };
    checkDarkMode();
    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
    const handleMediaChange = e => {
      if (!document.documentElement.classList.contains("dark") && !document.documentElement.classList.contains("light")) {
        setIsDarkMode(e.matches);
      }
    };
    mediaQuery.addEventListener("change", handleMediaChange);
    const observer = new MutationObserver(() => {
      checkDarkMode();
    });
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["class"]
    });
    return () => {
      mediaQuery.removeEventListener("change", handleMediaChange);
      observer.disconnect();
    };
  }, []);
  const handleClick = () => {
    window.triggerChoice?.(option, value);
  };
  const handleKeyDown = e => {
    if (e.key === "Enter" || e.key === " ") {
      e.preventDefault();
      handleClick();
    }
  };
  const getColorStyles = () => {
    const baseStyles = {
      border: isDarkMode ? "1px dashed #4a5568" : "1px dashed #e1e5e9",
      cursor: "pointer",
      padding: "20px",
      position: "relative",
      backgroundColor: isDarkMode ? "#2d3748" : "#f8f9fa",
      outline: "none",
      height: "100%",
      borderRadius: "8px",
      transition: "all 0.2s ease",
      display: "flex",
      flexDirection: "column"
    };
    const colorMap = {
      green: {
        light: {
          backgroundColor: "#d4edda",
          borderColor: "#28a745"
        },
        dark: {
          backgroundColor: "#1a3a2a",
          borderColor: "#66bb6a"
        }
      },
      red: {
        light: {
          backgroundColor: "#f8d7da",
          borderColor: "#dc3545"
        },
        dark: {
          backgroundColor: "#3a1a1a",
          borderColor: "#ef5350"
        }
      },
      blue: {
        light: {
          backgroundColor: "#d1ecf1",
          borderColor: "#0c5460"
        },
        dark: {
          backgroundColor: "#1a2a3a",
          borderColor: "#42a5f5"
        }
      }
    };
    const colorStyles = colorMap[color]?.[isDarkMode ? "dark" : "light"] || ({});
    if (isSelected) {
      return {
        ...baseStyles,
        ...colorStyles,
        borderStyle: "solid",
        borderWidth: "3px",
        borderColor: colorStyles.borderColor || (isDarkMode ? "#42a5f5" : "#0061d5"),
        backgroundColor: colorStyles.backgroundColor || (isDarkMode ? "#1a2a3a" : "#e3f2fd"),
        boxShadow: isDarkMode ? "0 2px 8px rgba(66, 165, 245, 0.3)" : "0 2px 8px rgba(0, 97, 213, 0.3)",
        transform: "scale(1.02)"
      };
    }
    if (hasOptionTriggered && !isSelected) {
      return {
        ...baseStyles,
        ...colorStyles,
        opacity: 0.5
      };
    }
    return {
      ...baseStyles,
      ...colorStyles
    };
  };
  const iconStyles = {
    float: "left",
    position: "relative",
    top: "2px",
    marginRight: "12px",
    width: "20px",
    height: "20px",
    color: isSelected ? isDarkMode ? "#42a5f5" : "#0061d5" : isDarkMode ? "#a0aec0" : "#666"
  };
  return <div onClick={handleClick} style={getColorStyles()} tabIndex={0} onKeyDown={handleKeyDown} {...props}>
      <div style={iconStyles}>
        {isSelected ? <svg viewBox="0 0 24 24" fill="currentColor" style={{
    width: "100%",
    height: "100%"
  }}>
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
          </svg> : <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{
    width: "100%",
    height: "100%"
  }}>
            <circle cx="12" cy="12" r="10" />
          </svg>}
      </div>
      <div style={{
    flex: 1
  }} className="choose-content">
        {children}
      </div>
    </div>;
};

<ProgressBar
  pages={[
                        "guides/cli/quick-start/create-oauth-app",
                        "guides/cli/quick-start/install-and-configure",
                        "guides/cli/quick-start/build-commands-help",
                        "guides/cli/quick-start/options-and-bulk-commands",
                        "guides/cli/quick-start/powershell-script-templates",
                        "guides/cli/quick-start/next-steps"
                      ]}
/>

<Choice option="cli.app_type" value="create_new,use_existing,clicked" color="none">
  Installers are available for Windows and macOS. However, the raw source-code is
  available if you would like to build the CLI in other environments.

  ## Windows & macOS Installers

  To install the latest CLI on your machine, download the latest
  `.exe` for Windows or `.pkg` for macOS for the latest release.

  <Card href="https://github.com/box/boxcli/releases" title="Download the latest CLI installer" />

  ## Linux & Node install

  Additionally, the CLI can be installed as a Node package on any platform,
  including Linux. For this to work you will need to have
  [Node JS](https://nodejs.org/) installed on your machine.

  ```bash  theme={null}
  npm install --global @box/cli
  ```

  ## Source Code

  The source code for the CLI is available via [GitHub][cli].

  ## Run configuration command

  You will now need to configure the CLI by logging in to your Box App.

  In this step, we will use the **Client ID** and **Client Secret** from the
  previous step to log you in and create an **Access Token** for your user.

  ## The reason to log in

  Currently you have provided us with the following information.

  <Store disabled inline id="cli_credentials.client_id">
    Client ID
  </Store>

  <Store disabled inline obscured id="cli_credentials.client_secret">
    Client Secret
  </Store>

  Open your terminal or command line and execute the command: `box login -n example_name`.

  <br />

  Copy the Client ID and Client Secret into the terminal window when prompted.

  <Frame center>
        <img src="https://mintcdn.com/box/KBEcg4yicgc_HMRY/images/guides/cli/cli-login.png?fit=max&auto=format&n=KBEcg4yicgc_HMRY&q=85&s=9d4e8782806c0b01d4a84ff90988c8d4" alt="CLI Login" width="1640" height="1018" data-path="images/guides/cli/cli-login.png" />
  </Frame>

  Click the **Grant access to Box** button that appears in the browser window.

  <Frame center>
        <img src="https://mintcdn.com/box/KBEcg4yicgc_HMRY/images/guides/cli/cli-grant-access.png?fit=max&auto=format&n=KBEcg4yicgc_HMRY&q=85&s=f6aa4562a5e93b52819b45846f74c96d" alt="Grant CLI Access" width="3584" height="2190" data-path="images/guides/cli/cli-grant-access.png" />
  </Frame>

  If successful, you will see the following success message.

  <Frame center>
        <img src="https://mintcdn.com/box/KBEcg4yicgc_HMRY/images/guides/cli/cli-env-setup.png?fit=max&auto=format&n=KBEcg4yicgc_HMRY&q=85&s=3fc065bc29fd5ef3e26a6f46e9e524f0" alt="CLI Env Setup" width="3584" height="2192" data-path="images/guides/cli/cli-env-setup.png" />
  </Frame>

  ## Confirm configuration

  To confirm successful configuration, make your first Box API call with the Box
  CLI by entering the command `box users:get me`.

  <Frame center>
        <img src="https://mintcdn.com/box/KBEcg4yicgc_HMRY/images/guides/cli/cli-first-call.png?fit=max&auto=format&n=KBEcg4yicgc_HMRY&q=85&s=6acaab4089aa0a491fa34f870a0edfd7" alt="CLI Users Call" width="1626" height="1018" data-path="images/guides/cli/cli-first-call.png" />
  </Frame>

  A successful response will provide details about your user account.

  ```json  theme={null}
  Type: user
  ID: ''0123456789''
  Name: Aaron Levie
  Login: example@box.com
  Created At: '2020-01-01T09:45:01-07:00'
  Modified At: '2021-03-01T09:30:05-07:00'
  Language: en
  Timezone: America/Los_Angeles
  Space Amount: 999999999999999
  Space Used: 6291500
  Max Upload Size: 16106127360
  Status: active
  Job Title: ''
  Phone: ''
  Address: example+user@box.com
  Avatar URL: ''
  Notification Email: []
  ```

  ## Summary

  * You installed the CLI
  * You configured the CLI to use the OAuth 2.0 Application created earlier
  * You **made your first Box CLI Box API call** confirmed the user associated with your Access Token

  <Next>I installed and configured the CLI</Next>
</Choice>

<Choice option="cli.app_type" unset color="none">
  <Danger>
    **Incomplete previous step**

    Please complete the previous step to set up the **Box App** you want
    to use.
  </Danger>
</Choice>

[cli]: https://github.com/box/boxcli

[auth]: /guides/authentication/jwt/without-sdk

[sa]: /platform/user-types/#service-account

[at]: /guides/authentication/tokens

[dc]: https://app.box.com/developers/console