Get Started
Introduction
.png)
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 Auth | The 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 Auth | Enables 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
Category | In Scope | Out of Scope |
---|---|---|
Authentication Flows |
|
|
Configuration Options |
| |
Security & Token Handling |
| |
Other |
|
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
Component | Note |
---|---|
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:
Form | Variant |
---|---|
Guest User (default) |
or |
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 Component | slot_auth_top |
On top of Login Form | slot_auth_login_custom_form |
On bottom of Login form | slot_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 Name | Description |
---|---|
birthDate | Customer’s date of birth |
email | Customer’s email address |
gender | Customer’s gender |
checkboxes | Checkbox for e.g. newsletter opt-in |
phone number | Phone number to be used by Customer Service |
logisticalPhoneNumber | Phone 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.