Skip to main content
function LinkAuthModal(props: LinkAuthModalProps): Element;
A link auth modal component that wraps the LinkAuth component.

​
Parameters

ParameterTypeDescription
propsLinkAuthModalPropsThe props for the LinkAuthModal component.

​
Returns

Element The LinkAuthModal component.

​
See

​
Examples

// Render the LinkAuthModal component with a custom success handler
function App() {
  const handleLinkSuccess = (method: string) => {
    console.log(`Successfully linked ${method}`);
  };

  return (
    <CDPReactProvider config={config}>
      <LinkAuthModal onLinkSuccess={handleLinkSuccess} />
    </CDPReactProvider>
  );
}

// Render the LinkAuthModal component with a custom trigger button
function App() {
  return (
    <CDPReactProvider config={config}>
      <LinkAuthModal>
        <button type="button">Manage linked accounts</button>
      </LinkAuthModal>
    </CDPReactProvider>
  );
}

// Render the LinkAuthModal component with a custom trigger button label
function App() {
  return (
    <CDPReactProvider config={config}>
      <LinkAuthModal>
        <LinkAuthModalTrigger variant="secondary" label="Link more accounts" />
      </LinkAuthModal>
    </CDPReactProvider>
  );
}

// Render the LinkAuthModal with controlled open state
function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <CDPReactProvider config={config}>
      <LinkAuthModal open={isOpen} setIsOpen={setIsOpen}>
        <LinkAuthModalTrigger />
        <LinkAuthModalContent />
      </LinkAuthModal>
    </CDPReactProvider>
  );
}