vikejs/vike

Client-only guard() hook

tszyan opened this issue · 12 comments

Description

It appears that the guard() hook is not functioning correctly when used with the following configuration:

  meta: {
    guard: {
      env: {
        server: false,
        client: true,
      }
    }
  }

No additional logic is implemented within the guard, just:

throw render(404);

Upon the initial page load or reloading with F5, the page loads without the guard hook being triggered.

It's the same behavior observed with Solid and React batijs scaffolds.

What is it you're trying to achieve?

It isn't clear to me what should happen with that configuration. Because the main purpose of the guard() hook is to protect unauthorized access, e.g. to protect an admin page from regular users. Given such use case calling guard() only the server-side is potentially a safety hazard, but maybe that's something we can warn the user about.

Closing but let's continue the conversation and let's see if the guard() can be improved.

In my case, guard() is necessary to display the authentication page if the user is not authenticated (no token or it has expired).

Utilized:

  • REST API (server-side not in JavaScript)
  • Authentication using access and refresh tokens.

No server-side JavaScript logic for data retrieval, checks, etc. is planned.

In guard(), I plan the following:

  1. Reading the token from the browser's local storage.
  2. Checking the token's expiration date (JWT token stores this information).
  3. Rendering "/auth" if any of the first two steps are not successfully passed.

If the token is valid, another layout and page components are used, within which requests to the REST API are made, and server-side checks are performed to decide which response to return - whether to send requested data, prompt for re-authentication, or something else.

Correct me if I'm wrong, but I don't think what you want makes sense. Because the very first page the user visits triggers an SSR rendering and you'll need to decide whether to redirect the user already at that point. Thus you need to have your guard() hook be called on the server-side.

I apologize for not paying attention to the topic I initiated myself.

To further clarify, the issue is related to a SPA scenario, so ssr is set to false. In this context, I believe it makes perfect sense to handle the redirection on the client side.

Indeed, that makes sense. Re-opening.