Skip to main content

Get Started with Embedded Auth

In Embed the Marketplace you used agent skills to add Prismatic to a Next.js app, including a backend API to generate JWTs for a Next.js/React frontend. In this lesson, you'll learn how JWT-based authentication works for Prismatic's embedded marketplace and embedded workflow builder, and the steps to set it up with your own backend and frontend code.

Use agent skills to set up embedding

The Prismatic agent skills can walk you through signing key setup, JWT backend generation, and frontend authentication interactively. The prismatic-embedded skill supports JWT generation in a variety of backends. Ask your coding assistant to use the prismatic-embedded skill to get started.

How embedded authentication works​

One advantage of embedding Prismatic is that your users don't need to remember an additional set of credentials. They log in to your application, and your backend gives them a token that lets them interact with Prismatic.

That token is a JSON Web Token (JWT) that your backend signs with a private key from Prismatic. The JWT contains information about the authenticated user, like their name, external ID, and the customer they're associated with.

Set up authentication in your app​

The video above walks through each of these steps. Embedded Authentication has the details, including signing code for JavaScript, Python, and .NET, and frontend code for React, Angular, Vue, and Svelte.

  1. Create a signing key on the Embedded tab of your organization's settings in Prismatic, or import your own public key.
  2. Sign a JWT on your backend for the signed-in user, with their user ID, your organization ID, and their customer's external ID. Never sign tokens in your frontend: anyone with the signing key can impersonate any user.
  3. Authenticate in your frontend by fetching the JWT from your backend and passing it to prismatic.authenticate().
  4. Refresh the token before it expires by fetching a new one and calling prismatic.authenticate() again.