Skip to main content

Overview

LoginRadius Hosted Pages let you create branded login, profile, and workflow experiences, edit everything in the Admin Console using templates, styles, and localization, and publish a single default template or map multiple templates to custom domains.

Key Features

  • A pre‑configured login box powers Auth, Profile, and Workflow pages
  • Visual styles with human‑readable properties and CSS variables
  • Text customization per component, with multi‑language support
  • Domain mapping to run different templates on different URLs
  • Pre‑built templates and AI‑assisted creation options
  • Live preview while editing; one default template active at a time

Use Cases

  • Branded authentication pages without hosting or complex setup
  • Global experiences with language customization and browser‑based detection
  • Multi‑brand deployments are mapped to separate custom domains
  • Fast starts using pre‑built templates or AI‑generated layouts

Configuration

Follow these steps to get a template live:

Step 1: Sign Up

  1. Go to the Admin Console at https://console.loginradius.com.
  2. Sign up or log in to access Hosted Pages.

Step 2: Create a Template

  1. Navigate to Hosted Pages in the Admin Console.
  2. Click Add New Template.
  3. Choose a creation method: Start from Scratch, Pre‑Built Template, or Create with AI.
  4. Name the template and open it in the editor.

Creation methods:

  • Start from Scratch — Create Auth, Profile, and Workflow pages by adding your own HTML, BeforeJS, CustomCSS, and CustomJS..
  • Pre‑Built Template — Start from a ready‑made layout with default styles and containers; edit and publish quickly.
  • Create with AI — See the guided flow here

Note: Create with AI might not be enabled for your account, you can contact LoginRadius Support team at support@loginradius.com and ask them to enable it for you.

Step 3: Customize Your Pages

  • Edit page code (Auth, Profile, Workflow) using HTML, BeforeJS, CustomCSS, and CustomJS.
  • Create and adjust Styles (e.g., Card, Buttons, Inputs). Most style properties apply to the login box; Background color can style the whole page.
  • Use CSS variables (e.g., --sdk-card-bg-color, --sdk-card-text-color, --page-background) in your HTML to match the login box theme.
  • Configure Language Sets and Localization to customize text for each component and add languages.

Note: Read more about Style here

Step 4: Make It Live

  1. Return to the Hosted Pages list in the Admin Console.
  2. Open the three‑dot menu for your template.
  3. Select Set as Default to publish it on <tenantname>.hub.loginradius.com.
  4. Optionally, map templates to custom domains (e.g., login.yourdomain.com).

Pages

Auth Page

  • Purpose: A Centralized Authentication portal that you can direct users to handle all common identity use cases, including Login, registration, Password Recovery, and more.
  • Customize the surrounding page with HTML/CSS/JS; use styles and CSS classes for the login box.
  • Example (surrounding HTML): 
    <div style="background-color: var(--page-background);">
      <h1 style="color: var(--sdk-card-text-color);">Welcome</h1>
      <div id="auth-container"></div> <!-- Mandatory container -->
    </div>

Profile Page

  • Purpose: A post authentication page that can handle various activities, including displaying and updating profile information, Consent and privacy requests, and Account Management.
  • Use CSS variables to match surrounding elements: 
    <header style="background-color: var(--sdk-card-bg-color); color: var(--sdk-card-text-color);">
      <h2>Your Profile</h2>
    </header>
    <div id="profile-editor-container"></div> <!-- Mandatory container -->

Workflow Page

  • Purpose: Handles special steps in the user journey, like custom processes or flows defined in the LoginRadius orchestration section. The Workflow Page is used when you run any workflow configured in the orchestration section.
  • Customize the surrounding page with HTML/CSS/JS; use styles and CSS classes for the login box. Edit HTML to adjust the page layout around the workflow form (keeping the mandatory <div>) or BeforeJS to change the flow.
  • Example (surrounding HTML): 
    <div style="background-color: var(--page-background); text-align: var(--sdk-text-align);">
      <h3 style="color: var(--sdk-card-text-color);">Complete Your Setup</h3>
      <div id="workflow-container"></div> <!-- Mandatory container -->
    </div>

Best Practices

  • Keep strong color contrast and readable font sizes for accessibility.
  • Use CSS variables for consistent branding across the page.
  • Limit heavy CustomJS; preview across desktop and mobile.
  • Start with small changes and use live preview frequently.