SEQN Auth React Helpers

The React helper is exported from @seqn/auth-js/react. It does not import React directly. Pass the React runtime you already use, then consume the generated provider and hooks.

import * as React from "react";
import { createSeqnAuthReact } from "@seqn/auth-js/react";

const {
  SeqnAuthProvider,
  useSeqnAuth,
  useSeqnPublicConfig,
  useSeqnSession,
  HostedSignInLink,
  HostedSignUpLink,
  SignedIn,
  SignedOut
} = createSeqnAuthReact(React);

export function AuthRoot({ children }) {
  return (
    <SeqnAuthProvider
      baseUrl={import.meta.env.VITE_SEQN_AUTH_BASE_URL}
      publishableKey={import.meta.env.VITE_SEQN_AUTH_PUBLISHABLE_KEY}
    >
      {children}
    </SeqnAuthProvider>
  );
}

export function HomeAuthCard() {
  const { hosted } = useSeqnAuth();
  const { config, loading } = useSeqnPublicConfig();

  return (
    <section>
      <p>{loading ? "Loading auth config..." : config?.application?.name}</p>
      <HostedSignInLink returnTo={window.location.href}>Sign in</HostedSignInLink>
      <HostedSignUpLink returnTo={window.location.href}>Create account</HostedSignUpLink>
      <a href={hosted.userProfileUrl}>Account</a>
    </section>
  );
}

Session loading

SeqnAuthProvider can optionally load the hosted session from /v1/me:

<SeqnAuthProvider publishableKey={key} loadSession>
  <SignedIn>
    <Dashboard />
  </SignedIn>
  <SignedOut>
    <MarketingPage />
  </SignedOut>
</SeqnAuthProvider>

Session loading uses browser credentials so hosted cookies can be sent to the SEQN Auth API. Treat this as a UI convenience. Backends should still verify their own trusted session or secret-key contract.

Notes

• pk_live_ and pk_test_ values can be used in browser code.
• Never expose sk_live_ or sk_test_ values in React.
• Email delivery and payment collection are intentionally outside this MVP.