> ## 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 OAuth 2.0

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" }
]}
/>

A Platform App can be set up to use client-side <Link href="/guides/authentication/oauth2">OAuth 2.0</Link> authentication.

<Card href="/guides/authentication/oauth2" arrow title="Learn how OAuth 2.0 authentication works" />

## Prerequisites

To set up a Platform App using OAuth 2.0 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

### Navigate to the Developer Console

Log into Box and go to the
[Developer Console][devconsole]. Select **Create Platform App**.

### Select application type

Select **Platform App** from the list of application types. A modal will appear to
prompt a selection for 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>

### Provide basic application information

To describe your app, provide an app name and description.
Use the drop-down list to select the app's purpose. Depending on the option chosen, you might need to specify further details.

| Purpose                   | Details                                                                                              |
| ------------------------- | ---------------------------------------------------------------------------------------------------- |
| Automation, Custom Portal | Specify if the app is built by a customer or partner.                                                |
| Integration               | Specify the integration category, external system name if the app is built by a customer or partner. |
| Other                     | Specify the app purpose and if it is built by a customer or partner.                                 |

<Frame border center width="300">
    <img src="https://mintcdn.com/box/KBEcg4yicgc_HMRY/images/guides/authentication/custom-app-selection.png?fit=max&auto=format&n=KBEcg4yicgc_HMRY&q=85&s=deda3858253ab6a60b861ab0183b415b" alt="Auth selection screen" width="1042" height="1216" data-path="images/guides/authentication/custom-app-selection.png" />
</Frame>

### Select application authentication

Select **User Authentication (OAuth 2.0)** and confirm with **Create App**.

<Warning>
  Once you make a selection, you will not be able to change to a different
  authentication method without creating a new application.
</Warning>

<Frame border center width="300">
    <img src="https://mintcdn.com/box/KBEcg4yicgc_HMRY/images/guides/authentication/custom-app-authentication-oauth.png?fit=max&auto=format&n=KBEcg4yicgc_HMRY&q=85&s=2d67dbc79f7ed8d34bc95e0d76ed9cfe" alt="Auth selection screen" width="1036" height="1148" data-path="images/guides/authentication/custom-app-authentication-oauth.png" />
</Frame>

## Basic configuration

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

### Redirect URI

During the OAuth 2.0 flow, users are redirected to their browser to
authenticate and then authorize the application to take actions on their behalf.

Prior to redirecting the user, Box verifies that the `redirect_uri` parameter
passed into the <Link href="/reference/get-authorize/#param-redirect_uri">authorization URL</Link> matches one of the redirect
URIs configured for the application. This will be an exact match check, meaning
the URIs must be exactly the same. Localhost and loopback address redirect URIs
will be permitted redirect to any port, but the scheme, domain, path and query
parameters must match one of the configured URIs.

You can configure these under the OAuth 2.0 Redirect URI section on the
Configuration page in the developer console. These must be valid URIs that are
HTTPS, or a less secure HTTP for localhost or loopback address. We do not
permit duplicate URIs to be saved.

<Warning>
  Starting November 29, 2021, new applications using OAuth 2.0 will
  require the URIs set in the configuration tab of the Developer Console to
  strictly match the one used during redirect. In addition, both new and
  existing applications, will gain the ability to add multiple redirect URIs.

  If you configured multiple redirect URIs for the application,
  the authorization URL must include the `redirect_uri` parameter matching one
  of the URIs configured in the developer console.
  If the parameter is not specified, the user will see a `redirect_uri_missing`
  error and will not be redirected back to the app after granting application
  access.

  For existing applications, the deadline to make changes to this URL to avoid
  service disruption is May 13, 2022.
</Warning>

<Frame border width="600" center>
    <img src="https://mintcdn.com/box/KBEcg4yicgc_HMRY/images/guides/authentication/app-redirect-uri-3.png?fit=max&auto=format&n=KBEcg4yicgc_HMRY&q=85&s=7c467d44b0056cee68c0c2bb82b3c57c" alt="App name form" width="2452" height="826" data-path="images/guides/authentication/app-redirect-uri-3.png" />
</Frame>

### Application Scopes

Scopes define what permissions your application has in order to access data. See
the <Link href="/guides/api-calls/permissions-and-errors/scopes">scopes guide</Link> for detailed information on each option.

<Frame>
    <img src="https://mintcdn.com/box/KBEcg4yicgc_HMRY/images/guides/authentication/app-scopes.png?fit=max&auto=format&n=KBEcg4yicgc_HMRY&q=85&s=7d6a76fe395fc483d33179f6c4ad34e1" alt="App name form" width="1227" height="640" data-path="images/guides/authentication/app-scopes.png" />
</Frame>

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

[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: "Setup with OAuth 2.0", href: "/guides/authentication/oauth2/oauth2-setup", badge: "GUIDE" }
]}
/>