Branding

For a more seamless user experience you can heavily customize the pre-built UI branding by providing your own theme. Visit the branding tab in the Authsignal Portal to get started. If you require a more bespoke branding experience then try out our UI customization tool. This tool allows you to change a wide range of design tokens (colors, borders, alignment, text) to tweak the look and feel of the entire pre-built UI. You can also manage your theme as code using Authsignal’s Terraform provider.

The advanced customization tool provides a preview of various pre-built UI screens.

Custom fonts

Set a custom font in the customization tool, under the Text tab. It applies to all text in the pre-built UI. A font is one or more font files, each with a weight; the live preview shows exactly how they render.

Hosting your font files

Each file is a woff or woff2 served from your own hosting. Your server must allow cross-origin requests from the domains that serve the pre-built UI via an Access-Control-Allow-Origin header. Without it, browsers block the font and the pre-built UI falls back to its default font.

The preview loads font files from the portal’s origin, so a file that only allows your production domains can fail in the preview yet work in the pre-built UI.

How font weights resolve

The pre-built UI uses three weights:

Weight	Used for
400	Body text
500	Buttons and labels
600	Headings

You don’t need a file for every weight. A weight with no file uses the nearest file you have. With a single Regular (400) file, buttons and labels look the same as body text. If no file is 600 or heavier, the browser approximates headings by thickening your heaviest file. Add a Semibold (600) or Bold (700) file to use your font’s own letterforms instead. If you supply one file, make it the Regular (400): it carries most of the text.

Variable fonts

A variable font is one file containing every weight. Choose All weights (variable font) as its weight; left at a single weight, only that weight is used and heavier weights are approximated.

A different font for headings

Select Use a different font for headings. Headings use weight 600, so a single Semibold (600) file is enough.

Custom templates

To override the pre-built UI’s layout you can provide a custom template. Custom templates, at a bare minimum, must contain the following structure.

<html>
  <head>
    <authsignal-head></authsignal-head>
  </head>
  <body>
    <authsignal-widget></authsignal-widget>
  </body>
</html>

The authsignal-head and authsignal-widget tags are required for the pre-built UI to function correctly.

To update your tenant’s custom template, you can send the following payload to the Update Theme endpoint.

{
  "template": "<html><head><authsignal-head></authsignal-head></head><body><authsignal-widget></authsignal-widget></body></html>"
}

The template string must have escaped special characters.

Adding custom HTML/CSS

Using a custom template allows you to add your own HTML/CSS. For example, if you wanted to show an image next to the pre-built UI you could use the following template:

<html>
  <head>
    <authsignal-head></authsignal-head>
    <style>
      .wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }
      .image {
        display: block;
        width: 100%;
        height: 100%;
        z-index: 10;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url(https:\/\/images.unsplash.com\/photo-1682685795579-37e731bfefab?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <authsignal-widget></authsignal-widget>
      <div class="image"></div>
    </div>
  </body>
</html>

Which would result in:

Adding custom JavaScript

To add custom JavaScript to your custom template you can use the following structure:

<html>
  <head>
    <authsignal-head></authsignal-head>
    <script src="https://cdn.some-javascript.min.js"></script>
  </head>
  <body>
    <authsignal-widget></authsignal-widget>
  </body>
</html>

Getting started

Integrations

Authentication methods

Implementation options

Actions & rules

Users

Advanced usage

Custom fonts

Hosting your font files

How font weights resolve

Variable fonts

A different font for headings

Custom templates

Adding custom HTML/CSS

Adding custom JavaScript

​Custom fonts

​Hosting your font files

​How font weights resolve

​Variable fonts

​A different font for headings

​Custom templates

​Adding custom HTML/CSS

​Adding custom JavaScript

Custom fonts

Hosting your font files

How font weights resolve

Variable fonts

A different font for headings

Custom templates

Adding custom HTML/CSS

Adding custom JavaScript