Implementing the New Logout Process

This document describes how to implement the logout flow in apps that use this account frontend and the shared auth bundle.

Overview

The logout process uses a POST request to /api/logout, with rate limiting and CSRF-aware handling provided by @phpcreation/frontend-auth-authorization-flow-react-nextjs-bundle.

Backend: API Route

The app exposes a single logout endpoint:

Implementation (this repo)

The route lives in src/app/api/logout/route.ts:

1. Load tenant config via getAllConfigs(request).
2. Call the bundle’s logout(tenantName, request).
3. Wrap the handler with withApiRateLimit for the logout endpoint.

No request body is required; the handler uses the request (cookies/session) and tenant config.

Frontend: Calling Logout from Your App

From any app (or this one), trigger logout by sending a POST to the account app’s logout API.

Option 1: Form POST (recommended for CSRF)

Use a form that POSTs to the logout URL. This sends cookies and works well with CSRF if the auth bundle expects a form:

<form action="https://<account-app-origin>/api/logout" method="POST">
  <button type="submit">Log out</button>
</form>

Option 2: Fetch / axios

If your stack uses JavaScript and the bundle allows it:

await fetch('https://<account-app-origin>/api/logout', {
  method: 'POST',
  credentials: 'include', // send cookies
  headers: { 'Content-Type': 'application/json' },
});
// then redirect to login or home, e.g.:
// window.location.href = '/login';

Replace <account-app-origin> with the actual account app base URL (e.g. from env).

Option 3: Link that triggers a form

For a “Log out” link that still uses POST (e.g. for CSRF), use a hidden form and submit it on click:

function LogoutButton() {
  const formRef = useRef<HTMLFormElement>(null);
  const logoutUrl = process.env.NEXT_PUBLIC_ACCOUNT_LOGOUT_URL ?? '/api/logout';
 
  return (
    <>
      <form ref={formRef} action={logoutUrl} method="POST" hidden />
      <button type="button" onClick={() => formRef.current?.submit()}>
        Log out
      </button>
    </>
  );
}

Checklist for New Apps

• Use POST (not GET) to /api/logout.
• Use the account app’s base URL for logout (same origin or configured domain).
• Send cookies: credentials: 'include' for fetch, or use a form POST.
• After a successful logout response, redirect the user (e.g. to login or home).
• Respect rate limiting: avoid repeated logout calls in short succession.

Related

• Route implementation: src/app/api/logout/route.ts
• Bundle: @phpcreation/frontend-auth-authorization-flow-react-nextjs-bundle (logout in api-functions)
• General API overview: API Calls