JS SDK Demos (npm)

Reference apps that consume @loginradius/loginradius-js via npm. The JS SDK is a single-bundle SDK that ships pre-built UI on top of the auth controller. Drop it into any frontend and call sdk.init('auth', { container: '#my-div' }).

Available Demos

Demo	Stack	Default dev port
playground	Vite + TypeScript	5173
angular	Angular 21	4200
next	Next.js 16 (App Router)	3000
nuxt	Nuxt 4 + Nuxt UI	3000
solid	SolidJS + Vite	5173
svelte	Svelte 5 + Vite	5173
vue	Vue 3 + Vite	5173

What the JS SDK Gives You

• A single LoginRadiusSDK class that wraps the core controller and ships pre-built UI
• sdk.init('auth' | 'login' | 'register' | 'profileEditor' | 'workflow', options) to mount any flow into a DOM container
• sdk.$hooks.call('mapValidationMessages' | 'mapErrorMessages', overrides) for customizing copy
• sdk.controller.* for raw access to the underlying auth methods

Use this SDK when you want a fast integration and don't need React-specific hooks or components.

Quick Start

cd loginradius-js/vue            # or next, nuxt, svelte, solid, angular, playground
pnpm install
cp .env.example .env.local       # see Configuration below
pnpm dev

Configuration

Demo	Var prefix	File
playground, solid, svelte, vue	VITE_LOGINRADIUS_*	.env.local
next	NEXT_PUBLIC_LOGINRADIUS_*	.env.local
nuxt	NUXT_PUBLIC_LOGINRADIUS_*	.env
angular	n/a	src/environments/environment.ts

VITE_LOGINRADIUS_API_KEY=your-api-key
VITE_LOGINRADIUS_SOTT=your-sott

Common Snippet

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

const sdk = new LoginRadiusSDK({
  apiKey: import.meta.env.VITE_LOGINRADIUS_API_KEY,
  sott: import.meta.env.VITE_LOGINRADIUS_SOTT,
  callbackUrl: window.location.origin,
});

sdk.init('auth', {
  container: 'lr-auth',
  onSuccess: (res) => console.log('auth success', res),
  onError: (err) => console.error('auth error', err),
});

Related Resources

JS SDK Getting StartedJS SDK (CDN) DemoReact SDK Demos