SolidJS•2mo ago

Button to API route returns 404 but direct hit functions

I think I am running into an issue with the router and im 99% sure there is something I am missing. Im building out an oauth flow. I am able to get the access_token stored as a cookie. I am building the logout flow which is a SolidStart API route that accepts a GET request and just deletes the cookie. Hitting the api route with httpie or via curl returns a 302 to the home page as expected but the button that is a href to the same route returns a 404. I am at a loss why the API route can be hit from httpie, works if I manually go to localhost:3000/auth/logout, but not from the button. I can copy and paste the link the button has and it works, just not when I actually press the button. Here is the button:

import { Button } from "$/components/ui/button";
import { getRequestEvent, isServer } from "solid-js/web";

export function Logout() {
  const host = new URL(
    isServer ? getRequestEvent()!.request.url : window.location.href,
  ).host;

  const logoutUrl = import.meta.env.DEV
    ? `http://${host}/auth/logout`
    : `https://${host}auth/logout`;

  return (
    <Button as="a" href={logoutUrl} variant="destructive">
      Logout
    </Button>
  );
}

import { Button } from "$/components/ui/button";
import { getRequestEvent, isServer } from "solid-js/web";

export function Logout() {
  const host = new URL(
    isServer ? getRequestEvent()!.request.url : window.location.href,
  ).host;

  const logoutUrl = import.meta.env.DEV
    ? `http://${host}/auth/logout`
    : `https://${host}auth/logout`;

  return (
    <Button as="a" href={logoutUrl} variant="destructive">
      Logout
    </Button>
  );
}

And this is the src/routes/auth/logout.tsx:

import type { APIEvent } from "@solidjs/start/server";
import { deleteCookie } from "vinxi/http";

export async function GET({ nativeEvent }: APIEvent) {
  if (nativeEvent.web?.url?.pathname === "/auth/logout") {
    deleteCookie("auth_token");

    // TODO: Redirect to relative path homepage
    return Response.redirect("http://localhost:3000");
  }
}

import type { APIEvent } from "@solidjs/start/server";
import { deleteCookie } from "vinxi/http";

export async function GET({ nativeEvent }: APIEvent) {
  if (nativeEvent.web?.url?.pathname === "/auth/logout") {
    deleteCookie("auth_token");

    // TODO: Redirect to relative path homepage
    return Response.redirect("http://localhost:3000");
  }
}

3 Replies

midnight•2mo ago

Is this because I am client side routing to the API? Adding use server does not change the behavior. If so, how to I eject out of this behavior on a per route basis?

mdynnl•2mo ago

not per route basis but per link basis opt out or opt in to opt out: 1. rel=external 2. target=“_self” // or _top or anything valid to get the opt in mode 1. pass ‘explicitLinks’ in Router 2. use ‘<A />’ this was the default at some point, luckily it was made to be configurable https://github.com/solidjs/solid-router#router

midnight•2mo ago

OOOHHH that makes total sense! Thank you!!!!! I was looking through the docs but missed thie completely. this explains the exact behavior I was seeing.

Gaming

Programming

Button to API route returns 404 but direct hit functions