Authentication

When an end user arrives at a Print Partnership integration, the user experience should be seamless.

To accomplish this, Canva doesn't require that end users:

• Sign up for (or log into) a Canva account.
• Sign up for (or log into) a separate account via the partner's website.

Instead, the end user's existing account on the partner's website is used to automatically (and invisibly) create a "ghost" account on Canva.

These accounts let users:

• Create designs via the Canva editor.
• View and edit previously created designs.
• Upload private media to Canva.

But without the friction of a manual authentication flow.

How authentication works

When a user arrives at an integration, the partner calculates a JSON Web Token (JWT) for the user and passes it into the Partnership SDK's initialize method:

(async () => {
  const api = await Canva.Partnership.initialize({
    apiKey: "<partner_api_key>",
    container: document.getElementById("container"),
    autoAuthToken: "<auto_auth_token>",
  });
})();

The SDK refers to this token as an autoAuthToken.

When calculating an autoAuthToken, the partner provides an ID for the current user. This ID is a value that maps to a user in the partner's backend system, such as a primary key in a database row.

If the user's ID is not already associated with an account, Canva creates an account for the user and logs them into it. If the user's ID is already associated with an account, Canva logs them into the account.

Calculating an autoAuthToken

You need to two ingredients to calculate an autoAuthToken: a payload and a secret.

Payload

The payload is an object with the following properties:

iss

The integration's Partner API key.

sub

A unique ID for the current user. This ID is a value that maps to a user in the partner's backend system, such as an email address.

iat

The UNIX timestamp of when the token was issued (in seconds).

exp

An expiration time for the token as a UNIX timestamp (in seconds). This time must be less than 12 hours after the token's "iat" time.

This is an example of a payload:

{
  "iss": "<issuer>",
  "sub": "<subject>",
  "iat": "<issued_at>",
  "exp": "<expires_at>"
}

Secret

The secret is the integration's Partner API secret.

Example

The following snippet demonstrates how to calculate an autoAuthToken:

const jwt = require("jwt-simple");

function generateAutoAuthToken(opts) {
  const expiryInMinutes = opts.expiryInMinutes || 30;
  const now = Math.floor(new Date().getTime() / 1000);

  // Create a payload
  const payload = {
    iss: opts.partnerApiKey,
    sub: opts.userId,
    iat: opts.currentTime || now,
    exp: opts.expiryTime || now + 60 * expiryInMinutes,
  };

  // Calculate a JWT
  return jwt.encode(payload, opts.partnerApiSecret);
}

const autoAuthToken = generateAutoAuthToken({
  partnerApiKey: "<partner_api_key>",
  partnerApiSecret: "<partner_api_secret>",
  userId: "<user_id>",
});

console.log(autoAuthToken);