Skip to main content

<LoggedIn>

<LoggedIn> is a conditional rendering helper. Use this component where content should only be shown to a user once they have logged in.

The children of <LoggedIn> will be shown only once the SDK is ready and the user is authenticated.

Usage​

Displaying content for logged in users only.

import { LoggedIn } from "@slashid/react"

function PrivateComponent() {
  return <LoggedIn>Only visible for logged in users.</LoggedIn>
}

With specific factors​

Displaying content for users authenticated using specific factors only.

import { LoggedIn } from "@slashid/react";

function MultipleFactorsStrictComponent() {
  return (
    <LoggedIn withFactorMethods={["email_link", "otp_via_sms"]}>
      Only visible for the users authenticated with email magic link and SMS code.
    </LoggedIn>
  );
}

With factor count​

Displaying content for users with multi-factor authentication only, but without specifying which ones.

function MultipleFactorsLooseComponent() {
  return (
    <LoggedIn withFactorMethods={(methods) => methods.length >== 2}>
      Only visible for the users authenticated with two or more factors.
    </LoggedIn>
  );
}

Props​

PropTypeDefaultDescription
withFactorMethods?FactorMethod[] | (methods: FactorMethod[]) => booleanA list of required factors or a predicate function which is called with a list of groups the authenticated user belongs to; return true to render the children content.