Convert Sign-Out API to POST and Implement Form-Based Sign-Out

[JaleelB]

Issue Description

The current implementation of the sign-out functionality uses a GET API endpoint and a Next.js Link component. This has led to unexpected behavior where users are being signed out unintentionally, particularly in production environments.

Symptoms

• Users are unexpectedly redirected to the sign-in page while navigating the app via different page routes.

Root Cause Analysis

The root cause of this issue is a combination of factors:

1. GET API for State-Changing Action: The sign-out API is currently implemented as a GET endpoint. GET requests should be used for retrieving data, not for actions that change server-side state.

2. Next.js Link Prefetching: Next.js automatically prefetches links in the viewport for performance optimization. This includes API routes.

3. Unintended API Calls: Due to the combination of points 1 and 2, the sign-out API is being called unintentionally when the sign-out link enters the viewport, even if the user doesn't click it.

Proposed Changes

To address this issue, I propose the following changes:

1. Convert the sign-out API from GET to POST.
2. Replace the Next.js Link component with a form submission for the sign-out action.

Why These Changes?

1. POST for State-Changing Actions:

   • POST requests are appropriate for actions that change server-side state.
   • They're not prefetched by Next.js, preventing unintended sign-outs.
   • They're less vulnerable to CSRF attacks.

2. Form Submission Instead of Link:

   • Forms are semantically correct for actions like sign-out.
   • They provide better accessibility.
   • They work correctly with POST requests.

3. Preventing Accidental Sign-Outs:

   • These changes ensure that sign-out only occurs when explicitly triggered by the user.