Skip to main content

Components

Prebuilt components render complete authentication and account experiences. Pass an options object and call LRObject.init('<name>', options).

Auth

  • Combined sign‑in and sign‑up UI.
  • Honors Dashboard configuration (providers, passwordless, passkey).
<div id="auth-container"></div>
<script>
  const auth = { container: 'auth-container', onSuccess: console.log, onError: console.error };
  LRObject.init('auth', auth);
</script>

Login

  • Sign‑in only UI.
<div id="login-container"></div>
<script>
  const login = { container: 'login-container', onSuccess: console.log, onError: console.error };
  LRObject.init('login', login);
</script>

Registration

<div id="registration-container"></div>
<script>
  const registration = { container: 'registration-container', onSuccess: console.log, onError: console.error };
  LRObject.init('registration', registration);
</script>

Forgot Password

<div id="forgot-container"></div>
<script>
  const forgot = { container: 'forgot-container', onSuccess: console.log, onError: console.error };
  LRObject.init('forgotpassword', forgot);
</script>

Passwordless

  • Magic link or OTP.
<div id="pwless-container"></div>
<script>
  const passwordless = { container: 'pwless-container', onSuccess: console.log, onError: console.error };
  LRObject.init('passwordless', passwordless);
</script>

ProfileEditor

  • View and edit profile fields.
<div id="profile-container"></div>
<script>
  const profile = { container: 'profile-container', onSuccess: console.log, onError: console.error };
  LRObject.init('profileeditor', profile);
</script>

orgInvite

  • Send B2B invitations.
<div id="invite-container"></div>
<script>
  const invite = { container: 'invite-container', onSuccess: console.log, onError: console.error };
  LRObject.init('orgInvite', invite);
</script>

Common Props

  • container: DOM id to render into
  • onSuccess(response): success handler
  • onError(errors): error handler