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

# Spotify

> Connect your AI agent to a user's Spotify account to create and modify playlists.

export const TokenVaultConfigBlock = ({connectionName = "connection-name", providerName = "Provider", scopes = ["scope1", "scope2"], optionalScopes = []}) => {
  const formatScopes = scopes => {
    return scopes.map(scope => `"${scope}"`).join(", ");
  };
  const jsVariableName = `with${providerName.replace(/\s+/g, '')}Connection`;
  const pythonVariableName = `with_${connectionName.replace(/-/g, '_')}_connection`;
  return <>
      <Tabs>
        <Tab title="JavaScript" icon="js">
          <CodeBlock language="javascript" wrap="true" lines="true">
{`const auth0AI = new Auth0AI();

export const ${jsVariableName} = auth0AI.withTokenVault({
  connection: "${connectionName}",
  scopes: [${scopes.length > 0 ? `
    // Required scopes for Token Vault
    ${formatScopes(scopes)},` : ''}
    // Optional Scopes specific for your app
    ${optionalScopes.length > 0 ? `${formatScopes(optionalScopes)},` : ''} ...
  ],
  refreshToken: getAuth0RefreshToken(),
});`}
          </CodeBlock>
        </Tab>
        <Tab title="Python" icon="python">
          <CodeBlock language="python" wrap="true" lines="true">
{`auth0_ai = Auth0AI()

${pythonVariableName} = auth0_ai.with_token_vault(
    connection="${connectionName}",
    scopes=[${scopes.length > 0 ? `
        # Required scopes for Token Vault
        ${formatScopes(scopes)},` : ''}
        # Optional Scopes specific for your app
        ${optionalScopes.length > 0 ? `${formatScopes(optionalScopes)},` : ''} ...
    ],
    refresh_token=get_auth0_refresh_token,
)`}
          </CodeBlock>
        </Tab>
      </Tabs>
    </>;
};

export const Auth0SetupBlock = ({providerName, clientIDName = "Client ID", clientSecretName = "Client Secret", scopesName = "Permissions", allowFreeFormScopes = false, allowOfflineAccess = false}) => {
  return <>
      <ol>
        <li>
          In the <a href="https://manage.auth0.com">Auth0 Dashboard</a>, go to{" "}
          <b>Authentication &gt; Social</b>.
        </li>
        <li>
          Select <b>Create Connection</b>, then choose <b>{providerName}</b>.
        </li>
        <li>Click <b>Continue</b>.</li>
        <li>
          In <b>General</b>:
          <ol type="A">
            <li>
              Enter the <b>{clientIDName}</b> and <b>{clientSecretName}</b> from
              your {providerName} OAuth app.
            </li>
            <li>
              Under <b>{scopesName}</b>, select the scope(s) required for your
              application. These determine what permissions your application can
              request from {providerName}, whether for authentication (such as
              accessing basic profile details) or for API access (such as
              connecting to the provider's APIs).<br /><br />For a Dropbox and Google social
              connection, you must select <b>Offline Access</b> in the Auth0 Dashboard, enabling
              the client application to obtain an Auth0 refresh token.
            </li>
            {allowOfflineAccess && <li>
                Under <b>{scopesName}</b>, enable <b>Offline Access</b> for the connection.
                This is required by Auth0 to obtain a refresh token from {providerName}.
              </li>}
            {allowFreeFormScopes && <li>
                Add any additional scopes your application requires in the{" "}
                <b>Additional Scopes</b> field.
              </li>}
          </ol>
        </li>
        <li>
          In <b>Purpose</b>, toggle on <b>Connected Accounts for Token Vault</b>. This lets the
          connection retrieve and securely store access tokens for external
          APIs. Learn more in{" "}
          <a href="https://auth0.com/docs/secure/tokens/token-vault/connected-accounts-for-token-vault">
            Connected Accounts for Token Vault
          </a>.
        </li>
        <li>Click <b>Create</b>.</li>
        <li>
          After creation, you are redirected to the <b>Applications</b> page.
          Select the application(s) to enable this connection for.
          <br />
          Note: In a new Auth0 tenant, you can select the <b>Default App</b>.
        </li>
        <li>
          Once you have created your {providerName} social connection, <a href="https://auth0.com/docs/authenticate/identity-providers/test-connections">test your connection</a> to ensure the setup is working correctly before using it in your application.
        </li>
      </ol>
    </>;
};

export const IntegrationInfoBlock = ({providerName}) => {
  return <Note>
      This guide walks you through setting up the <strong>{providerName}</strong> connection in Auth0. 
      For an end-to-end example that shows how to set up your app to call third-party APIs on the user's behalf 
      using a connection like this, read the{' '}
      <a href="/ai/docs/get-started/call-others-apis-on-users-behalf">
        Call Other's APIs on User's Behalf Quickstart
      </a>.
    </Note>;
};

Connect your AI agent to a user's Spotify account to create and modify playlists or add songs to their library.

## Connect Spotify to Auth0

<Steps>
  <Step title="Spotify setup">
    1. Sign up for a [Spotify Developer account](https://developer.spotify.com/).
    2. Create a new app in the Spotify Developer Dashboard.
    3. Make sure to select the API/SDKs you plan to use for your application.
    4. Configure Redirect URIs:

       * Redirect URL: `https://YOUR_AUTH0_DOMAIN/login/callback`

           <Info>
             You can find the **Auth0 domain** in the [Auth0 Dashboard](https://manage.auth0.com/).

             You can find this under **Applications > \[Your Application] > Settings > Basic Information > Domain**.

             If you are using the [custom domains](https://auth0.com/docs/custom-domains) feature, your Auth0 domain is the custom domain. You can find this under **Branding > Custom Domains**.
           </Info>
    5. When you click **Save** you will be redirected to the configuration page for the application you just created. You will see **Client ID** and can select *View Client Secret* to see your **Client Secret**. Make sure to note them down for the next steps:
       * **Client ID**  (OAuth client\_id)
       * **Client Secret** (OAuth client\_secret)

    To learn more about setting up Spotify, read the [Login with Spotify documentation](https://developer.spotify.com/documentation/web-api/concepts/authorization).
  </Step>

  <Step title="Auth0 setup">
    <Auth0SetupBlock providerName="Spotify" scopesName="Attributes" allowFreeFormScopes={true} />
  </Step>
</Steps>

<IntegrationInfoBlock providerName="Spotify" />

## Token Vault configuration example

To configure the Token Vault for your Spotify connection, you can use the following code snippet in your application:

<TokenVaultConfigBlock providerName="Spotify" connectionName="spotify" scopes={["user-read-private"]} optionalScopes={["user-read-email"]} />

## Next steps

* To learn how to configure applications to access Token Vault, read [Configure Token Vault](https://auth0.com/docs/secure/tokens/token-vault/configure-token-vault).
* If your application uses [Organizations](https://auth0.com/docs/manage-users/organizations), authenticate the user with the target organization before initiating the Connected Accounts flow. Connected accounts remain linked to the individual user profile.
* To learn how to get an access token to make a tool call, complete the [Call other's APIs on user's behalf Quickstart](https://auth0.com/ai/docs/get-started/call-others-apis-on-users-behalf).