LRObject instance

LRObject is the single instance of the LoginRadiusSDK class that your application creates once and reuses everywhere. It is the entry point for the JavaScript SDK: it renders the pre-built flows and it exposes the methods that read and manage the authenticated session.

Overview

Constructing the SDK with new LoginRadiusSDK(options) returns one instance. LRObject is the conventional name for that instance across the demos and this documentation, but the variable name is yours to choose. Create it once at application startup and share the same reference across every page and component, because each instance owns its own configuration, session cache, and loading state. A second instance does not share state with the first.

The instance carries two responsibilities:

• Rendering flows. init() mounts a pre-built component such as login or profileEditor into a container.
• Managing the session. isAuthenticated(), getAccessToken(), getUser(), logout(), and onLoading() read and control the session the SDK restores from the hosted SSO cookie.

On construction, the instance immediately starts restoring the session from the hosted SSO cookie in the background. The read methods await that one restore, so a single configured LRObject is the source of truth for authentication state across your app.

import { LoginRadiusSDK } from "@loginradius/loginradius-js";

// One instance per application, reused everywhere.
const LRObject = new LoginRadiusSDK({
  apiKey: "<YOUR_API_KEY>",
  appName: "<YOUR_APP_NAME>",
  callbackUrl: window.location.origin,
});

// Render a pre-built flow into a container.
LRObject.init("login", { container: "login-container" });

// Read the session the same instance restored from the SSO cookie.
const authenticated = await LRObject.isAuthenticated();

Create the instance

Pass your tenant configuration to the constructor. The apiKey identifies your tenant, callbackUrl receives the SSO redirect, and appName resolves the hosted SSO hub domain that backs session restore. See Options for the full option surface.

NPM module

Import the class from the package, then construct the instance at startup.

import { LoginRadiusSDK } from "@loginradius/loginradius-js";

const LRObject = new LoginRadiusSDK({
  apiKey: "<YOUR_API_KEY>",
  appName: "<YOUR_APP_NAME>",
  callbackUrl: window.location.origin,
});

script (CDN)

When you load the CDN bundle, the class is exposed on window as LoginRadiusSDK. Guard on its presence before constructing the instance.

<script src="https://cdn.loginradius.com/path/to/LoginRadiusV3.js"></script>
<script>
  if (window.LoginRadiusSDK) {
    var LRObject = new LoginRadiusSDK({
      apiKey: "<YOUR_API_KEY>",
      appName: "<YOUR_APP_NAME>",
      callbackUrl: window.location.origin,
    });
  } else {
    console.error("LoginRadiusSDK failed to load.");
  }
</script>

note

isAuthenticated() and getUser() restore the session by calling the hosted SSO endpoint, which the SDK builds from your appName or a configured custom domain. Set appName in the constructor options, otherwise both methods resolve as unauthenticated even for a returning user.

The apiKey is your tenant's public identifier and is safe in client-side code. Never place the API Secret or the raw SOTT secret in browser-delivered JavaScript.

Instance methods

The methods below hang off the LRObject instance. The lifecycle methods render and unmount components, and the read methods answer against the one session the instance restores on the first page load.

Method	Signature	Returns	Description
init(action, options)	(action: ActionType, options: InitOptions) => void	void	Renders a pre-built flow, such as login or profileEditor, into a container. See Get started.
isAuthenticated()	() => Promise<boolean>	Promise<boolean>	Resolves to true when a valid Access Token is present after session restore.
getAccessToken()	() => string | null	string | null	Synchronous read of the current Access Token, or null when unauthenticated.
getSession()	() => SessionData | null	SessionData | null	Synchronous read of the session payload (accessToken, refreshToken, expireTime), or null when unauthenticated.
getUser()	() => Promise<UserProfile | null>	Promise<UserProfile | null>	Fetches the signed-in user's profile, or null when unauthenticated.
logout()	() => Promise<void>	Promise<void>	Runs a best-effort SSO logout, then clears the local session.
onLoading(callback)	(cb: (loading: boolean) => void) => () => void	unsubscribe function	Subscribes to the SDK-wide loading signal and returns an unsubscribe function.

Read authentication state

The SDK restores the session from the hosted SSO cookie once, in the background, when you construct the instance. isAuthenticated() awaits that restore before answering, so you can call it directly on a fresh page load without any explicit setup. getAccessToken() and getSession() are synchronous reads for use after a session is known to exist.

The isAuthenticated() method is the recommended route guard. It returns a promise, so pair it with await or .then().

Basic example

The following auth page checks for an existing session and skips the form when one is found, otherwise it renders the combined login and registration flow.

import { LoginRadiusSDK } from "@loginradius/loginradius-js";

const LRObject = new LoginRadiusSDK({
  apiKey: "<YOUR_API_KEY>",
  callbackUrl: window.location.origin,
  // Required for isAuthenticated() and getUser() to restore the SSO session.
  appName: "<YOUR_APP_NAME>",
});

// isAuthenticated() waits for the SDK to rehydrate the session from the SSO
// cookie, so this guard is reliable on a cold page load.
const authenticated = await LRObject.isAuthenticated();

if (authenticated) {
  window.location.replace("/profile.html");
} else {
  LRObject.init("auth", {
    container: "auth-container",
    onError: (err) => console.error("Auth error:", err),
  });
}

Once a session exists, read the Access Token synchronously with getAccessToken() and attach it to your own backend calls. Use getSession() when you also need the Refresh Token or expiry timestamp, which the SDK populates for the B2B tenant flow.

const accessToken = LRObject.getAccessToken();

if (accessToken) {
  const res = await fetch("/api/orders", {
    headers: { Authorization: `Bearer ${accessToken}` },
  });
  if (!res.ok) {
    throw new Error(`Request failed with status ${res.status}`);
  }
}

Fetch the user profile

The getUser() method awaits the session restore, then fetches the profile for the active Access Token. It resolves to null when there is no session or the profile request fails, so a null result doubles as a session check on a protected page. The SDK does not surface PII on failure.

The following protected page bounces unauthenticated visitors back to the auth page, then renders the profile.

const user = await LRObject.getUser();

if (!user) {
  window.location.replace("/index.html");
} else {
  document.getElementById("name").textContent = user.Fullname ?? "User";
}

Log out

The logout() method performs a complete logout in two stages. It first makes a best-effort server-side SSO logout to invalidate the hosted session, then clears the local Access Token, session cookies, and any B2B tenant session. The SSO call never blocks the local clear, so the returned promise always resolves and is safe to chain a redirect onto.

document.getElementById("logout").addEventListener("click", async () => {
  await LRObject.logout();
  window.location.href = "/index.html";
});

Track loading state

The onLoading() method subscribes to a single aggregated loading signal for the instance. The signal is true while any mounted component is still loading and false once they have all settled. The callback fires immediately with the current value, then on every change, and the method returns an unsubscribe function.

Register the subscription before your first init() call so the SDK suppresses its built-in spinner and your own indicator owns loading from the first mount.

const overlay = document.getElementById("loader");

const unsubscribe = LRObject.onLoading((loading) => {
  overlay.style.display = loading ? "flex" : "none";
});

// Call unsubscribe() when tearing down the page to release the listener.

Full integration example

The vanilla demo wires these methods end to end across an auth page and a protected profile page: an isAuthenticated() route guard, a synchronous getAccessToken() read, a getUser() profile fetch, an onLoading() overlay, and a logout() button. Read the demo source for a runnable reference that mirrors the flow described on this page.

vanilla

Plain HTML + CDN

Auth and profile pages built on the instance methods above.

Related resources

Get started

Install, configure, and render your first flow with the JavaScript SDK.

Components

Pre-built UI components the JavaScript SDK can render.

Options

Every option you can pass when creating the SDK instance.