Authentication

You can configure apps to remember user data, whether by using the auth.getCanvaUserToken API or connecting with a third-party platform. This functionality is typically used to make certain features and content available only to users who authenticate, or to only a subset of users. This page contains some guidelines for creating a delightful authentication flow.

Authentication in your app's workflow

Canva is a visual design platform with users who want to experience an app and quickly and easily see its value.

Manual authentication (creating a login pop-up) can be a way to place users' content behind a gate, so it could be considered helpful to implement it as part of your app's workflow. However, requiring a user to log in before they can see as much function as possible can be enough to deter them from continuing to use your app.

There are many variations of authentication workflows, but some examples can produce a better experience for your users and, in turn, can lead to more usage of your app. For example, if your app requires the user to log in just so that you can see data about who is using your app, consider using user tokens instead of a login requirement.

Authentication workflows

Where appropriate and relevant, we recommend you use the following list as an order of preference. The higher on this list your app falls, the better the user experience, which in turn translates to more users of your app.

1. All functions are available to the user. No authentication.
2. All functions are available to the user, regardless of whether the user authenticates.
3. Some functions of the app are available to the user, but they can still complete a basic workflow. The user must log in to use the other functions.
4. Some functions of the app are available to the user to test the app, but they cannot complete a workflow. The user must log in to complete the workflow.
5. No functions of the app are available to the user unless they authenticate.

Authentication and the Apps Marketplace

An app can quickly and easily show its usefulness to a user by being promoted within the Apps Marketplace, such as inclusion in the "Featured apps" section.

However, an app is not eligible to be "Featured" unless a user can test functionality before manual authentication occurs in the workflow. This means that only apps that have no authentication or those that include a timed or per-use trial can be featured apps.

General guidelines

Authentication flow guidelines

• Where possible, make the app usable and useful before the user has to authenticate. Give them a chance to benefit from the app as quickly and as seamlessly as possible.
• Authentication flows must occur in the authentication pop-up window, not within the app's iframe — that is, sign-up and login forms should only appear in the pop-up window.
• Start an authentication flow by calling the requestAuthentication method. This will display a screen with a Connect button. Do not show redundant authentication screens before this screen or attempt to bypass the standard authentication flow.
• Prevent users from arriving at dead-ends or becoming stuck in endless loops.
• Support non-desktop devices, such as mobile phones and tablets.
• Do not auto-subscribe users to marketing content — all marketing material must be opt-in.
• If the same user installs the same app under different teams, require them to authenticate separately for each team — do not automatically authenticate the user.
• Ensure that users are able to disconnect your app, and that the disconnection is handled appropriately. This is described in the next section.

Handle disconnections

Users can choose to remove your app from their account, and the app must respect the user's intention to no longer be associated with the app. Users are also free to change their minds and reconnect your app later.

• Do log users out of your app when they remove it.
• Do require users to reauthenticate if they reconnect your app.

For a consistent user experience, handle these events using the following flow.

When the user clicks Remove from your apps:

1. Log the user out of your app.
2. Delete the connection between your app and the third-party platform.

If the user later reconnects your app:

1. Display the initial page that prompts them to open the app.
2. Immediately redirect the user to the connection page.
3. When the user clicks on Connect, the app must require them to re-enter their credentials and log in with the app.
4. After successfully logging in, users must be able to use the app right away.

More information

If you're using OAuth, see Revoking access.

If you're using manual authentication, see Handle disconnections.

Pop-up guidelines

• For the pop-up page, use the title HTML element to set a meaningful title on the authentication's pop-up window.
• Provide clear and actionable error messages.
• Ensure that the redirect URL appears familiar and friendly — that is, not like a phishing threat.
• Provide options for both signing up for and logging in to the platform.

Suggested written content for authentication flows

There can be many scenarios to consider when building an authentication flow. You are free to make your own written content to communicate authentication flows. Alternatively, to speed up your development, we've provided some suggested written content that you can use.