@loginradius/loginradius-js

v3.0.0-rc.1.1

Published

5 days ago

A framework-agnostic JavaScript SDK for integrating LoginRadius authentication and identity management

0High
0Medium
0Low

developers-loginradius

loginradius authentication identity sdk javascript vanilla-js auth framework-agnostic

@loginradius/loginradius-js

A framework-agnostic JavaScript SDK for integrating LoginRadius authentication and identity management into any web application.

Features

🚀 Framework-agnostic - Works with vanilla JavaScript, Vue, Angular, Svelte, or any framework
📦 Lightweight - Optimized bundle size using Preact
🎯 Simple API - 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

Installation

npm install @loginradius/loginradius-js

yarn add @loginradius/loginradius-js

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
  },
});

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

The SDK supports various authentication flows:

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

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 - Setup 2FA
addPasskey - Add passkey
deleteAccount - Delete account

Cleanup

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

TypeScript Support

The SDK includes 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 cleanup 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

Related Packages

@loginradius/loginradius-core - Core authentication logic
@loginradius/loginradius-react-sdk - React components

License

MIT

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@loginradius/loginradius-js

Features

Installation

Quick Start

Usage

Initialize the SDK

Available Actions

Login

Registration

Forgot Password

Custom Workflow

All Available Actions

Cleanup

TypeScript Support

Framework Examples

Vanilla JavaScript

Vue 3

Angular

Svelte

API Reference

LoginRadiusSDK

Constructor

Methods

init(action, options)

destroy(containerId)

Properties

util

$hooks

Browser Support

Related Packages

License

Support