Skip to main content
function LinkAuth(props: LinkAuthProps): Element;
A component for managing linked authentication methods for the current user. This component displays a list of available authentication methods (email, phone, OAuth providers) and allows users to link or unlink them from their account.

​
Parameters

ParameterTypeDescription
propsLinkAuthPropsThe props for the component.

​
Returns

Element The LinkAuth component.

​
See

​
Examples

// Render the LinkAuth component with a custom success handler

function App() {
  return (
    <CDPReactProvider config={config}>
      <LinkAuth onLinkSuccess={method => console.log(`Linked ${method}`)} />
    </CDPReactProvider>
  );
}

// Recreate the default UI

function App() {
  return (
    <CDPReactProvider config={config}>
      <LinkAuth>
        <div className="header">
          <LinkAuthTitle />
          <LinkAuthFlowBackButton />
        </div>
        <div className="error">
          <LinkAuthError />
        </div>
        <LinkAuthFlow />
      </LinkAuth>
    </CDPReactProvider>
  );
}

// Add a message based on the LinkAuth state

function App() {
  return (
    <CDPReactProvider config={config}>
      <LinkAuth>
        {state => (
          <>
            <div className="header">
              <LinkAuthTitle />
              <LinkAuthFlowBackButton />
            </div>
            {state.methodToLink && (
              <p className="message">
                Linking {state.methodToLink}...
              </p>
            )}
            <div className="error">
              <LinkAuthError />
            </div>
            <LinkAuthFlow />
          </>
        )}
      </LinkAuth>
    </CDPReactProvider>
  );
}

// Customize LinkAuthItems to show a modal for non-OAuth methods instead of transitioning in place.

function CustomLinkAuthItems() {
  const { link, back } = useLinkAuthFlow();
  const { authMethods } = useAppConfig();
  const [openModal, setOpenModal] = useState<AuthMethod | null>(null);

  const modalMethods = useMemo(
    () => authMethods.filter(method => !method.startsWith("oauth:")),
    [authMethods],
  );

  const handleClose = useCallback(() => {
    setOpenModal(null);
    back();
  }, [back, setOpenModal]);

 const handleLink = useCallback(
   (method: AuthMethod) => {
     link(method);
     if (!method.startsWith("oauth:")) {
       setOpenModal(method);
     }
   },
   [link, setOpenModal],
 );

  return (
    <>
      <LinkAuthItems onLink={handleLink} />
      {modalMethods.map(method => {
        return (
          <SignInModal
            key={method}
            open={openModal === method}
            authMethods={[method]}
            setIsOpen={isOpen => (isOpen ? setOpenModal(method) : handleClose())}
            onSuccess={() => setOpenModal(null)}
          >
            <SignInModalTrigger>null</SignInModalTrigger>
          </SignInModal>
        );
      })}
    </>
  );
};

function App() {
  return (
    <CDPReactProvider config={config}>
      <LinkAuth>
        <h2>Link a profile</h2>
        <CustomLinkAuthItems />
      </LinkAuth>
    </CDPReactProvider>
  );
}

​
Further reading