Amen Forms
Authentication Components
developercomponents

Authentication Components

Connect the TanStack auth surface to Amen Identity with OIDC and PKCE.

The Forms shell includes sign-in, sign-up, OTP, verification, recovery, account security and account-deletion routes. They are TanStack pages; authentication itself is hosted by Amen Identity.

Session provider

SessionProvider from @amen/web is mounted once in routes/__root.tsx. Its configuration names three distinct audiences:

  • the Identity issuer and authorization endpoints;
  • Core as the OAuth resource server;
  • the Forms API that accepts Core-signed product sessions.
import { useSession } from "@amen/web";

export function SignInButton() {
  const session = useSession();
  return (
    <button
      type="button"
      onClick={() => void session.signIn(location.href)}
    >
      Sign in
    </button>
  );
}

Token boundary

MethodCredential returnedDestination
coreToken()Identity access token with Core audienceCore only
freshToken()short-lived product session minted by CoreForms API only

Both credentials live in memory and are never rendered, logged or written to browser storage.

User menu

features/sidebar/sidebar-user-button.tsx reads profile data from Core and calls session.signOut(). Account credential operations call Identity’s self-service endpoints; profile, avatar and erasure orchestration call Core.

The frontend does not import Better Auth, Prisma or any Identity database adapter. Seeing a Better Auth stack trace in this browser application therefore means Identity leaked an internal server failure through its HTTP response, not that the TanStack app owns auth.