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,
  SignIn,
  SignUp,
  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>
      <a href="/sign-in">Sign in</a>
      <a href="/sign-up">Create account</a>
      <a href={hosted.userProfileUrl}>Account</a>
    </section>
  );
}

export function SignInPage() {
  return <SignIn returnTo={window.location.origin} projectName="My app" />;
}

export function SignUpPage() {
  return <SignUp returnTo={window.location.origin} projectName="My app" />;
}

<SignIn> and <SignUp> render the auth window in your app. Their Google action links directly to the SEQN Auth /auth/login handoff, then returns to your returnTo URL after the hosted session is created. HostedSignInLink and HostedSignUpLink remain available when you intentionally want to send users to the SEQN-hosted sign-in pages instead.

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.
Invitation email delivery is handled by SEQN Auth through hosted Croox when email is configured. Account recovery starts at SEQN Auth and hands off to Authentik; email verification workflows and payment collection are intentionally outside the current MVP.