🚀 Get started with LoginRadius

1. Sign up for an account.
2. Create an application in your LoginRadius Dashboard.
3. Spin up a new codebase with one of the quickstart guides.

Install the SDK with your preferred package manager:

npm install @loginradius/loginradius-js
# or
yarn add @loginradius/loginradius-js
# or
pnpm add @loginradius/loginradius-js

All dependencies are included automatically.

⚡ Quick start

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

// Initialize the SDK
const sdk = new LoginRadiusSDK({
  appName: 'your-app-name',
  apiKey: 'your-api-key',
});

// Render a login form
sdk.init('login', {
  container: '#login-container',
  onSuccess: (data) => {
    console.log('Login successful:', data);
    // Handle successful login
  },
  onError: (error) => {
    console.error('Login error:', error);
    // Handle error
  },
});

Note: The apiKey is your LoginRadius app's public API key and is safe to expose in client-side code. Never embed your API secret, SOTT secret, or any private credential in browser-delivered JavaScript.

✨ Features

• 🚀 Framework-agnostic — works with vanilla JavaScript, Vue, Angular, Svelte, or any framework
• 📦 Lightweight — optimized bundle size built on Preact
• 🎯 Simple API — an easy-to-use imperative interface
• 🔒 Secure — built on LoginRadius's proven authentication platform
• 📘 TypeScript — full TypeScript support with type definitions
• ⚡ Modern — ES2017+ with ES Modules and CommonJS support

🛠️ Usage

Initialize the SDK

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

const sdk = new LoginRadiusSDK({
  appName: 'your-app-name',
  apiKey: 'your-api-key',
  // Optional configuration
  sott: 'your-sott-token',
  verificationUrl: 'https://your-domain.com/verify',
  resetPasswordUrl: 'https://your-domain.com/reset-password',
});

Available actions

Each authentication flow is rendered by calling sdk.init(action, options).

Login

sdk.init('login', {
  container: '#login-container',
  onSuccess: (data) => console.log('Login successful:', data),
  onError: (error) => console.error('Login error:', error),
});

Registration

sdk.init('registration', {
  container: '#register-container',
  onSuccess: (data) => console.log('Registration successful:', data),
  onError: (error) => console.error('Registration error:', error),
});

Forgot password

sdk.init('forgotPassword', {
  container: '#forgot-password-container',
  onSuccess: (data) => console.log('Password reset email sent:', data),
  onError: (error) => console.error('Error:', error),
});

Custom workflow

sdk.init('workflow', {
  container: '#workflow-container',
  workflowName: 'your-workflow-name',
  clientId: 'your-client-id',
  onSuccess: (data) => console.log('Workflow completed:', data),
  onError: (error) => console.error('Workflow error:', error),
});

All available actions

| Action | Description | |---|---| | login | Login form | | registration | Registration form | | forgotPassword | Forgot password flow | | auth | Authentication flow | | orgInvite | Organization invitation | | passwordlessLogin | Passwordless login | | profileEditor | Profile editor | | workflow | Custom workflow | | verifyToken | Token verification | | changePin | Change PIN | | changePassword | Change password | | linkAccount | Link social account | | addEmail | Add email | | personalDetails | Edit personal details | | resetBackupCode | Reset backup codes | | socialLogin | Social login | | editPhone | Edit phone number | | verifyEmailPhone | Verify email/phone | | editUsername | Edit username | | setupTwoFactorAuth | Set up 2FA | | addPasskey | Add passkey | | deleteAccount | Delete account |

Cleanup

// Destroy a specific container
sdk.destroy('login-container');

📘 TypeScript support

The SDK ships full TypeScript definitions:

import {
  LoginRadiusSDK,
  LoginRadiusOptions,
  ActionType,
  ApiError,
} from '@loginradius/loginradius-js';

const options: LoginRadiusOptions = {
  appName: 'your-app-name',
  apiKey: 'your-api-key',
};

const sdk = new LoginRadiusSDK(options);

const action: ActionType = 'login';

sdk.init(action, {
  container: '#login-container',
  onSuccess: (data: any) => {
    console.log(data);
  },
  onError: (error: ApiError) => {
    console.error(error);
  },
});

🧩 Framework examples

Vanilla JavaScript

<!DOCTYPE html>
<html>
  <head>
    <title>LoginRadius JS SDK</title>
  </head>
  <body>
    <div id="login-container"></div>

    <script type="module">
      import { LoginRadiusSDK } from '@loginradius/loginradius-js';

      const sdk = new LoginRadiusSDK({
        appName: 'your-app-name',
        apiKey: 'your-api-key',
      });

      sdk.init('login', {
        container: '#login-container',
        onSuccess: (data) => console.log('Success:', data),
      });
    </script>
  </body>
</html>

Vue 3

<template>
  <div ref="loginContainer"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { LoginRadiusSDK } from '@loginradius/loginradius-js';

const loginContainer = ref(null);
let sdk;

onMounted(() => {
  sdk = new LoginRadiusSDK({
    appName: 'your-app-name',
    apiKey: 'your-api-key',
  });

  sdk.init('login', {
    container: loginContainer.value,
    onSuccess: (data) => console.log('Success:', data),
  });
});

onUnmounted(() => {
  if (loginContainer.value) {
    sdk.destroy(loginContainer.value.id);
  }
});
</script>

Angular

import {
  Component,
  ElementRef,
  ViewChild,
  AfterViewInit,
  OnDestroy,
} from '@angular/core';
import { LoginRadiusSDK } from '@loginradius/loginradius-js';

@Component({
  selector: 'app-login',
  template: '<div #loginContainer></div>',
})
export class LoginComponent implements AfterViewInit, OnDestroy {
  @ViewChild('loginContainer') loginContainer!: ElementRef;
  private sdk!: LoginRadiusSDK;

  ngAfterViewInit() {
    this.sdk = new LoginRadiusSDK({
      appName: 'your-app-name',
      apiKey: 'your-api-key',
    });

    this.sdk.init('login', {
      container: this.loginContainer.nativeElement,
      onSuccess: (data) => console.log('Success:', data),
    });
  }

  ngOnDestroy() {
    if (this.loginContainer?.nativeElement?.id) {
      this.sdk.destroy(this.loginContainer.nativeElement.id);
    }
  }
}

Svelte

<script>
  import { onMount, onDestroy } from 'svelte';
  import { LoginRadiusSDK } from '@loginradius/loginradius-js';

  let loginContainer;
  let sdk;

  onMount(() => {
    sdk = new LoginRadiusSDK({
      appName: 'your-app-name',
      apiKey: 'your-api-key',
    });

    sdk.init('login', {
      container: loginContainer,
      onSuccess: (data) => console.log('Success:', data),
    });
  });

  onDestroy(() => {
    if (loginContainer?.id) {
      sdk.destroy(loginContainer.id);
    }
  });
</script>

<div bind:this={loginContainer}></div>

📖 API reference

LoginRadiusSDK

Constructor

new LoginRadiusSDK(options: LoginRadiusOptions)

Methods

init(action, options)

Initialize and render an authentication flow.

sdk.init(action: ActionType, options: InitOptions): void

destroy(containerId)

Destroy and clean up a rendered flow.

sdk.destroy(containerId: string): void

Properties

util

Access to utility functions.

sdk.util: Utilities

$hooks

Access to SDK hooks for advanced customization.

sdk.$hooks: any

🌐 Browser support

• Modern browsers (Chrome, Firefox, Safari, Edge)
• ES2017+ support required
• For older browsers, use appropriate polyfills

🏁 Learning LoginRadius

LoginRadius's full documentation is available at loginradius.com/docs.

• We recommend starting with the quickstart guides. They'll help you quickly add LoginRadius to your application.
• LoginRadius offers a comprehensive suite of components designed to seamlessly integrate authentication and multi-tenancy into your application. To learn more, check out the docs.
• LoginRadius's organizations feature provides powerful multi-tenancy capabilities — group users, manage roles and permissions, and control access to resources. Perfect for B2B applications, enterprise software, and any multi-tenant system. Learn more in the docs.

📦 Related packages

• @loginradius/loginradius-core — framework-agnostic core authentication logic
• @loginradius/loginradius-react — React components and hooks

🛟 Release notes

Curious what we shipped recently? You can browse the GitHub Releases page or look at the CHANGELOG.md for this package.

💬 Support

• Documentation
• GitHub Issues
• Email Support

License

This project is licensed under the MIT License.