Workflow Page Setup
Templates and Styles
Templates define the overall page structure (HTML, BeforeJS, CustomCSS, CustomJS). Each template can have multiple Styles: a Style keeps the same HTML but applies different CSS, letting you support multiple visual themes from one template.
To 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 the template and open it in the editor.
To manage styles:
- Open a template and navigate to the Styles tab.
- Create a new style, clone an existing one, or set a default style.
- Styles control the login box, page background, buttons, inputs, and other visual elements.
- Pass the style name as the
squery parameter in the authorize URL to activate it at runtime.
Workflow Page Customization
The Workflow Page is the page type used for IO workflow rendering. It requires a <div id="workflow-container"></div>: this element is mandatory and is replaced at runtime with the workflow UI generated by the IO engine.
You can customize the Workflow Page across four layers:
| Layer | What it controls |
|---|---|
| HTML | Page layout and structure. The workflow-container div must be present. |
| BeforeJS | JavaScript that runs before the workflow loads. Used to initialize the SDK, parse query parameters, and configure the workflow. |
| CustomCSS | Styles applied on top of the template CSS. Use CSS variables for consistent branding. |
| CustomJS | JavaScript for interactivity or third-party integrations after the workflow loads. |
Minimal HTML example:
<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 -->
</div>
The <div id="workflow-container"></div> element is mandatory. If it is missing, the workflow UI will not render and users will see a blank page.
Default BeforeJS Script
The BeforeJS script initializes the LoginRadius SDK, reads query parameters from the authorize URL, and wires up success and error handlers. The default script below works for all standard IO workflow pages:
var LRObject = new LoginRadiusSDK(commonoptions);
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";
}
}
The script reads client_id, workflowname, debugmode, and state from the query string. On success it redirects to return_url with the access token appended; on error it logs to the console. Customize onSuccess and onError to match your application's post-auth logic.