redirecting from API route
Hey all! I'm trying to redirect to a page (/app) from a API get route after exchanging the token with supabase.
For some reason it works when using locally and it behaves correctly, but it doesn't wotk when deployed (on Vercel).
Am I doing something really wrong / missing something?
I've even tried to manually return a response instead of using the
redirect but the behaviour is the same.
The whole route code looks like this
Appreciate any pointers/ suggestion!2 Replies
HI! I'm having some issues with redirecting after exchanging a token with Supabase in my API route deployed on Vercel. The code works fine locally but behaves differently when deployed. I've tried a manual response and ensuring everything is configured correctly.
Here’s how you could approach a modified response logic
export async function GET(event: APIEvent) {
const { request } = event;
const requestUrl = new URL(request.url);
const code = requestUrl.searchParams.get("code");
if (!code) {
console.log("NO CODE");
return Response.redirect(new URL("/app", request.url), 302);
}
const supabase = createClient();
const { error } = await supabase.auth.exchangeCodeForSession(code);
if (error) {
console.log("LOGIN ERROR", error);
return Response.error(); // You might want to return an error response
}
console.log("Redirection to /app");
return Response.redirect(new URL("/app", request.url), 302);
}
I wish my answer is a little helpfull for u
I know nothing of Vercel but let me make this observation:
On the server side you are processing an API request but are trying to effect an application level redirect (not a redirect of the API request).
It might make more sense to return an error status (400 (malformed request as
code is a required parameter) or 401 (if authentication will provide the necessary code)) from the API route and let the client(-side router) make the necessary navigation when it receives a non-OK status.
So inside the query you'll use the fetch as shown here:
https://docs.solidjs.com/solid-router/reference/data-apis/query#query
… and upon determining the response status (i.e. failure to provide a suitable payload) then simply throw the redirect on the client side as shown here:
https://docs.solidjs.com/solid-router/reference/response-helpers/redirect#redirect
… to get the desired application level redirect.
Aside: I'd lean towards storing that code at least inside session data, outside of the view of the URL (and away from client-side JS access).MDN Web Docs
400 Bad Request - HTTP | MDN
The HTTP 400 Bad Request client error response status code indicates that the server would not process the request due to something the server considered to be a client error.
The reason for a 400 response is typically due to malformed request syntax, invalid request message framing, or deceptive request routing.
MDN Web Docs
401 Unauthorized - HTTP | MDN
The HTTP 401 Unauthorized client error response status code indicates that a request was not successful because it lacks valid authentication credentials for the requested resource.
This status code is sent with an HTTP WWW-Authenticate response header that contains information on the authentication scheme the server expects the client to includ...
MDN Web Docs
Response: ok property - Web APIs | MDN
The ok read-only property of the Response interface contains a Boolean stating whether the response was successful (status in the range 200-299) or not.