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

# Setup with App Token Auth

export const MultiRelatedLinks = ({sections = []}) => {
  if (!sections || sections.length === 0) {
    return null;
  }
  return <div className="space-y-8">
      {sections.map((section, index) => <RelatedLinks key={index} title={section.title} items={section.items} />)}
    </div>;
};

export const RelatedLinks = ({title, items = []}) => {
  const getBadgeClass = badge => {
    if (!badge) return "badge-default";
    const badgeType = badge.toLowerCase().replace(/\s+/g, "-");
    return `badge-${badge === "ガイド" ? "guide" : badgeType}`;
  };
  if (!items || items.length === 0) {
    return null;
  }
  return <div className="my-8">
      {}
      <h3 className="text-sm font-bold uppercase tracking-wider mb-4">{title}</h3>

      {}
      <div className="flex flex-col gap-3">
        {items.map((item, index) => <a key={index} href={item.href} className="py-2 px-3 rounded related_link hover:bg-[#f2f2f2] dark:hover:bg-[#111827] flex items-center gap-3 group no-underline hover:no-underline border-b-0">
            {}
            <span className={`px-2 py-1 rounded-full text-xs font-semibold uppercase tracking-wide flex-shrink-0 ${getBadgeClass(item.badge)}`}>
              {item.badge}
            </span>

            {}
            <span className="text-base">{item.label}</span>
          </a>)}
      </div>
    </div>;
};

export const Link = ({href, children, className, ...props}) => {
  const [localizedHref, setLocalizedHref] = useState(href);
  const supportedLocales = useMemo(() => ['ja'], []);
  useEffect(() => {
    const getLocaleFromPath = path => {
      const match = path.match(/^\/([a-z]{2})(?:\/|$)/);
      if (match) {
        const potentialLocale = match[1];
        if (supportedLocales.includes(potentialLocale)) {
          return potentialLocale;
        }
      }
      return null;
    };
    const hasLocalePrefix = path => {
      const match = path.match(/^\/([a-z]{2})(?:\/|$)/);
      return match ? supportedLocales.includes(match[1]) : false;
    };
    const currentPath = window.location.pathname;
    const currentLocale = getLocaleFromPath(currentPath);
    if (href && href.startsWith('/') && !hasLocalePrefix(href)) {
      if (currentLocale) {
        setLocalizedHref(`/${currentLocale}${href}`);
      } else {
        setLocalizedHref(href);
      }
    } else {
      setLocalizedHref(href);
    }
  }, [href, supportedLocales]);
  return <a href={localizedHref} className={className} {...props}>
      {children}
    </a>;
};

<RelatedLinks
  title="REQUIRED GUIDES"
  items={[
  { label: "Select Auth Method", href: "/guides/authentication/select", badge: "GUIDE" },
  { label: "Platform App", href: "/guides/applications/platform-apps/index", badge: "GUIDE" }
]}
/>

<Card href="/guides/authentication/app-token" arrow title="Learn how App Token authentication works" />

## Prerequisites

To set up a Platform App using server-side authentication, you will need to ensure
you have access the [Developer Console][devconsole] from your Box enterprise
account. Alternatively, you may sign up for a [developer account][devaccount].

## App creation steps

### 1. Log in to the Developer Console

Log into Box and navigate to the [Developer Console][devconsole].

### 2. Create a Platform App

Select **Platform App** from the list of application types.
A modal will appear to prompt the next step.

<Frame border>
    <img src="https://mintcdn.com/box/KBEcg4yicgc_HMRY/images/guides/authentication/select-app-type.png?fit=max&auto=format&n=KBEcg4yicgc_HMRY&q=85&s=b04f6e0c5b4bb1146a0672fa626bd6a3" alt="Application selection screen" width="2340" height="1414" data-path="images/guides/authentication/select-app-type.png" />
</Frame>

### 3. Select an app name

Finally, select a unique name for your application and click **Create App**.

<Frame border width="600" center>
    <img src="https://mintcdn.com/box/KBEcg4yicgc_HMRY/images/guides/authentication/limited-access-naming.png?fit=max&auto=format&n=KBEcg4yicgc_HMRY&q=85&s=d6bbb0222c3583e20ff3bbdaa3797c87" alt="App name form" width="3010" height="1650" data-path="images/guides/authentication/limited-access-naming.png" />
</Frame>

## App Authorization

Once a keypair is successfully added to your application your Box enterprise
Admin needs to authorize the application within the Box Admin Console.

Navigate to the **General Settings** tab for your application within the
[Developer Console][devconsole] and scroll down to the **App Authorization**
section.

<Frame border width="400" center>
    <img src="https://mintcdn.com/box/KBEcg4yicgc_HMRY/images/guides/authentication/app-authorization.png?fit=max&auto=format&n=KBEcg4yicgc_HMRY&q=85&s=ae2a4bdb6e77841a608d86232dd68301" alt="Add and Manage keys" width="3192" height="1408" data-path="images/guides/authentication/app-authorization.png" />
</Frame>

Click **Submit and Review** to send an email to your Box enterprise Admin for
approval. More information on this process is available in our
<Link href="/guides/authorization">authorization guide</Link>.

## Basic configuration

Before the application can be used, some basic additional configuration might be
required.

### Primary and Secondary App Tokens

Authentication with Platform Apps is done through preconfigured <Link href="/guides/authentication/app-token">App
Tokens</Link>. To configure an app token, navigate to the **Configuration**
tab for your application within the [Developer Console][devconsole].

Scroll down to the **Primary Access Token** section and click the
**Generate Key** button.

<Frame border width="600" center>
    <img src="https://mintcdn.com/box/KBEcg4yicgc_HMRY/images/guides/authentication/app-generate-key.png?fit=max&auto=format&n=KBEcg4yicgc_HMRY&q=85&s=0db7d390a273f0d6c3b6d39b66cd6690" alt="Create an app token" width="489" height="247" data-path="images/guides/authentication/app-generate-key.png" />
</Frame>

App tokens can be configured to automatically expire or be valid indefinitely.
After creation, the key can be used to make <Link href="/guides/api-calls">API calls</Link>.

<Warning>
  **App authorization**

  App Tokens can not be generated until the application is successfully
  authorized within the Box Admin Console.
</Warning>

### CORS Domains

If your application makes API calls from front-end browser code in
Javascript, the domain that these calls are made from will need to be
added to an allow-list due to [Cross Origin Resource Sharing][cors],
also known as CORS. If all requests will be made from server-side code,
you may skip this section.

To add the full URI(s) to the allow-list, navigate to the **CORS Domain**
section at the bottom of the **Configuration** tab in the
[Developer Console][devconsole].

<Frame border>
    <img src="https://mintcdn.com/box/KBEcg4yicgc_HMRY/images/guides/authentication/app-cors.png?fit=max&auto=format&n=KBEcg4yicgc_HMRY&q=85&s=12de7f8cec95dc4317b02172ef10e9df" alt="App name form" width="1504" height="378" data-path="images/guides/authentication/app-cors.png" />
</Frame>

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

[devaccount]: https://account.box.com/signup/n/developer

[devtoken]: /guides/authentication/tokens/developer-tokens

[scopes]: /guides/api-calls/permissions-and-errors/scopes

[cors]: https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

<RelatedLinks
  title="RELATED GUIDES"
  items={[
  { label: "Select Auth Method", href: "/guides/authentication/select", badge: "GUIDE" },
  { label: "OAuth 2.0 Auth", href: "/guides/authentication/oauth2/index", badge: "GUIDE" },
  { label: "Platform App Approval", href: "/guides/authorization/platform-app-approval", badge: "GUIDE" }
]}
/>
