CDP Frontend SDK
    Preparing search index...

    Function AuthButton

    • A button that signs the user in or out.

      This component will render the SignInModal component when the user is signed out, and a SignOutButton when the user is signed in. If the SDK is initializing (i.e. the initial user state is pending), the component will render a loading skeleton.

      Parameters

      • props: AuthButtonProps & Omit<HTMLAttributes<HTMLDivElement>, "children">

        The props for the component.

        The props for the AuthButton component.

        • Optionalchildren?: (
              props: {
                  Placeholder?: ReactNode;
                  SignOutButton?: ReactNode;
                  SignInModal?: ReactNode;
              } & { isInitialized: boolean; isSignedIn: boolean },
          ) => ReactNode
        • OptionalcloseOnSuccessDelay?: null | number

          The delay in milliseconds before the sign in modal is closed and the sign out button is shown after the sign in is successful. If null, the sign in modal will not be closed automatically. If 0, the sign in modal will be closed immediately.

        • OptionalonSignInSuccess?: () => void

          A function to call when the sign in is successful.

        • OptionalonSignInSuccessTransitionEnd?: () => void

          A function to call after the sign in success, when the dialog close transition ends.

        • OptionalonSignOutSuccess?: () => void

          A function to call when the sign out is successful.

        • Optionalplaceholder?: (props: Pick<HTMLAttributes<HTMLDivElement>, "className">) => ReactNode

          The placeholder to render while the CDP SDK is initializing.

        • OptionalsignOutButton?: (props: Pick<SignOutButtonProps, "onSuccess">) => ReactNode

          The sign out button, rendered when the user is signed in.

        • OptionalsignInModal?: (props: Pick<SignInModalProps, "open" | "setIsOpen" | "onSuccess">) => ReactNode

          The sign in modal, rendered when the user is signed out.

        • closeOnSuccessDelay

          The delay in milliseconds before the sign in modal is closed and the sign out button is shown after the sign in is successful.

        • onSignInSuccess

          The function to call when the sign in is successful.

        • onSignInSuccessTransitionEnd

          The function to call when the sign in success transition ends.

      Returns Element

      The rendered component.

      // Render the AuthButton component
      function App() {
        return (
          <CDPReactProvider config={config} theme={themeOverrides}>
            <AuthButton />
          </CDPReactProvider>
        );
      }

      // Render the AuthButton component with custom components

      // Define a custom placeholder
      const SmallPlaceholder: AuthButtonProps["placeholder"] = props => (
        <LoadingSkeleton {...props} className={`${props.className} small-placeholder`} />
      );

      // Define a custom sign in modal using the secondary variant and small size for the trigger button
      const SmallSecondarySignInModal: AuthButtonProps["signInModal"] = props => (
        <SignInModal {...props}>
          <SignInModalTrigger variant="secondary" size="sm" label="Log me in" />
        </SignInModal>
      );

      // Define a custom sign out button using the secondary variant and small size
      const SmallSecondarySignOutButton: AuthButtonProps["signOutButton"] = props => (
        <SignOutButton {...props} variant="secondary" size="sm">Log me out</SignOutButton>
      );

      function App() {
        return (
          <CDPReactProvider config={config} theme={themeOverrides}>
            <AuthButton
              placeholder={SmallPlaceholder}
              signInModal={SmallSecondarySignInModal}
              signOutButton={SmallSecondarySignOutButton}
           />
          </CDPReactProvider>
        );
      }

      // Render the AuthButton component with custom containers around the slot content
      function App() {
        return (
          <CDPReactProvider config={config} theme={themeOverrides}>
            <AuthButton className="auth-wrapper">
              {({ isInitialized, isSignedIn, Placeholder, SignOutButton, SignInModal }) => (
                <>
                  {!isInitialized && Placeholder}
                  {isInitialized && (
                    <div>
                      <p>Hello {isSignedIn ? "signed in" : "signed out"} user!</p>
                      {isSignedIn && <div>{SignOutButton}</div>}
                      {!isSignedIn && <div>{SignInModal}</div>}
                    </div>
                  )}
                </>
              )}
            </AuthButton>
          </CDPReactProvider>
        );
      }

    Settings

    Member Visibility