Set up your LoginRadius account

Before you can integrate a LoginRadius Frontend SDK, sign in to the LoginRadius Dashboard and grab the credentials your app uses to talk to the LoginRadius APIs. This guide walks through the three steps required to retrieve them.

Prerequisites

Before you begin, make sure you have:

• A LoginRadius account with access to the Dashboard.
• The application (tenant) for which you want to retrieve credentials already created.
• Permission to view the API Configuration section for that application.

Configuration

The LoginRadius Frontend SDKs authenticate with two credentials, both available from the Dashboard:

• API Key — your app's public client identifier, used to initialize the SDK.
• SOTT (Secure One-Time Token) — used to authorize registration requests and short-lived secure access from mobile clients. Only required when Bot Protection (Captcha) is not enabled in the Admin Console — if Captcha is enabled on the registration endpoint, the Captcha challenge satisfies the bot-prevention requirement and SOTT can be omitted.

The sections below walk through retrieving each credential.

Sign in to the LoginRadius Dashboard

Go to the LoginRadius Dashboard and sign in (or create an account). Once signed in, select the app whose credentials you want to use.

Get your API Key

Your API Key identifies your app to LoginRadius and is required to initialize the SDK.

1. In the Admin Console, navigate to Tenant Settings → API Credential.
2. Copy the API Key directly.

Set up Captcha and SOTT

LoginRadius requires bot protection on the registration endpoint, and you can satisfy it in one of two ways: enable Captcha in the Admin Console, or generate a SOTT and pass it at SDK initialization. The tabs below cover each path, with Dashboard steps and code snippets for both the JavaScript and React SDKs.

Recommended

Enable Captcha for registration protection. It is the recommended path because the provider handles the bot-prevention challenge entirely in the browser, removing the need to generate, rotate, and server-render SOTTs for every page load.

Captcha

Captcha protects registration and login endpoints from automated abuse. LoginRadius wires Captcha into Bot Protection, which dynamically triggers a CAPTCHA challenge on selected authentication APIs.

1. In the Admin Console, navigate to Security → Attack Protection → Bot Protection and enable it using the toggle.
2. Choose a Captcha provider (Google reCAPTCHA, hCaptcha, or Tencent Captcha) and paste the Site Key and Secret Key issued by that provider's admin console.
3. For score-based providers (e.g., reCAPTCHA v3), set the Score Threshold — LoginRadius rejects requests below this score.
4. Under Bot Protection Allowed On APIs, select the endpoints to protect (e.g., Auth Login by Email, Auth Register, Forgot Password).
5. Click Save.

The secret key is stored server-side and never exposed to the browser. Rotate keys from the provider's admin console and re-save them in the Dashboard if a leak is suspected.

For supported providers and provider-specific configuration, see Captcha provider overview. For the full Bot Protection toggle behavior (including the availability-API blocking rule), see Attack protection overview.

SOTT

SOTT (Secure One-Time Token) is used to authorize registration and access from mobile or short-lived secure clients. Use this path when Bot Protection (Captcha) is not enabled on the registration endpoint — if Captcha is enabled in the Admin Console, you can skip SOTT setup entirely.

1. In the Admin Console, navigate to Tenant Settings → API Configuration → SOTT.
2. Click + New SOTT.
3. Select the technology (e.g., iOS, Android, React).
4. Set the date range for validity.
5. Add comments (optional).
6. Choose whether to Encode SOTT, then click Generate.

Tokens can be revoked individually, or in bulk using the Revoke All button.

For a deeper walkthrough of SOTT generation, encoding, validity windows, and revocation, see SOTT usage.

Initialize the SDK with your SOTT

Inject the SOTT at page-render time from a server-side variable — never hardcode it in client bundles.

JavaScript SDK

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

React SDK

import { LoginRadiusProvider } from "@loginradius/loginradius-react";

const options = {
  apiKey: "<YOUR_API_KEY>",
  sott: "<SERVER_RENDERED_SOTT>",
  callbackUrl: window.location.origin,
};

export default function App() {
  return (
    <LoginRadiusProvider options={options}>
      {/* Your app components */}
    </LoginRadiusProvider>
  );
}

Troubleshooting

Symptom	Likely cause	Resolution
SDK initialization fails with Invalid API Key	API Key copied from a different tenant or environment	Re-copy from API Configuration → API Account Key for the correct app
Registration returns SOTT expired or invalid	SOTT outside its validity window, or revoked	Generate a fresh SOTT and inject it server-side at page load
API Configuration section is not visible	Account lacks permission for that app	Ask a tenant admin to grant API Configuration access
Mobile flows fail with Unauthorized even with a valid SOTT	SOTT generated for the wrong technology (e.g., iOS vs Android)	Re-generate the SOTT selecting the correct technology

Next steps

With your API Key in hand, head to one of the SDK quickstarts to initialize the SDK.

Get started with the JavaScript SDK

Install, initialize, and render your first auth flow with the JavaScript SDK.

Get started with the React SDK

Wrap your app with the provider and render flows as JSX components.

Related resources

Frontend SDKs overview

Compare the JavaScript and React SDKs and pick the right fit for your stack.

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.