Use your own custom domain
Build on Kinde
Pages are rendered on the server which means it is possible to make API calls before the page is delivered to the browser. The most common use case for this is calling the Kinde Management API to get additional information for the page.
Just because you can do something doesn’t mean you should. Every API call adds latency to page render times slowing down the experience for your end users.
Where possible, we have provided the data you require either via functions in the npm package, or via the event object. The main reason for using the API is for B2B businesses who require more data for the current org to display. Let us know if you find other use cases or you think other data would be useful to include.
Create an M2M application within Kinde and grant it access to the Kinde Management API with the desired scopes.
Setup environment variables in Kinde to provide the client ID and secret.
By default the createKindeAPI method initially looks up the following environment variables setup in Kinde settings to determine the application to use.
KINDE_WF_M2M_CLIENT_IDKINDE_WF_M2M_CLIENT_SECRET - Ensure this is setup with sensitive flag enabled to prevent accidental sharingcreateKindeAPI can also accept an additional parameter which can contain clientID/clientSecret or clientIDKey/clientSecretKey which can define the environment variables to look up.
The example below calls the environment API and adds the logo to the page.
Required bindings
export const pageSettings = { bindings: { "kinde.env": {}, "kinde.fetch": {}, url: {} }};Example usage calling Organization API:
export default async Page(event: onPageRequestEvent) { const orgCode = event.request.authUrlParams.orgCode;
const kindeAPI = await createKindeAPI(event);
const { data: res } = await kindeAPI.get({ endpoint: `organization?code=${orgCode}`, }); const {org} = res;
return `<html lang={event.request.locale.lang} > <head> <title>Hello world</title> </head> <body> <p>{org.name}</p> </body> </html> `;}GET /environment - includes brand settings for the environment including logos / background images. Required M2M scope: read:environmentsGET /organizations?org_code=${request.authUrlParams.orgCode} brand settings for the requested org including logo. Required M2M scope: read:organizationsGET /business - business details like the business name. Required M2M scope: read:businessesGET /applications/${request.authUrlParams.clientId}. Required M2M scope: read:applications