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

# Canva OAuth 2.0 connector profile – StackOne setup guide

> Set up the OAuth 2.0 connector profile for Canva in StackOne. One-time admin setup required before your users can link Canva accounts via Hub.

<Warning>You must have a Canva account and access to the Canva Developer Portal to create an integration.</Warning>

<Panel>
  <div className="not-prose guides-scope-selector" data-guides-scope-selector data-guide-actions-json="[{&#x22;id&#x22;:&#x22;canva_list_designs&#x22;,&#x22;label&#x22;:&#x22;List Designs&#x22;,&#x22;scopes&#x22;:[&#x22;design:meta:read&#x22;]},{&#x22;id&#x22;:&#x22;canva_get_design&#x22;,&#x22;label&#x22;:&#x22;Get Design&#x22;,&#x22;scopes&#x22;:[&#x22;design:meta:read&#x22;]},{&#x22;id&#x22;:&#x22;canva_create_design&#x22;,&#x22;label&#x22;:&#x22;Create Design&#x22;,&#x22;scopes&#x22;:[&#x22;design:content:write&#x22;]},{&#x22;id&#x22;:&#x22;canva_list_design_pages&#x22;,&#x22;label&#x22;:&#x22;List Design Pages&#x22;,&#x22;scopes&#x22;:[&#x22;design:meta:read&#x22;]},{&#x22;id&#x22;:&#x22;canva_list_folder_items&#x22;,&#x22;label&#x22;:&#x22;List Folder Items&#x22;,&#x22;scopes&#x22;:[&#x22;folder:read&#x22;]},{&#x22;id&#x22;:&#x22;canva_get_folder&#x22;,&#x22;label&#x22;:&#x22;Get Folder&#x22;,&#x22;scopes&#x22;:[&#x22;folder:read&#x22;]},{&#x22;id&#x22;:&#x22;canva_create_folder&#x22;,&#x22;label&#x22;:&#x22;Create Folder&#x22;,&#x22;scopes&#x22;:[&#x22;folder:write&#x22;]},{&#x22;id&#x22;:&#x22;canva_update_folder&#x22;,&#x22;label&#x22;:&#x22;Update Folder&#x22;,&#x22;scopes&#x22;:[&#x22;folder:write&#x22;]},{&#x22;id&#x22;:&#x22;canva_delete_folder&#x22;,&#x22;label&#x22;:&#x22;Delete Folder&#x22;,&#x22;scopes&#x22;:[&#x22;folder:write&#x22;]},{&#x22;id&#x22;:&#x22;canva_move_folder_item&#x22;,&#x22;label&#x22;:&#x22;Move Folder Item&#x22;,&#x22;scopes&#x22;:[&#x22;folder:write&#x22;]},{&#x22;id&#x22;:&#x22;canva_get_asset&#x22;,&#x22;label&#x22;:&#x22;Get Asset&#x22;,&#x22;scopes&#x22;:[&#x22;asset:read&#x22;]},{&#x22;id&#x22;:&#x22;canva_update_asset&#x22;,&#x22;label&#x22;:&#x22;Update Asset&#x22;,&#x22;scopes&#x22;:[&#x22;asset:write&#x22;]},{&#x22;id&#x22;:&#x22;canva_delete_asset&#x22;,&#x22;label&#x22;:&#x22;Delete Asset&#x22;,&#x22;scopes&#x22;:[&#x22;asset:write&#x22;]},{&#x22;id&#x22;:&#x22;canva_create_asset_upload_job&#x22;,&#x22;label&#x22;:&#x22;Create Asset Upload Job&#x22;,&#x22;scopes&#x22;:[&#x22;asset:write&#x22;]},{&#x22;id&#x22;:&#x22;canva_get_asset_upload_job&#x22;,&#x22;label&#x22;:&#x22;Get Asset Upload Job&#x22;,&#x22;scopes&#x22;:[&#x22;asset:read&#x22;]},{&#x22;id&#x22;:&#x22;canva_create_export_job&#x22;,&#x22;label&#x22;:&#x22;Create Export Job&#x22;,&#x22;scopes&#x22;:[&#x22;design:content:read&#x22;]},{&#x22;id&#x22;:&#x22;canva_get_export_job&#x22;,&#x22;label&#x22;:&#x22;Get Export Job&#x22;,&#x22;scopes&#x22;:[&#x22;design:content:read&#x22;]},{&#x22;id&#x22;:&#x22;canva_create_comment_thread&#x22;,&#x22;label&#x22;:&#x22;Create Comment Thread&#x22;,&#x22;scopes&#x22;:[&#x22;comment:write&#x22;]},{&#x22;id&#x22;:&#x22;canva_get_comment_thread&#x22;,&#x22;label&#x22;:&#x22;Get Comment Thread&#x22;,&#x22;scopes&#x22;:[&#x22;comment:read&#x22;]},{&#x22;id&#x22;:&#x22;canva_create_reply&#x22;,&#x22;label&#x22;:&#x22;Create Reply&#x22;,&#x22;scopes&#x22;:[&#x22;comment:write&#x22;]},{&#x22;id&#x22;:&#x22;canva_list_replies&#x22;,&#x22;label&#x22;:&#x22;List Replies&#x22;,&#x22;scopes&#x22;:[&#x22;comment:read&#x22;]},{&#x22;id&#x22;:&#x22;canva_get_user_profile&#x22;,&#x22;label&#x22;:&#x22;Get User Profile&#x22;,&#x22;scopes&#x22;:[&#x22;profile:read&#x22;]},{&#x22;id&#x22;:&#x22;canva_list_brand_templates&#x22;,&#x22;label&#x22;:&#x22;List Brand Templates&#x22;,&#x22;scopes&#x22;:[&#x22;brandtemplate:meta:read&#x22;]},{&#x22;id&#x22;:&#x22;canva_publish_brand_template&#x22;,&#x22;label&#x22;:&#x22;Publish Brand Template&#x22;,&#x22;scopes&#x22;:[&#x22;brandtemplate:content:write&#x22;]},{&#x22;id&#x22;:&#x22;canva_get_brand_template&#x22;,&#x22;label&#x22;:&#x22;Get Brand Template&#x22;,&#x22;scopes&#x22;:[&#x22;brandtemplate:meta:read&#x22;]}]" style={{ borderRadius: '8px', padding: '16px', marginBottom: '24px' }}>
    <div className="guides-scope-selector__title" style={{ fontSize: '16px', fontWeight: '600', marginBottom: '12px' }}>Select Actions to adjust the guide</div>
    <div className="guides-scope-selector__muted" style={{ fontSize: '13px', marginBottom: '12px' }}>Some actions may require additional configuration in the provider to be accessible. Choose the actions you need and the guide will be updated.</div>

    <div style={{ display: 'flex', gap: '8px', marginBottom: '12px', flexWrap: 'wrap' }}>
      <input type="text" placeholder="Search actions..." className="guides-scope-selector__input" data-guide-action-search style={{ padding: '8px 12px', borderRadius: '6px', fontSize: '13px', flex: 1, minWidth: '160px' }} />

      <button type="button" className="guides-scope-selector__quick-btn" data-guide-select-all style={{ padding: '6px 10px', borderRadius: '6px', fontSize: '12px', cursor: 'pointer' }}>Select all</button>
      <button type="button" className="guides-scope-selector__quick-btn" data-guide-clear style={{ padding: '6px 10px', borderRadius: '6px', fontSize: '12px', cursor: 'pointer' }}>Clear</button>
    </div>

    <div className="guides-scope-selector__list" style={{ maxHeight: '240px', overflowY: 'auto', borderRadius: '6px', marginBottom: '12px' }}>
      <div className="guides-scope-selector__list-header" style={{ display: 'flex', alignItems: 'center', gap: '10px', padding: '8px 12px', fontSize: '12px', fontWeight: '600', position: 'sticky', top: 0, zIndex: 1 }}>
        <div style={{ width: '16px', flexShrink: 0 }} />

        <div style={{ flex: 1, textAlign: 'left' }}>Action</div>
        <div style={{ minWidth: '120px', marginLeft: 'auto', textAlign: 'right' }}>Scope(s)</div>
      </div>

      <div className="guides-scope-selector__muted" data-guide-loading style={{ padding: '16px', textAlign: 'center', fontSize: '13px' }}>Loading actions...</div>
      <div className="guides-scope-selector__muted" data-guide-no-results hidden style={{ padding: '16px', textAlign: 'center', fontSize: '13px' }}>No actions match your search.</div>
    </div>

    <div className="guides-scope-selector__url-section" style={{ marginTop: '12px', paddingTop: '12px' }}>
      <div className="guides-scope-selector__muted" style={{ fontSize: '12px', fontWeight: '500', marginBottom: '6px' }}>Dynamic Guide URL</div>

      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', flexWrap: 'wrap' }}>
        <input type="text" readOnly className="guides-scope-selector__input" data-guide-url style={{ flex: 1, minWidth: '200px', padding: '8px 10px', borderRadius: '6px', fontSize: '12px', fontFamily: 'monospace' }} />

        <button type="button" className="guides-scope-selector__copy-btn" data-guide-copy-url style={{ width: '120px', padding: '8px 14px', borderRadius: '6px', fontSize: '13px', fontWeight: '500', cursor: 'pointer', whiteSpace: 'nowrap', marginLeft: 'auto' }}>Copy URL</button>
      </div>

      <div style={{ marginTop: '12px' }}>
        <div className="guides-scope-selector__muted" style={{ fontSize: '12px', fontWeight: '500', marginBottom: '6px' }}>Scopes Selected</div>

        <div style={{ display: 'flex', alignItems: 'stretch', gap: '8px', flexWrap: 'wrap' }}>
          <pre className="guides-scope-selector__input" role="textbox" aria-readonly="true" tabIndex={0} data-guide-scopes-output style={{ flex: 1, minWidth: '200px', minHeight: '88px', maxHeight: '120px', overflowY: 'auto', margin: 0, padding: '8px 10px', borderRadius: '6px', fontSize: '12px', fontFamily: 'monospace', whiteSpace: 'pre-wrap' }} />

          <div className="guides-scope-selector__muted" style={{ display: 'flex', flexDirection: 'column', gap: '8px', fontSize: '12px', fontWeight: '500', flexShrink: 0, alignItems: 'flex-start' }}>
            <div style={{ whiteSpace: 'nowrap' }}>Separator</div>

            <select className="guides-scope-selector__input" data-guide-scope-delimiter style={{ width: '100%', padding: '6px 10px', borderRadius: '6px', fontSize: '12px' }}>
              <option value="space">Space</option>
              <option value="comma">Comma</option>
              <option value="semicolon">Semicolon</option>
              <option value="pipe">Pipe</option>
              <option value="newline">Newline</option>
            </select>

            <button type="button" className="guides-scope-selector__copy-btn" data-guide-copy-scopes style={{ width: '120px', padding: '8px 14px', borderRadius: '6px', fontSize: '13px', fontWeight: '500', cursor: 'pointer', whiteSpace: 'nowrap' }}>Copy scopes</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</Panel>

<section data-guide-section data-guide-scopes="">
  <h2>Create a Canva Integration</h2>

  <p>Register a new integration in the Canva Developer Portal to obtain your Client ID and Client Secret.</p>

  <Steps>
    <Step title="Access the Developer Portal">
      <div data-guide-step data-guide-scopes="" data-guide-display-scopes-list="">
        <p>Navigate to the <a href="https://www.canva.com/developers/" target="_blank" rel="noopener noreferrer">Canva Developer Portal</a> and sign in with your Canva account.</p>

        <ul>
          <li>Navigate to <strong>Your integrations</strong> from the top navigation bar.</li>
        </ul>
      </div>
    </Step>

    <Step title="Create a New Integration">
      <div data-guide-step data-guide-scopes="" data-guide-display-scopes-list="">
        <p>Click <strong>Create an integration</strong> to start the setup wizard.</p>

        <ul>
          <li>Select <strong>Public</strong> for an integration that can be used by anyone who uses Canva, or <strong>Private</strong> for an integration that can only be used by your team (requires a Canva Enterprise plan).</li>
          <li>Check the <strong>I agree to the Canva developer terms</strong> checkbox.</li>
          <li>Click <strong>Create Integration</strong>.</li>
        </ul>
      </div>
    </Step>
  </Steps>
</section>

<section data-guide-section data-guide-scopes="">
  <h2>Configure Your Integration</h2>

  <p>You should be redirected to the integration configuration page.</p>

  <Steps>
    <Step title="Configure Basic Information">
      <div data-guide-step data-guide-scopes="" data-guide-display-scopes-list="">
        <p>Name your integration appropriately (e.g., StackOne Connector).</p>
      </div>
    </Step>

    <Step title="Generate Credentials">
      <div data-guide-step data-guide-scopes="" data-guide-display-scopes-list="">
        <p>Locate and store the credentials securely for use later. The credentials are displayed under the <strong>Credentials</strong> section on the integration configuration page.</p>

        <ul>
          <li><strong>Client ID</strong> — Displayed in the Credentials section. Use the <strong>Copy</strong> button to copy it.</li>
          <li><strong>Client Secret</strong> — Click <strong>Generate secret</strong> to create one, then copy and store it securely.</li>
        </ul>
      </div>
    </Step>

    <Step title="Select Required Scopes">
      <div data-guide-step data-guide-scopes="design:meta:read,design:content:read,design:content:write,folder:read,folder:write,asset:read,asset:write,comment:read,comment:write,brandtemplate:meta:read,brandtemplate:content:read,brandtemplate:content:write,profile:read" data-guide-display-scopes-list="design:meta:read,design:content:read,design:content:write,folder:read,folder:write,asset:read,asset:write,comment:read,comment:write,brandtemplate:meta:read,brandtemplate:content:read,brandtemplate:content:write,profile:read">
        <div className="connector-guide-actions-badge" data-guide-actions-badge data-guide-actions-badge-scopes="design:meta:read,design:content:read,design:content:write,folder:read,folder:write,asset:read,asset:write,comment:read,comment:write,brandtemplate:meta:read,brandtemplate:content:read,brandtemplate:content:write,profile:read" style={{ display: 'block', width: 'fit-content', maxWidth: '100%', padding: '2px 8px', borderRadius: '8px', fontSize: '12px', marginBottom: '8px', marginTop: '-10px', whiteSpace: 'nowrap', overflowX: 'auto', overflowY: 'hidden', msOverflowStyle: 'none', scrollbarWidth: 'none' }}>
          <span>Enables actions: </span><span data-guide-actions-badge-labels>Create Asset Upload Job, Create Comment Thread, Create Design, Create Export Job, Create Folder, Create Reply, Delete Asset, Delete Folder, Get Asset, Get Asset Upload Job, Get Brand Template, Get Comment Thread, Get Design, Get Export Job, Get Folder, Get User Profile, List Brand Templates, List Design Pages, List Designs, List Folder Items, List Replies, Move Folder Item, Publish Brand Template, Update Asset, Update Folder</span>
        </div>

        <p>Click <strong>Scopes</strong> in the left sidebar to open the <strong>Set the scopes</strong> page. Under the <strong>Reading and writing</strong> section, enable <strong>all</strong> the scopes listed below. If any required scope is missing, the connection will fail with a "Requested scopes are not allowed for this client" error.</p>

        <div style={{ marginTop: '8px' }} data-guide-display-scopes>
          <div className="connector-guide-scopes-container connector-guide-scopes-container--scrollable">
            <ul className="not-prose" style={{ listStyleType: "'- '", paddingLeft: '1em', margin: 0 }}>
              <li style={{ overflowWrap: 'anywhere', wordBreak: 'break-word' }} data-guide-display-scope="design:meta:read">
                <button type="button" className="connector-guide-scope-copy" aria-label="Copy design:meta:read" title="Copy scope" data-copy="design:meta:read">
                  <span className="connector-guide-scope-copy__label">design:meta:read</span>
                  <span className="connector-guide-scope-copy__icon" aria-hidden="true">⧉</span>
                </button>
              </li>

              <li style={{ overflowWrap: 'anywhere', wordBreak: 'break-word' }} data-guide-display-scope="design:content:read">
                <button type="button" className="connector-guide-scope-copy" aria-label="Copy design:content:read" title="Copy scope" data-copy="design:content:read">
                  <span className="connector-guide-scope-copy__label">design:content:read</span>
                  <span className="connector-guide-scope-copy__icon" aria-hidden="true">⧉</span>
                </button>
              </li>

              <li style={{ overflowWrap: 'anywhere', wordBreak: 'break-word' }} data-guide-display-scope="design:content:write">
                <button type="button" className="connector-guide-scope-copy" aria-label="Copy design:content:write" title="Copy scope" data-copy="design:content:write">
                  <span className="connector-guide-scope-copy__label">design:content:write</span>
                  <span className="connector-guide-scope-copy__icon" aria-hidden="true">⧉</span>
                </button>
              </li>

              <li style={{ overflowWrap: 'anywhere', wordBreak: 'break-word' }} data-guide-display-scope="folder:read">
                <button type="button" className="connector-guide-scope-copy" aria-label="Copy folder:read" title="Copy scope" data-copy="folder:read">
                  <span className="connector-guide-scope-copy__label">folder:read</span>
                  <span className="connector-guide-scope-copy__icon" aria-hidden="true">⧉</span>
                </button>
              </li>

              <li style={{ overflowWrap: 'anywhere', wordBreak: 'break-word' }} data-guide-display-scope="folder:write">
                <button type="button" className="connector-guide-scope-copy" aria-label="Copy folder:write" title="Copy scope" data-copy="folder:write">
                  <span className="connector-guide-scope-copy__label">folder:write</span>
                  <span className="connector-guide-scope-copy__icon" aria-hidden="true">⧉</span>
                </button>
              </li>

              <li style={{ overflowWrap: 'anywhere', wordBreak: 'break-word' }} data-guide-display-scope="asset:read">
                <button type="button" className="connector-guide-scope-copy" aria-label="Copy asset:read" title="Copy scope" data-copy="asset:read">
                  <span className="connector-guide-scope-copy__label">asset:read</span>
                  <span className="connector-guide-scope-copy__icon" aria-hidden="true">⧉</span>
                </button>
              </li>

              <li style={{ overflowWrap: 'anywhere', wordBreak: 'break-word' }} data-guide-display-scope="asset:write">
                <button type="button" className="connector-guide-scope-copy" aria-label="Copy asset:write" title="Copy scope" data-copy="asset:write">
                  <span className="connector-guide-scope-copy__label">asset:write</span>
                  <span className="connector-guide-scope-copy__icon" aria-hidden="true">⧉</span>
                </button>
              </li>

              <li style={{ overflowWrap: 'anywhere', wordBreak: 'break-word' }} data-guide-display-scope="comment:read">
                <button type="button" className="connector-guide-scope-copy" aria-label="Copy comment:read" title="Copy scope" data-copy="comment:read">
                  <span className="connector-guide-scope-copy__label">comment:read</span>
                  <span className="connector-guide-scope-copy__icon" aria-hidden="true">⧉</span>
                </button>
              </li>

              <li style={{ overflowWrap: 'anywhere', wordBreak: 'break-word' }} data-guide-display-scope="comment:write">
                <button type="button" className="connector-guide-scope-copy" aria-label="Copy comment:write" title="Copy scope" data-copy="comment:write">
                  <span className="connector-guide-scope-copy__label">comment:write</span>
                  <span className="connector-guide-scope-copy__icon" aria-hidden="true">⧉</span>
                </button>
              </li>

              <li style={{ overflowWrap: 'anywhere', wordBreak: 'break-word' }} data-guide-display-scope="brandtemplate:meta:read">
                <button type="button" className="connector-guide-scope-copy" aria-label="Copy brandtemplate:meta:read" title="Copy scope" data-copy="brandtemplate:meta:read">
                  <span className="connector-guide-scope-copy__label">brandtemplate:meta:read</span>
                  <span className="connector-guide-scope-copy__icon" aria-hidden="true">⧉</span>
                </button>
              </li>

              <li style={{ overflowWrap: 'anywhere', wordBreak: 'break-word' }} data-guide-display-scope="brandtemplate:content:read">
                <button type="button" className="connector-guide-scope-copy" aria-label="Copy brandtemplate:content:read" title="Copy scope" data-copy="brandtemplate:content:read">
                  <span className="connector-guide-scope-copy__label">brandtemplate:content:read</span>
                  <span className="connector-guide-scope-copy__icon" aria-hidden="true">⧉</span>
                </button>
              </li>

              <li style={{ overflowWrap: 'anywhere', wordBreak: 'break-word' }} data-guide-display-scope="brandtemplate:content:write">
                <button type="button" className="connector-guide-scope-copy" aria-label="Copy brandtemplate:content:write" title="Copy scope" data-copy="brandtemplate:content:write">
                  <span className="connector-guide-scope-copy__label">brandtemplate:content:write</span>
                  <span className="connector-guide-scope-copy__icon" aria-hidden="true">⧉</span>
                </button>
              </li>

              <li style={{ overflowWrap: 'anywhere', wordBreak: 'break-word' }} data-guide-display-scope="profile:read">
                <button type="button" className="connector-guide-scope-copy" aria-label="Copy profile:read" title="Copy scope" data-copy="profile:read">
                  <span className="connector-guide-scope-copy__label">profile:read</span>
                  <span className="connector-guide-scope-copy__icon" aria-hidden="true">⧉</span>
                </button>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </Step>

    <Step title="Add Redirect URI">
      <div data-guide-step data-guide-scopes="" data-guide-display-scopes-list="">
        <p>In the integration settings, from the left sidebar, navigate to the <strong>Authentication</strong> section.</p>

        <ul>
          <li>Add the following redirect URI: `https://api.stackone.com/connect/oauth2/canva/callback`</li>
        </ul>
      </div>
    </Step>

    <Step title="Saving Changes">
      <div data-guide-step data-guide-scopes="" data-guide-display-scopes-list="">
        <p>Changes are saved automatically.</p>
      </div>
    </Step>
  </Steps>
</section>

<section data-guide-section data-guide-scopes="">
  <h2>Important Notes</h2>

  <p>Key information about Canva OAuth 2.0 authentication.</p>

  <ul>
    <li>Canva OAuth uses PKCE (Proof Key for Code Exchange) with S256 code challenge method for enhanced security</li>
    <li>Refresh tokens are single-use and a new refresh token is issued with each token refresh</li>
    <li>Access tokens expire and are automatically refreshed using the refresh token</li>
    <li>Refer to the <a href="https://www.canva.dev/docs/connect/" target="_blank" rel="noopener noreferrer">Canva Connect API documentation</a> for more details</li>
  </ul>
</section>

## Creating the StackOne Connector Profile

To create the Connector Profile in StackOne for <strong>Canva</strong>:

<Steps>
  <Step title="Navigate to Connector Profiles">
    Login to StackOne and navigate to [Connector Profiles](https://app.stackone.com/connector_profiles)
  </Step>

  <Step title="Create New Connector Profile">
    <ul>
      <li>Click <strong>+ Connector Profile</strong></li>
      <li>Search for and select <strong>Canva</strong></li>
      <li>Select <strong>Type</strong> as <strong>OAuth 2.0</strong></li>

      <li>
        Fill out the fields using details retrieved from your provider:

        <ul style={{ marginLeft: '20px' }}>
          <li><strong>Client ID</strong></li>
          <li><strong>Client Secret</strong></li>
          <li><strong>Application Scopes</strong> (Optional)</li>
        </ul>
      </li>

      <li>(Optional) Select <strong>Actions</strong> to be enabled for this Connector Profile</li>
      <li>Click <strong>Create profile</strong></li>
    </ul>
  </Step>
</Steps>

Congratulations! The new Connector Profile will now show up in your project ready to be used. You can now continue to <a href="/guides/accounts-section#linking-accounts">Link Accounts</a> for <strong>Canva</strong>.