fix: client signIn/signOut must POST with CSRF, not GET (#51)

signIn/signOut navigated with a GET to /api/auth/signin/:provider, but
Auth.js v5 only accepts a CSRF-protected POST there, so the GET redirected
to /auth/error?error=Configuration. They now fetch /api/auth/csrf and submit
a hidden POST form. The playground home button exercises the helper and
logout is one-click. Unit tests assert the POST behaviour; e2e covers both
sign-in paths and logout.

Author: mridang

playground/src/components/SignOutButton.astro

@@ -2,10 +2,20 @@
 
 ---
 
-<a
-  href="/api/auth/signout?callbackUrl=%2Fapi%2Fauth%2Flogout%2Fcallback"
+<button
+  type="button"
   data-testid="signout-button"
   class="cursor-pointer rounded-lg bg-red-500 px-4 py-2 text-sm font-medium text-white transition duration-200 hover:bg-red-600"
 >
   Sign out
-</a>
+</button>
+
+<script>
+  import { signOut } from '@zitadel/astro-auth/client';
+
+  document
+    .querySelector('[data-testid="signout-button"]')
+    ?.addEventListener('click', () => {
+      void signOut({ callbackUrl: '/' });
+    });
+</script>

playground/src/pages/index.astro

@@ -120,19 +120,26 @@ const session = await getSession(Astro.request, authConfig);
                 </div>
               </div>
               <div class="mb-6 flex flex-col gap-3">
-                <a
-                  href="/api/auth/signin"
-                  data-testid="signin-credentials"
+                <button
+                  type="button"
+                  data-testid="signin-oauth"
                   class="flex w-full cursor-pointer items-center justify-center rounded-lg bg-blue-600 px-4 py-3 font-semibold text-white transition duration-200 hover:bg-blue-700"
                 >
-                  Sign in with Credentials
-                </a>
+                  Sign in with OAuth
+                </button>
+                <button
+                  type="button"
+                  data-testid="signin-default"
+                  class="flex w-full cursor-pointer items-center justify-center rounded-lg border border-blue-600 px-4 py-3 font-semibold text-blue-600 transition duration-200 hover:bg-blue-50"
+                >
+                  Sign in
+                </button>
                 <a
                   href="/api/auth/signin"
-                  data-testid="signin-oauth"
-                  class="flex w-full cursor-pointer items-center justify-center rounded-lg border border-blue-600 px-4 py-3 font-semibold text-blue-600 transition duration-200 hover:bg-blue-50"
+                  data-testid="signin-credentials"
+                  class="flex w-full cursor-pointer items-center justify-center text-sm font-medium text-blue-600 transition duration-200 hover:text-blue-700"
                 >
-                  Sign in with OAuth
+                  Sign in with Credentials
                 </a>
               </div>
               <div class="text-center">
@@ -197,3 +204,18 @@ const session = await getSession(Astro.request, authConfig);
   </main>
   <Footer />
 </Layout>
+
+<script>
+  import { signIn } from '@zitadel/astro-auth/client';
+
+  document
+    .querySelector('[data-testid="signin-oauth"]')
+    ?.addEventListener('click', () => {
+      void signIn('mock-oidc', { callbackUrl: '/profile' });
+    });
+  document
+    .querySelector('[data-testid="signin-default"]')
+    ?.addEventListener('click', () => {
+      void signIn();
+    });
+</script>

spec/credentials.test.ts

@@ -15,8 +15,11 @@ async function signInWithCredentials(page: Page): Promise<void> {
 }
 
 async function signOutUser(page: Page): Promise<void> {
+  // The logout control is now a one-click client `signOut()` button: it posts
+  // to /api/auth/signout directly, with no interstitial confirmation page.
+  // Wait for hydration so the click handler is wired before we click.
+  await page.waitForLoadState('networkidle');
   await page.click('[data-testid="signout-button"]');
-  await page.locator('button[type="submit"]').click();
   await page.waitForURL((url) => !url.pathname.startsWith('/api/auth/'), {
     timeout: 10_000,
   });

spec/oauth.test.ts

@@ -30,6 +30,27 @@ async function signInWithOAuth(page: Page): Promise<void> {
   await page.waitForURL(/\/profile/, { timeout: 30_000 });
 }
 
+/**
+ * Drives the login flow from the home page's client `signIn('mock-oidc')`
+ * button. Because the helper performs a CSRF-protected POST straight to
+ * `/api/auth/signin/mock-oidc`, the browser lands directly on the Mock OIDC
+ * username form — there is no Auth.js provider chooser to click through. This
+ * is the path that regressed to the Configuration error before the fix.
+ *
+ * @param page - The Playwright Page instance
+ * @returns Resolves once the browser has navigated to /profile
+ */
+async function signInWithClientHelper(page: Page): Promise<void> {
+  // Wait for hydration: the button calls the client `signIn` helper, so its
+  // click handler is only wired once the page's JavaScript has loaded.
+  await page.goto('/', { waitUntil: 'networkidle' });
+  await page.click('[data-testid="signin-oauth"]');
+  await page.waitForSelector('input[name="username"]', { timeout: 30_000 });
+  await page.fill('input[name="username"]', 'testuser');
+  await page.locator('[type="submit"]').first().click();
+  await page.waitForURL(/\/profile/, { timeout: 30_000 });
+}
+
 test.beforeAll(
   async () => {
     container = await new GenericContainer(
@@ -95,39 +116,41 @@ test.afterAll(async () => {
 
 test('homepage shows unauthenticated state', async ({ page }) => {
   await page.goto('/');
+  await expect(page.locator('[data-testid="signin-oauth"]')).toBeVisible();
+  await expect(page.locator('[data-testid="signin-default"]')).toBeVisible();
   await expect(
     page.locator('[data-testid="signin-credentials"]'),
   ).toBeVisible();
-  await expect(page.locator('[data-testid="signin-oauth"]')).toBeVisible();
 });
 
-test('OAuth sign-in via signin-oauth button', async ({ page }) => {
-  await page.goto('/');
-  await page.click('[data-testid="signin-oauth"]');
-  // Auth.js renders a provider confirmation page for GET /signin/:provider;
-  // click through it to initiate the actual OAuth flow.
-  await page.waitForSelector('text=Mock OIDC', { timeout: 15_000 });
-  await page.click('text=Mock OIDC');
-  await page.waitForSelector('input[name="username"]', { timeout: 15_000 });
-  await page.fill('input[name="username"]', 'testuser');
-  await page.locator('[type="submit"]').first().click();
-  await page.waitForURL(/\/profile/, { timeout: 30_000 });
+// Side path: the home page's client `signIn('mock-oidc')` button. This
+// exercises the SDK client helper end-to-end — the path that previously threw
+// a Configuration error because the helper issued a GET instead of a POST.
+test('OAuth sign-in via home client-helper button', async ({ page }) => {
+  await signInWithClientHelper(page);
+  await expect(page).toHaveURL(/\/profile/);
   await expect(page.locator('[data-testid="signout-button"]')).toBeVisible();
 });
 
+// Direct route: the Auth.js-rendered provider chooser at /api/auth/signin.
 test('full OAuth flow via Auth.js sign-in page', async ({ page }) => {
   await signInWithOAuth(page);
   await expect(page).toHaveURL(/\/profile/);
 });
 
-test('full sign-in and sign-out cycle', async ({ page }) => {
-  await signInWithOAuth(page);
-  await page.goto('/');
+// Logout component: the one-click client `signOut()` button on the profile
+// page clears the session and returns to the unauthenticated home page.
+test('sign-out via logout component', async ({ page }) => {
+  await signInWithClientHelper(page);
+  // Wait for hydration so the one-click signOut handler is wired.
+  await page.waitForLoadState('networkidle');
   await page.click('[data-testid="signout-button"]');
-  await page.locator('button[type="submit"]').click();
-  await page.waitForURL((url) => !url.pathname.startsWith('/api/auth/'), {
-    timeout: 10_000,
+  // signOut clears the session, so the protected profile page is no longer
+  // reachable (the app bounces unauthenticated users away from it).
+  await page.waitForURL((url) => !url.pathname.startsWith('/profile'), {
+    timeout: 30_000,
   });
+  await page.goto('/');
   await expect(
     page.locator('[data-testid="signin-credentials"]'),
   ).toBeVisible();

src/client.ts

@@ -1,7 +1,44 @@
+const BASE_PATH = '/api/auth';
+
+/**
+ * Submits a CSRF-protected POST form to an Auth.js action endpoint.
+ *
+ * Auth.js v5 only accepts POST requests carrying a CSRF token at its action
+ * endpoints; a plain GET navigation is rejected as an `UnknownAction` and
+ * redirects to the Configuration error page. We fetch the current CSRF token
+ * and submit a hidden form so the browser performs a real POST navigation.
+ *
+ * @param action - The Auth.js endpoint to post to
+ * @param fields - Extra hidden fields to include alongside the CSRF token
+ */
+async function postToAuth(
+  action: string,
+  fields: Record<string, string>,
+): Promise<void> {
+  const res = await fetch(`${BASE_PATH}/csrf`);
+  const { csrfToken } = (await res.json()) as { csrfToken: string };
+
+  const form = document.createElement('form');
+  form.method = 'POST';
+  form.action = action;
+
+  for (const [name, value] of Object.entries({ csrfToken, ...fields })) {
+    const input = document.createElement('input');
+    input.type = 'hidden';
+    input.name = name;
+    input.value = value;
+    form.appendChild(input);
+  }
+
+  document.body.appendChild(form);
+  form.submit();
+}
+
 /**
  * Client-side sign-in helper for Astro applications.
  *
- * @param provider - The provider ID to sign in with
+ * @param provider - The provider ID to sign in with. When omitted, the request
+ *   targets the provider chooser page.
  * @param options - Sign-in options
  *
  * @public
@@ -10,16 +47,14 @@ export async function signIn(
   provider?: string,
   options: { callbackUrl?: string } = {},
 ): Promise<void> {
-  const basePath = '/api/auth';
-  const params = new URLSearchParams();
+  const action = provider
+    ? `${BASE_PATH}/signin/${provider}`
+    : `${BASE_PATH}/signin`;
+  const fields: Record<string, string> = {};
   if (options.callbackUrl) {
-    params.set('callbackUrl', options.callbackUrl);
+    fields.callbackUrl = options.callbackUrl;
   }
-  const paramStr = params.toString();
-  const url = provider
-    ? `${basePath}/signin/${provider}${paramStr ? `?${paramStr}` : ''}`
-    : `${basePath}/signin${paramStr ? `?${paramStr}` : ''}`;
-  window.location.href = url;
+  await postToAuth(action, fields);
 }
 
 /**
@@ -32,11 +67,9 @@ export async function signIn(
 export async function signOut(
   options: { callbackUrl?: string } = {},
 ): Promise<void> {
-  const basePath = '/api/auth';
-  const params = new URLSearchParams();
+  const fields: Record<string, string> = {};
   if (options.callbackUrl) {
-    params.set('callbackUrl', options.callbackUrl);
+    fields.callbackUrl = options.callbackUrl;
   }
-  const paramStr = params.toString();
-  window.location.href = `${basePath}/signout${paramStr ? `?${paramStr}` : ''}`;
+  await postToAuth(`${BASE_PATH}/signout`, fields);
 }