Frictionless authentication

Frictionless authentication is when you use the auth.getCanvaUserToken method to retain a user's data without them having to sign-in via a login screen. With this, you can do away with traditional, manual authentication entirely or delay it until a user tests your app to see the value it provides.

Using the auth.getCanvaUserToken method you can:

• Retrieve a token that uniquely identifies the Canva user and their associated brand
• Store the user ID on your end
• Learn about how your users use your app.

We've seen that if a user experiences most of an app's features, they're less likely to abandon the flow than if they're required to authenticate up front.

The workflow looks like the following:

1. The user interacts with your app. Canva assigns a unique user ID to the user.
2. You track how the user uses your app. This interaction, as well as the associated user and app ID, is stored in the app backend.
3. Your app backend stores the user ID in a database.

As well as the above, you, as the app developer exploring metrics, can use the stored data to know more about your users, such as:

• Track usage: You can monitor how much a user has used your services in Canva, regardless of whether they have interacted with the design. This is especially useful for AI apps where there's a real cost to serve for running the model. Here, you do all the tracking using the data in your app's backend.
• Track time in app: You can save the date the user initially created their account (When the user token was created), then compare that date to today's date to see how long they've been using your app.

Before you begin, review the Authentication design guidelines.

To implement frictionless authentication, an app needs the ID of the user and their team, which you can get using a JSON Web Token (JWT).

To get a JWT for the current user:

1. Import the auth namespace from the @canva/user package:

   import { auth } from "@canva/user";

   TS

   Copy

2. Call the getCanvaUserToken method:

   const token = await auth.getCanvaUserToken();

   TS

   Copy

   This method returns a JWT as a string.

By itself, the JWT is a meaningless string of characters. To get the ID of the user and their team from the JWT, an app must send the JWT to the app's backend then verify that JWT.

To send the JWT to the app's backend, use the Fetch API, or a library such as axios⁠(opens in a new tab or window):

const response = await fetch("http://localhost:3001/my/api/endpoint", {
  headers: {
    Authorization: `Bearer ${token}`,
  },
});

When sending the request, include an Authorization header that contains the word Bearer and the JWT, separated by a space.

When the backend receives the request, extract the JWT from the Authorization header. The following code demonstrates how to extract a JWT from an Express.js Request object:

import express from "express";

const app = express();

app.post("/my/api/endpoint", async (request, response) => {
  const token = getTokenFromHeader(request);

  if (!token) {
    return response.sendStatus(401);
  }

  return response.sendStatus(200);
});

app.listen(process.env.PORT || 3000);

function getTokenFromHeader(request: express.Request) {
  const header = request.headers["authorization"];

  if (!header) {
    return;
  }

  const parts = header.split(" ");

  if (parts.length !== 2 || parts[0].toLowerCase() !== "bearer") {
    return;
  }

  const [, token] = parts;

  return token;
}

To verify the JWT, follow the steps in JSON Web Tokens. If the JWT is valid, you will end up with an object that contains the ID of the user and their team.

When the user opens the app for the first time, use the ID of the user and their team to create a user record in the backend's database. This is essentially a registration process, except that it's invisible to the user — an account is created for them in the app's backend when all they've done is access the app.

As the user interacts with the app, or when they return to the app at a later time, send additional HTTP requests to create, read, or update data associated with their account. With each request, the app will need to send and verify a JWT in order to get the ID of the user and their team.

• auth.getCanvaUserToken
• auth.requestAuthentication