Remove cookie upon token validation in beforeError hook

[zwelhtetyan]

If status is 401 then, I just want to remove token from cookie and redirect to login page. Don't want to retry agian. I use nextjs.

export const formatError: BeforeErrorHook = async (error) => {
  const { response } = error

  if (response.status === 401) {
    if (typeof window !== "undefined") {
      await ky.delete("/api/session")
    }
  }

  const isJsonContent = response.headers
    .get("content-type")
    ?.includes("application/json")

  if (isJsonContent) return response.json()

  return error
}

[sholladay]

From the code you provided, it looks like you're deleting the session cookie but then not doing any kind of redirect to the login page.

[zwelhtetyan]

From the code you provided, it looks like you're deleting the session cookie but then not doing any kind of redirect to the login page.

I have already done redirect(/login) on route handler

[zwelhtetyan]

My current way to delete token from cookie is that I redirect to fake url and check that url in middleware and handle removing logic by calling server action. Please let me know if you have better solution. Here is the code.

export const api = ky.create({
  prefixUrl: BASE_URL,
  hooks: {
    beforeRequest: [injectTokenBeforeRequest],
    beforeError: [
      async (error) => {
        const { response } = error

        if (response?.status === 401) {
            redirect(/invalid-token)
        }

        return error
      },
    ],
  },
})

// middleware.ts

export async function middleware(request: NextRequest) {
  const path = request.nextUrl.pathname

  if (path.startsWith("/invalid-token")) {
    await deleteSessionToken() // calling server action

    return NextResponse.redirect(new URL("/signin", request.nextUrl))
  }

  return NextResponse.next()
}

[sholladay]

I think the issue is that you are making requests from the client, which can follow redirects but doesn't navigate the page you are on, and then you send it a redirect from the backend. My suggestion is to use location.assign() to do the redirect on the client instead.

Something like:

export const api = ky.create({
  prefixUrl: BASE_URL,
  hooks: {
    beforeRequest: [injectTokenBeforeRequest],
    beforeError: [
      async (error) => {
        const { response } = error

        if (response?.status === 401) {
            await ky.delete('/api/session');
            location.assign('/invalid-token');
        }

        return error
      },
    ],
  },
})