Manage page design assets

It is likely that your logos and favicons are hosted on Kinde, but you may also manage externally hosted assets. Here’s how assets are referenced in your custom code.

Favicons

Link to this section

The Kinde infrastructure package ships with helper methods for accessing these:

import {
  getFallbackFaviconUrl,
  getSVGFaviconUrl,
} from "@kinde/infrastructure";

Usage

Link to this section

<link rel="icon" href={getFallbackFaviconUrl()} sizes="48x48">
<link rel="icon" href={getSVGFaviconUrl()} type="image/svg+xml" />

Logos

Link to this section

The Kinde infrastructure package ships with helper methods for accessing these:

import {
  getLogoUrl,
  getDarkModeLogoUrl,
} from "@kinde/infrastructure";

Usage

Link to this section

// Always use light logo
<img
  src={getLogoUrl()}
  alt={event.context.widget.content.logoAlt}
/>

// Always use dark logo
<img
  src={getDarkModeLogoUrl()}
  alt={event.context.widget.content.logoAlt}
/>

// User preference
<picture>
  <source
    media="(prefers-color-scheme: dark)"
    srcset={getDarkModeLogoUrl()}
  >
  <img
    src={getLogoUrl()}
    alt={event.context.widget.content.logoAlt}
  />
</picture>

Org logos

Link to this section

Both functions accept the org code as an argument to return the relevant organization logo url:

// Org logos
// Pass org code in
const {orgCode} = event.request.authUrlParams
<img
  src={getLogoUrl(orgCode)}
  alt={event.context.widget.content.logoAlt}
/>

Storing externally-hosted assets

Link to this section

We know you will want to use assets like fonts and images stored outside of Kinde. Our strict CSP which we have for security, can make calling external sources somewhat trickier, but with good reason.

Your root domain as well as any subdomains of that domain are added to our CSP by default so to use your own assets and comply with Kinde’s CSP, the assets should be stored on servers that share the same domain as your custom domain.

For example, if you are using the custom domain auth.myapp.com you could host fonts/images/css at https://assets.myapp.com and they would be accessible in your code.