> ## 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 SignupCTA = ({children}) => {
  return <div className="flex flex-wrap items-center gap-4 p-5 rounded-lg border border-gray-200 dark:border-gray-700 my-6" style={{
    background: "linear-gradient(135deg, rgba(0, 97, 213, 0.06), rgba(0, 97, 213, 0.02))"
  }}>
      <div className="flex-1 text-sm leading-relaxed text-gray-700 dark:text-gray-300" style={{
    minWidth: "280px"
  }}>
        {children}
      </div>
      <div className="flex flex-col items-center gap-2">
        <a href="https://account.box.com/signup/developer#ty9l3" className="signup-cta-button inline-flex items-center whitespace-nowrap px-5 py-2 text-sm font-semibold text-white no-underline">
          Get started for free
        </a>
        <a href="https://account.box.com/developers/console" className="signup-cta-login text-xs text-gray-500 dark:text-gray-400 no-underline whitespace-nowrap">
          Already have an account? Log in
        </a>
      </div>
    </div>;
};

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 = href;
  return <a href={localizedHref} className={className} {...props}>
      {children}
    </a>;
};

<RelatedLinks
  title="REQUIRED GUIDES"
  items={[
{ label: translate("Select Auth Method"), href: "/guides/authentication/select", badge: "GUIDE" },
{ label: translate("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].

<SignupCTA>
  Don't have a Box account yet? A free developer account gives you access to the Developer Console, where you can create and configure OAuth 2.0 applications.
</SignupCTA>

## App creation steps

### Navigate to the Developer Console

Log into Box and go to the
[Developer Console][devconsole]. Select **Platform Apps**, then click **New App**.

### Create a new app

On the **Create a New App** screen, enter your app name
and select **OAuth 2.0** from the **App Type** dropdown.

<Frame border>
  <img src="https://mintcdn.com/box/J0IlfoFf_v0hLHOU/images/guides/authentication/create-new-app.png?fit=max&auto=format&n=J0IlfoFf_v0hLHOU&q=85&s=e1118ea7200b15165c48f314ea4e9d0f" alt="Create a New App screen" width="1024" height="891" data-path="images/guides/authentication/create-new-app.png" />
</Frame>

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

## 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: translate("Select Auth Method"), href: "/guides/authentication/select", badge: "GUIDE" },
{ label: translate("Setup with OAuth 2.0"), href: "/guides/authentication/oauth2/oauth2-setup", badge: "GUIDE" }
]}
/>