Get started with the JavaScript SDK

Add LoginRadius authentication to any JavaScript app — install the SDK, point it at your app credentials, and render your first flow. This guide walks through both the npm and CDN installation paths, the minimum configuration required, and the next steps for customization, localization, and advanced flows.

Before you start

Set up your LoginRadius account

Example repository

JavaScript SDK demo apps

Prerequisites

• A LoginRadius account with your API Key — see Set up your LoginRadius account.
• A web project using a supported framework (Vue, Angular, Svelte, SolidJS, Nuxt, Next.js) or vanilla HTML.
• Node.js 18+ if you intend to install via npm.

Integrate the SDK

The JavaScript SDK (@loginradius/loginradius-js) ships as an npm package and as a CDN bundle. Install it, create an SDK instance, then render a flow.

Step 1: Install the SDK

Choose either the npm package or the CDN bundle:

NPM module

npm install @loginradius/loginradius-js

pnpm add @loginradius/loginradius-js

script (CDN)

Add these tags before your closing </body>. They load the LoginRadius UI bundle and styles from our CDN:

<link rel="stylesheet" href="https://auth.lrcontent.com/v2/LoginRadiusV3.css" />
<script src="https://auth.lrcontent.com/v2/LoginRadiusV3.js"></script>

Step 2: Create an SDK instance

Initialize the SDK with your app credentials. Replace the placeholders below with the values from your LoginRadius Dashboard.

NPM module

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

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

script (CDN)

<script>
  if (window.LoginRadiusSDK) {
    window.LRObject = new LoginRadiusSDK({
      apiKey: "<YOUR_API_KEY>",
      callbackUrl: window.location.href.split("?")[0],
    });
  }
</script>

note

Enable CAPTCHA in the LoginRadius Dashboard before going live. CAPTCHA protects your authentication flows from automated abuse — turn on reCAPTCHA v2, reCAPTCHA v3, or hCaptcha under your application's security settings.

options accepts many more settings than the credentials shown here. See Options for the full reference of values you can pass when creating the SDK instance.

Step 3: Render an auth component

Render the auth flow into a container element on your page:

<div id="auth-container"></div>

NPM module

LRObject.init("auth", {
  container: "auth-container",
  onSuccess: (res) => {
    if (res.access_token) console.log("Authenticated:", res);
  },
  onError: (err) => console.error("Auth error:", err),
});

script (CDN)

<script>
  LRObject.init("auth", {
    container: "auth-container",
    onSuccess: function (res) {
      if (res.access_token) console.log("Authenticated:", res);
    },
    onError: function (err) {
      console.error("Auth error:", err);
    },
  });
</script>

Replace 'auth' with any available component name ('login', 'registration', 'profileEditor', 'workflow', etc.).

Flow components

Pre-built components manage multi-step flows. Render any of them with LRObject.init():

action	Flow
'auth'	Combined login and registration (default entry point)
'login'	Login-only flow with MFA, passkey, and passwordless support
'registration'	Registration-only flow
'profileEditor'	Account management: profile details, email, phone, MFA enrollment, passkeys, sessions
'workflow'	Identity Orchestration workflow execution

Compose a profile page

For fine-grained control, render the individual profile sub-components into separate containers:

<div id="profile-container"></div>
<div id="personal-details-container"></div>
<div id="email-container"></div>
<div id="password-container"></div>
<div id="mfa-container"></div>
<div id="passkey-container"></div>
<div id="delete-account-container"></div>

<script>
  LRObject.init("profileEditor", { container: "profile-container" });
  LRObject.init("personalDetails", { container: "personal-details-container" });
  LRObject.init("addEmail", { container: "email-container" });
  LRObject.init("changePassword", { container: "password-container" });
  LRObject.init("setupTwoFactorAuth", { container: "mfa-container" });
  LRObject.init("addPasskey", { container: "passkey-container" });
  LRObject.init("deleteAccount", { container: "delete-account-container" });
</script>

Credentials

The snippets above use simple placeholders — "<YOUR_API_KEY>" and your callback URL — to keep the examples readable. Replace each placeholder with the value from your LoginRadius Dashboard before running the code.

For production builds, inject these values at build or serve time (for example, through your bundler's configuration or a runtime config object). Never commit real credentials to source control.

Security and compliance

The SDK runs in the browser; treat every credential and token accordingly:

• API Key — keep it out of public source control. Substitute the placeholder only at build or serve time.
• Access tokens — the SDK manages session storage internally. Do not copy tokens into localStorage or expose them through window.* for debugging.
• Callback URLs — register every callback URL in the LoginRadius Dashboard. Unregistered URLs are rejected to prevent open-redirect abuse.
• Compliance posture — the SDK does not log PII to the console by default. Keep onSuccess and onError handlers free of identifier logging in production builds.

Best practices

• Wrap each init() call in a check that the container element exists before rendering — this avoids silent failures during route transitions.
• Use distinct container IDs per flow (#auth-container, #profile-container) so flows can co-exist on the same page.
• Centralize the LoginRadiusSDK instance so a single configured object is shared across the app rather than instantiated per route.
• Surface onError to your application telemetry, not just console.error, so failed authentication attempts are observable.

Troubleshooting

Symptom	Likely cause	Resolution
Component does not render, no error in console	Container element ID is missing or not yet in the DOM	Ensure the container exists before calling init(). In SPAs, wait for the route to render.
Invalid API Key on init	Credentials missing or wrong value for the current tenant	Re-check the value you substituted for "<YOUR_API_KEY>" and confirm it matches your LoginRadius application.
Social login redirect returns to a 404	callbackUrl not registered in the Dashboard	Add the exact URL (including protocol and port) to the allowed callbacks list in the LoginRadius Dashboard.
Styles look unthemed when loading from CDN	LoginRadiusV3.css not loaded, or loaded after a conflicting stylesheet	Confirm the <link> tag is present and ordered before app-level overrides.
Workflow component shows "workflow not found"	workflowName or clientId mismatch	Cross-check both values against the Identity Orchestration workflow in the Dashboard.

Next steps

Options

Every option you can pass when creating the SDK instance.

Components

Reference for the pre-built UI components the JavaScript SDK can render.

Customization

Configure styling, theming, and component behavior to match your design system.

Localization

Translate the UI copy rendered by the SDK into any language.

Demo applications

Working demos for every major framework live in the loginradius-demos repository.

vanilla

Plain HTML + CDN

Simplest drop-in, no bundler.

playground

Vite + TypeScript

Interactive sandbox for trying flows.

angular

Angular 21

Angular integration.

next

Next.js 16 (App Router)

Next.js integration.

nuxt

Nuxt 4

Nuxt integration.

solid

SolidJS + Vite

SolidJS integration.

svelte

Svelte 5 + Vite

Svelte integration.

vue

Vue 3 + Vite

Vue 3 integration.

Related resources

JavaScript SDK overview

Concepts, components, and runtime for the LoginRadius JavaScript SDK.

Components reference

Pre-built UI components the JavaScript SDK can render.

Options

Reference for the options object shared across every SDK flow.

Customization

Style the SDK UI with CSS classes, style props, and CSS variables.

Localization

Translate the SDK UI copy into any language.

LoginRadius React SDK

React-first integration layer with provider, hooks, and JSX components.