docs
  1. Checkout Guide
  2. Authentication & Accounts
  3. Components
  4. Get Started

Get Started

Introduction

SCAYLE Authentication Service

The Authentication Webcomponent offers a fast and reliable solution to integrate SCAYLE’s Authentication Service and Single Sign-On (SSO) capabilities with minimal development effort as an alternative to Headless Authentication via APIs.

Retaining active user sessions is not supported. If you're migrating from the deprecated session-based Authentication or previously used SCAYLE Authentication APIs, users will be required to log in again when accessing the Checkout for the first time after the migration.

Instead of building custom frontends and managing token-based flows manually, leverage out-of-the-box UI components to cover key customer authentication use cases.

  • Minimum Development Effort - Simply configure in the SCAYLE Panel with minimal effort on shop side.
  • Prebuilt Components - Ensures consistency and compliance across authentication flows.
  • Flexible Configuration - Supports Single-Sign-On with preconfigured Identity Provider, Express Payment Methods, and Dynamic Input Fields for user registration and guest login flows.
  • Future proof - Stays aligned with ongoing SCAYLE Authentication Service improvements.

How it Works

Concept

Token-Based Authentication

Token-based authentication involves two primary stages: registration and login. Upon login or registration, the shops receive an access token and a refresh token. All API requests must include the access token in the Authorization header when communicating with the Checkout Webcomponent. When the access token expires, it can be refreshed using the refresh token. If the refresh token has expired or is invalid, the user must log in again to regain access.

SCAYLE's Authentication SDK is a JavaScript-based interface that simplifies interaction between the Authentication Component and the Authentication Service. Using the SDK is not required but could be utilized to reduce the implementation effort while maintaining self built UI components. In the current implementation, only Authentication APIs or SCAYLE's Authentication Webcomponent can be utilized.

This guide is dedicated to maximizing the use of SCAYLE’s prebuilt components. For details on utilizing SCAYLE's Authentication SDK with Ready-To-Use Webcomponents, offering an alternative to headless authentication. please reach out to your SCAYLE Account Manager.

The Authentication Bundle includes Ready-to-Use Web Components that streamline the creation of login, registration, and password recovery interfaces. These Components are optional and can be replaced or customized to suit your project. This allows for a fast setup or complete customization depending on your needs.


Use Cases

The SCAYLE Authentication Component supports two main integration modes — Checkout-Side and Shop-Side Authentication - each offering flexible options for managing user login flows.

Checkout-Side AuthThe SCAYLE Checkout automatically renders the <scayle-auth> component if no access token is retrieved. This provides a plug-and-play login and register flow during Checkout, with no additional setup required.
Shop-Side AuthEnables full control of the login experience within the Shop before the user reaches Checkout. By initializing the component on page load, Shops can manage sessions, render forms, and handle auth events - all on the frontend, without backend dependencies.

Scope & Limitations

CategoryIn ScopeOut of Scope
Authentication Flows
  • Login
  • Guest login
  • Registration
  • Password reset (with reset URL)
  • Token refresh (automatic renewal)
  • Redirect to Identity Provider (including custom parameters)
  • Logout (handled in Account area or separate component)
  • E-mail validation
Configuration Options
  • Webcomponent configuration via SCAYLE Panel
  • Dynamic fields (e.g., birthdate, newsletter, title)
  • Configurable T&Cs
  • Guest-user flow setup
  • Express Payment Methods configuration -
  • Single-Sign-On (SSO) setup for preconfigured Identity Provider
Security & Token Handling
  • Safe access token storage on SCAYLE side (via /auth/login or /auth/register)
  • Automatic refresh on invalid access token
  • Backward compatibility with previous integrated Authentication methods at SCAYLE
Other
  • Error Events

Capabilities

The SCAYLE Authentication Component supports multiple authentication forms, customizable via the variant attribute. Named slots allow easy insertion of custom HTML - like banners or legal text - into key areas of the form for a tailored user experience.

Supported Components:

Utilize the following SCAYLE Component

ComponentNote
Authentication Component<scayle-auth>
Password Reset Component<scayle-auth-new-password>
Express Component<scayle-express>

Supported Forms

Control the default form shown by setting the variant attribute:

FormVariant
Guest User (default)

<scayle-auth></scayle-auth>

or

<scayle-auth><variant="guest">

Login<scayle-auth><variant="login">
Register<scayle-auth><variant="register">
Password Forgotten<scayle-auth><variant="forgot_password">

Customizable Slots

Customize various parts of the UI by using named slots, such as:

On top of Authentication Componentslot_auth_top
On top of Login Formslot_auth_login_custom_form
On bottom of Login formslot_auth_login_form_bottom

These Dynamic Slots allow injecting custom HTML (e.g., banners, legal notices, images) above or within specific sections of the form.


Configurable Input Fields

The webcomponent supports a set of dynamic, configurable fields for both registration and guest user flows. These fields can be activated or customized via the SCAYLE Panel based on tenant needs.

Field NameDescription
birthDateCustomer’s date of birth
emailCustomer’s email address
genderCustomer’s gender
checkboxesCheckbox for e.g. newsletter opt-in
phone numberPhone number to be used by Customer Service
logisticalPhoneNumberPhone number provided to Carrier for post order services

Excluded fields (not supported in dynamic configuration):

  • Logistics phone number
  • Tax ID
  • Carrier customer number

Express Checkout

When using Express Checkout, the <scayle-auth> component can be fully customized by injecting content into predefined slots. This enables you to tailor the login and registration experience to match your storefront’s design - while maintaining full compatibility with SCAYLE’s Express Checkout flow.

You can find more details in the express checkout section.


Single-Sign-On

The Authentication Component supports integration with Identity Providers across login, guest checkout, and registration forms.

Once configured, the Authentication Component automatically retrieves the relevant settings and displays the available Button to redirect users to the Identity Provider - no additional integration steps are required.