JS SDK Demo (CDN)

A minimal reference app that loads the LoginRadius JS SDK via a <script> tag from CDN. No bundler, no build step.

Quick Start

Open vanilla/index.html in a browser after editing the placeholder apiKey and sott values inline. No install required.

Or serve it locally:

npx serve loginradius-js/vanilla

Setup

Include the SDK via CDN:

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

Auth Page

<div id="registration-container"></div>
<script>
  var LRObject = new LoginRadiusSDK({
    apiKey: 'YOUR_API_KEY',
    sott: 'YOUR_SOTT',
    callbackUrl: window.location.href.split('?')[0],
  });

  LRObject.init('auth', {
    container: 'registration-container',
    onSuccess: function (res) {
      if (res.access_token) {
        window.open('profile.html', '_self');
      }
    },
    onError: function (e) {
      console.error(e);
    },
  });
</script>

Profile Page

<div id="profile-container"></div>
<script>
  LRObject.init('profileEditor', {
    container: 'profile-container',
    logoutRedirectUrl: window.location.origin,
    onSuccess: function (res) {
      console.log('Profile success:', res);
    },
    onError: function (e) {
      console.error('Profile error:', e);
    },
  });
</script>

Workflow Page

<div id="workflow-container"></div>
<script>
  LRObject.init('workflow', {
    container: 'workflow-container',
    workflowName: 'your-workflow-name',
    clientId: 'your-client-id',
    onSuccess: function (res) {
      console.log('Workflow success:', res);
    },
    onError: function (e) {
      console.error('Workflow error:', e);
    },
  });
</script>

Configuration

Edit the apiKey and sott values directly in index.html and profile.html. For production, replace the placeholder values with your LoginRadius app credentials from the Admin Console.