Workflow Page Setup

LoginRadius Auth Studio enables you to create branded authentication experiences using Brands, Templates, and Styles. This section explains how to set up and customize your workflow pages for a seamless, on-brand user journey.

Templates and Styles

Create a Template:
- In the Admin Console, go to Auth Studio.
- Click Add New Template.
- Choose to start from scratch, use a pre-built template, or create with AI.
- Name your template and open it in the editor.
Styles:
- Each template can have multiple Styles.
- Styles allow you to keep the same HTML structure (pages, forms, etc.) but change the CSS for different visual themes.
- You can create a new style, clone an existing one, and set a default style for each template.
- Styles control the login box, page background, buttons, inputs, and more. See Configure Styles for details.

Workflow Page Customization

The Workflow Page is used for custom processes or flows defined in the LoginRadius orchestration section. You can fully customize this page:

HTML: Edit the page layout and structure around the workflow form. The <div id="workflow-container"></div> is mandatory and is replaced at runtime with the workflow UI.
BeforeJS: Add JavaScript to run before the workflow loads (e.g., for custom logic or analytics).
CustomCSS: Add custom styles to match your brand or adjust layout details.
CustomJS: Add JavaScript to enhance interactivity or integrate with other services.

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:

Use CSS variables (e.g., --sdk-card-bg-color, --sdk-card-text-color, --page-background) for consistent branding.
Limit heavy CustomJS and always preview changes across devices.
Clone styles to test variations without affecting the default.

For more details, see the Auth Studio Workflow Page documentation and Configure Styles.

Default BeforeJS Script for Workflow Pages

You can use a BeforeJS script to initialize workflow settings and handle authentication events. Below is the default BeforeJS script used for workflow pages in LoginRadius Auth Studio:

var LRObject = new LoginRadiusSDK(raasoption);

var lr_raas_settings = window.lr_raas_settings || {};
lr_raas_settings.workflow = lr_raas_settings.workflow || {};

let rawQueryString = LRObject.util.parseQueryString(
  window.location.search.replace("?", "")
);
let queryString = {};
for (let key in rawQueryString) {
  queryString[key.toLowerCase()] = rawQueryString[key];
}
lr_raas_settings.workflow = {};
lr_raas_settings.workflow.clientId = queryString.client_id;
lr_raas_settings.workflow.workflowName = queryString.workflowname;
lr_raas_settings.workflow.debugMode=queryString.debugmode;
lr_raas_settings.workflow.state=queryString.state;
window.lr_raas_settings = lr_raas_settings;
lr_raas_settings.workflow.container = "workflow-container";

lr_raas_settings.workflow.onSuccess = function (response, flag) {
   if (response.access_token) {
    redirectToReturnUrl(response.access_token);
  }
};
lr_raas_settings.workflow.onError = function (errors) {
  if (errors) console.log(errors.error, true);
};


LRObject.init("workflow", lr_raas_settings.workflow);

function redirectToReturnUrl(token) {
  let queryString = LRObject.util.parseQueryString(
    window.location.search.replace("?", "")
  );
  if (queryString.return_url) {
    window.location =
      queryString.return_url.indexOf("?") > -1
        ? queryString.return_url + "&token=" + token
        : queryString.return_url + "?token=" + token;
  } else {
    window.location = "profile.aspx";
  }
}

This script parses query parameters, sets up workflow configuration, and handles success/error events. You can customize it further to fit your business logic or integration needs.

Templates and Styles

Workflow Page Customization

Default BeforeJS Script for Workflow Pages

Related Resources