Manage assets

You can use logos and favicons managed in Kinde, or host stylesheets, fonts, and images externally.

Kinde-hosted assets

Link to this section

In your custom code, you can reference assets uploaded in the Kinde admin. The Kinde infrastructure package includes helpers for accessing them:

Favicons

Link to this section

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

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

Usage

Link to this section

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

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

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

Org logos

Link to this section

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

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

External CSS files, fonts, and images

Link to this section

You can also use stylesheets, fonts, and images. Kinde does not host these static assets, so you need to host them yourself.

Your root domain and its subdomains are added to the Content Security Policy (CSP) by default. To use your own assets and comply with Kinde’s CSP, store them on servers that share the same domain as your custom domain.

For example, if you use the custom domain auth.myapp.com, you can host fonts, images, and CSS at assets.myapp.com and access them in your code.