TRSTD login

Integrate the trstd login system using the Login UI component, so users can verify your site’s authenticity. Once integrated, the widget starts an OAuth2 flow, returns a cryptographic token, and confirms to the user that your website is genuine — helping users avoid fake sites and fraud.

Prerequisites

Content Security Policy (CSP)

This policy permits both CDN domains for scripts, styles, images, and fonts. 'unsafe-inline' applies only to style-srcrequired because Web Components injects

HTTP header (recommended)

Content-Security-Policy:
  default-src https://*.trustedshops.com https://*.trstd.com;
  img-src     https://*.trustedshops.com https://*.trstd.com data:;
  script-src  https://*.trustedshops.com https://*.trstd.com;
  font-src    https://*.trustedshops.com https://*.trstd.com;
  connect-src https://*.trustedshops.com https://*.trstd.com;
  style-src   https://*.trustedshops.com https://*.trstd.com 'unsafe-inline';
  frame-src   https://*.trustedshops.com https://*.trstd.com;

HTML tag (if HTTP headers are not configurable)

<meta http-equiv="Content-Security-Policy"
  content="default-src https://*.trustedshops.com https://*.trstd.com;
           img-src     https://*.trustedshops.com https://*.trstd.com data:;
           script-src  https://*.trustedshops.com https://*.trstd.com;
           font-src    https://*.trustedshops.com https://*.trstd.com;
           connect-src https://*.trustedshops.com https://*.trstd.com;
           style-src   https://*.trustedshops.com https://*.trstd.com 'unsafe-inline';
           frame-src   https://*.trustedshops.com https://*.trstd.com;">

Frontend integration

Place this HTML snippet on any page where users verify your website's authenticity and personalise their experience:

<!-- Place it in the header -->

<!-- Optional: improves Cumulative Layout Shift (CLS) metrics by reserving
     space for the login toggle before the script loads. -->
<style>
  trstd-login:not(:defined) {
    display: inline-flex;
    min-height: 34px;
    min-width: calc(34px * 38 / 24);
    visibility: hidden;
  }
</style>

<script type="module" src="https://cdn.trstd-login.trstd.com/trstd-login/script.js" data-intid="<Your Integration ID>" defer></script>

<!-- Place it where you want to show trstd login element -->
<trstd-login></trstd-login>

What it does:

• Displays a trstd login button
• Starts the OAuth2 login flow when a community of trust member logs in
• After successful login, redirects the user to your website with a cryptographic token
• Confirms your website's authenticity if setup is correct and the website is authentic

⚠️

If the integration is misconfigured, the trstd login button will not appear, and the JavaScript console will show these messages:

• If your website URL is not configured for your integration ID, it shows the error: Business profile domain is not allowed!
• Using the wrong integration ID shows the error: Business profile is not found!
• If no ID is provided: Either tlciid or intid must be provided

Theme attribute (optional): customizing appearance
The component supports a theme attribute to control its appearance based on predefined styling variants (themes). These themes define how the component looks in different contexts.

How it works

• Each customer can have multiple appearance variants (themes) configured.
• Each theme has a unique theme ID (e.g., header, footer, darkmode).
• Select the theme to render by setting the theme attribute on the component.
• Themes are not self-configurable; the trstd login team creates and manages them upon request.

Cookies

Known issues

Two Keycloak instances
If a customer website uses Keycloak for login, it may conflict with trstd login. Both flows expect the same parameters, causing race conditions and breaking one login.

Keycloak provides response modes:

• query: parameters return in the URL query string (e.g., ?code=abcd)
• fragment: parameters return in the URL fragment (e.g., #code=efgh)

Trstd login uses hybrid authentication, requiring the response mode to be fragment.

If your website uses fragment, switching to query resolves this issue.