Skip to main content


<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.


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.

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.


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.