IndexMotivationImplementing itApi

Introduction allows any website to add support for safe, in-page 3rd-party plugins in 15 minutes.

When you render it, a plugin controls a UI within your app and can interact with your host app via normal React props. You can even pass it whitelisted host components that it can render. This is all done securely so that plugins can only access the data you pass them and plugins can only interact with your app through callback props that you provide.

As a b2b-targeted host, you can allow your enterprise customers to enhance your app with plugins they can deploy across their organization.

As a consumer-targeted host, will host an app store to allow users to install (and even purchase) plugins for use within your app.

Authenticating your users


In order for to determine which plugins are available or enabled for a given session, it must know the current user id.

If your app supports the notion of users belonging to an organization (e.g. many b2b apps), you can also tell which organizations a user belongs to and whether they are a OrgRoles.MEMBER or OrgRoles.ADMIN for that organization. Admins can enable approved plugins for everyone in their organization. Members will have access to organization-wide plugins.

If you choose to allow users to purchase plugins, you can allow to collect their payment (and remit a portion of it to you!) through your existing Stripe relationship with the user. This reduces user friction by allowing them to use their existing payment methods and will increase conversion.

Implementing it

Your host secret should never be shared so this must be run server-side

import { makeJWT, OrgRoles } from '@pluginsdotdev/server';
const secret = process.env.PLUGINS_DOT_DEV_SECRET;
const uid = "any-user-identifier";
const orgs = { "org-identifier": OrgRoles.MEMBER };
const stripeCustomer = "my-stripe-customer-id";
const jwt = makeJWT(secret, { uid, stripeCustomer, orgs });

This example demonstrates retrieving your secret from the environment; you can use any secret storage you like.

Make sure to replace any-user-identifier and my-stripe-customer-id with a string representation of the current user id and Stripe customer id. When you register as a host, you will be able to retrieve a secret.

As a plugin host, you will generate a standard JWT on your server and pass it into your PluginPoint. will use the authenticated data in this JWT to determine which plugins to enable in a given session and to authorize further user interactions with the app store. will use the following properties (custom claims in the JWT):

uidtrueThe id of the current user
stripeCustomerfalseIf provided and if you have previously connected your stripe account in the console, this stripe customer will be used for all plugin purchases.
orgsfalseIf provided, should be a map from an organization identifier to the user's role in that organization (OrgRoles.ADMIN or OrgRoles.MEMBER). An admin may enable plugins for everyone in their organization and a member will have access to the plugins enabled in their organization.