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.

Step 1: Install jwt-simple

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:
1
npm install jwt-simple --save
Copied!
Then include the library at the top of the server.js file:
1
const jwt = require("jwt-simple");
Copied!

Step 2: Create a payload

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:
1
app.get("/", async (request, response) => {
2
// Get the current time
3
const now = Math.floor(new Date().getTime() / 1000);
4
5
// Create a payload
6
const payload = {
7
iss: process.env.PARTNER_API_KEY,
8
sub: "12345",
9
iat: now,
10
exp: now + 60 * 30,
11
};
12
13
response.render("index", { partnerApiKey: process.env.PARTNER_API_KEY });
14
});
Copied!
The expiry time in the payload must be less than 12 hours after the creation time.

Step 3: Calculate the autoAuthToken

To calculate the autoAuthToken, use the jwt.encode function:
1
const autoAuthToken = jwt.encode(payload, process.env.PARTNER_API_SECRET);
Copied!
This function accepts two arguments: the payload and the integration's Partner API secret.

Step 4: Initialize the SDK with the autoAuthToken

Pass the autoAuthToken into the index.ejs file via the render method:
1
response.render("index", {
2
autoAuthToken,
3
partnerApiKey: process.env.PARTNER_API_KEY,
4
});
Copied!
Then, in the index.ejs file, pass the autoAuthToken into the initialize method:
1
const api = await Canva.Partnership.initialize({
2
apiKey: "<%= partnerApiKey %>",
3
container: document.getElementById("container"),
4
autoAuthToken: "<%= autoAuthToken %>",
5
});
Copied!

Example

src/views/index.ejs

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8" />
5
<meta
6
name="viewport"
7
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
8
/>
9
<title>Print Partnership Example</title>
10
<script src="https://sdk.canva.com/partnership.js"></script>
11
<style type="text/css">
12
body,
13
html {
14
margin: 0;
15
}
16
17
#container {
18
height: 100vh;
19
}
20
</style>
21
</head>
22
<body>
23
<div id="container"></div>
24
<script type="text/javascript">
25
(async () => {
26
const api = await Canva.Partnership.initialize({
27
apiKey: "<%= partnerApiKey %>",
28
container: document.getElementById("container"),
29
autoAuthToken: "<%= autoAuthToken %>",
30
});
31
32
api.showCatalog({});
33
})();
34
</script>
35
</body>
36
</html>
Copied!

src/server.js

1
require("dotenv").config();
2
const express = require("express");
3
const jwt = require("jwt-simple");
4
5
const app = express();
6
7
app.set("views", "./src/views");
8
app.set("view engine", "ejs");
9
10
app.use(express.json());
11
app.use(express.urlencoded({ extended: true }));
12
13
app.get("/", async (request, response) => {
14
// Get the current time
15
const now = Math.floor(new Date().getTime() / 1000);
16
17
// Create a payload
18
const payload = {
19
iss: process.env.PARTNER_API_KEY,
20
sub: "12345",
21
iat: now,
22
exp: now + 60 * 30,
23
};
24
25
// Calculate the autoAuthToken
26
const autoAuthToken = jwt.encode(payload, process.env.PARTNER_API_SECRET);
27
28
response.render("index", {
29
autoAuthToken,
30
partnerApiKey: process.env.PARTNER_API_KEY,
31
});
32
});
33
34
app.listen(process.env.PORT || 3000);
Copied!
Last modified 3mo ago