Adobe Express OAuth and Authentication Skill

This skill guides you through OAuth 2.0 implementation for add-ons, focusing on PKCE flow, token lifecycle, and secure credential storage.

When to Use This Skill

• Implementing OAuth for cloud storage access (Dropbox, Google Drive, OneDrive)
• Designing PKCE flow for add-on iframe runtime
• Planning token storage and refresh strategy
• Validating manifest OAuth permission requirements
• Debugging OAuth callback failures or token expiration issues

Quick Start

Understand PKCE Flow for Add-ons

OAuth 2.0 with PKCE (Proof Key for Code Exchange) is the standard for add-ons:

1. User clicks "Connect to [Provider]" button (UI)
2. Add-on generates PKCE challenge and redirects user to provider
3. User authorizes add-on at provider
4. Provider redirects to Adobe's OAuth proxy with authorization code
5. Add-on exchanges code + verifier for access token
6. Token stored in Client Storage for future requests

Add OAuth Permissions to Manifest

{
  "permissions": {
    "oauth": [
      "www.dropbox.com",
      "login.microsoftonline.com",
      "accounts.google.com"
    ]
  }
}

Only list providers your add-on actually uses.

Query Official MCP for APIs

• "What's the current signature for addOnUISdk.app.oauth.authorize()?"
• "What OAuth flows does Adobe Express support?"
• "How do I handle OAuth errors in add-ons?"

Implementation Pattern

1. Generate PKCE Challenge

Use OAuthUtils.js helper (from code samples):

• Generates cryptographically secure challenge and verifier
• Ready for production use

2. Initiate Authorization

Call addOnUISdk.app.oauth.authorize() with:

• authorizationUrl (provider-specific)
• clientId (your app registration)
• codeChallenge (from PKCE)
• scope (request minimal scopes needed)

3. Exchange Code for Token

After user authorizes, exchange:

• Authorization code
• Code verifier
• Client ID

With provider's token endpoint.

4. Store Token Securely

await addOnUISdk.instance.clientStorage.setItem("oauth_token", token);

Client Storage is encrypted and persists across sessions.

5. Refresh Before Expiry

Monitor token expiry. Refresh using refresh token:

• Prevent mid-operation token failures
• Handle refresh token rotation

Token Lifecycle

• Acquire: User authorizes at provider
• Store: Client Storage (encrypted, persistent)
• Use: Include in API requests (Bearer token)
• Refresh: Before expiry using refresh token
• Revoke: Logout or provider deauthorization

Provider-Specific Notes

See references/oauth-implementation.md for:

• Dropbox setup (basic auth, scope requirements)
• OneDrive/Microsoft setup
• Google Drive setup
• Box.com setup

Security Checklist

• [ ] PKCE verifier never sent to provider (only challenge)
• [ ] Refresh token stored securely (Client Storage)
• [ ] Manifest lists only used OAuth providers
• [ ] Logout clears stored tokens
• [ ] Scope requests are minimal (principle of least privilege)
• [ ] Error messages don't leak sensitive information

Skill Handoffs

Pass to other skills when:

• Login button and UI flow → adobe-express-spectrum-ui-ux
• Using auth token to fetch and insert images → adobe-express-document-manipulation
• Subscription tied to OAuth user → adobe-express-monetization
• Manifest validation → adobe-express-core

References

• Official OAuth Docs