Sign In CTA

Components that support authentication-gated content accept userIsLoggedIn and signInCTA props. When the user is not logged in and the entity requires authentication (authRequirement: "REGISTERED" on the backend), the component renders a sign-in screen instead of the main flow.

You — the host application — own the actual sign-in logic. The component only renders the call-to-action.

SignInCTADetails

interface SignInCTADetails {
  defaultLabel?: string;
  onClick?: () => void;
  url?: string | null;
  target?: LinkTargetType; // "_blank" | "_self" | "_parent" | "_top"
  component?: React.ReactElement | null;
}

Field	Description
`defaultLabel`	Button label. Required unless `component` is provided.
`onClick`	Click handler. Use for in-app modals or programmatic sign-in.
`url`	Sign-in URL. Use for redirect-based sign-in flows.
`target`	Anchor target. Defaults to `_self`.
`component`	Custom React element to render in place of the default button.

Priority order

Only one rendering strategy is active at a time, picked in this order:

component — if provided, the custom React element is rendered.
onClick — if provided (and no component), a button is rendered that calls the handler.
url — if provided (and no component/onClick), a button is rendered that navigates.
None of the above — a disabled button is shown.

Example — onClick handler

import { SignInCTADetails } from "fansunited-frontend-core";

const signInCTA: SignInCTADetails = {
  defaultLabel: "Sign In",
  onClick: () => openSignInModal(),
};

<ClassicQuizPlay
  {...otherProps}
  userIsLoggedIn={isLoggedIn}
  signInCTA={signInCTA}
/>

Example — URL redirect

const signInCTA: SignInCTADetails = {
  defaultLabel: "Login",
  url: "https://your-auth.example.com/login",
  target: "_blank",
};

Example — fully custom component

const signInCTA: SignInCTADetails = {
  component: <MyBrandedSignInButton onSignIn={handleSignIn} />,
};

Behavior

When userIsLoggedIn is false and the entity requires authentication, the sign-in screen replaces the main flow.
When userIsLoggedIn is true, the sign-in CTA is never shown.
When the entity does not require authentication, the sign-in CTA is never shown — even if userIsLoggedIn is false.

Supported components

ClassicQuizPlay, PollVote, PersonalityQuizPlay, MatchQuizPlay, EventGamePlay, EitherOrPlay, Predictor. The Discussion component uses a simpler onSignInClick: () => void callback instead (see its page).