Calculate an autoAuthToken

When a user opens the Canva editor via a partner's website, Canva attempts to automatically (and invisibly) create an account for that user. This ensures that:

  • Users don't have to create a Canva account.
  • Users can access their designs and uploaded media on return visits.

To accomplish this, an integration must calculate a JSON Web Token (JWT) for each user. Canva refers to the calculated token as an autoAuthToken.

This part of the tutorial explains how to calculate an autoAuthToken.

There are many libraries for calculating JWTs. For Node.js, jwt-simple is one of the easier ones to use.

To install jwt-simple, run the following command:

npm install jwt-simple --save
bash

Then include the library at the top of the server.js file:

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

A payload is an object with the following properties:

  • iss - The integration's Partner API key.
  • sub - The ID of the end-user (that is, the ID of the partner's customer).
  • iat - The creation time of the token as a UNIX timestamp (in seconds).
  • exp - The expiry time of the token as a UNIX timestamp (in seconds).

The SDK's initialize method needs access to the autoAuthToken, so create the payload in the home page route:

app.get("/", async (request, response) => {
// Get the current time
const now = Math.floor(new Date().getTime() / 1000);
// Create a payload
const payload = {
iss: process.env.PARTNER_API_KEY,
sub: "12345",
iat: now,
exp: now + 60 * 30,
};
response.render("index", { partnerApiKey: process.env.PARTNER_API_KEY });
});
javascript

To calculate the autoAuthToken, use the jwt.encode function:

const autoAuthToken = jwt.encode(payload, process.env.PARTNER_API_SECRET);
javascript

This function accepts two arguments: the payload and the integration's Partner API secret.

Pass the autoAuthToken into the index.ejs file via the render method:

response.render("index", {
autoAuthToken,
partnerApiKey: process.env.PARTNER_API_KEY,
});
javascript

Then, in the index.ejs file, pass the autoAuthToken into the initialize method:

const api = await Canva.Partnership.initialize({
apiKey: "<%= partnerApiKey %>",
container: document.getElementById("container"),
autoAuthToken: "<%= autoAuthToken %>",
});
javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
/>
<title>Print Partnership Example</title>
<script src="https://sdk.canva.com/partnership.js"></script>
<style type="text/css">
body,
html {
margin: 0;
}
#container {
height: 100vh;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
(async () => {
const api = await Canva.Partnership.initialize({
apiKey: "<%= partnerApiKey %>",
container: document.getElementById("container"),
autoAuthToken: "<%= autoAuthToken %>",
});
api.showCatalog({});
})();
</script>
</body>
</html>
html
require("dotenv").config();
const express = require("express");
const jwt = require("jwt-simple");
const app = express();
app.set("views", "./src/views");
app.set("view engine", "ejs");
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.get("/", async (request, response) => {
// Get the current time
const now = Math.floor(new Date().getTime() / 1000);
// Create a payload
const payload = {
iss: process.env.PARTNER_API_KEY,
sub: "12345",
iat: now,
exp: now + 60 * 30,
};
// Calculate the autoAuthToken
const autoAuthToken = jwt.encode(payload, process.env.PARTNER_API_SECRET);
response.render("index", {
autoAuthToken,
partnerApiKey: process.env.PARTNER_API_KEY,
});
});
app.listen(process.env.PORT || 3000);
javascript