Abhishek•13mo ago

How to get url of the domain from the http action?

I am trying to redirect the user to frontend after I have done some validation on http action and I am using this util function to getURL

export const getURL = () => {
  let url =
    process?.env?.NEXT_PUBLIC_SITE_URL ?? // Set this to your site URL in production env.
    process?.env?.NEXT_PUBLIC_VERCEL_URL ?? // Automatically set by Vercel.
    "http://localhost:3000/";
  // Make sure to include `https://` when not localhost.
  url = url.includes("http") ? url : `https://${url}`;
  // Make sure to include a trailing `/`.
  url = url.charAt(url.length - 1) === "/" ? url : `${url}/`;
  return url;
};

export const getURL = () => {
  let url =
    process?.env?.NEXT_PUBLIC_SITE_URL ?? // Set this to your site URL in production env.
    process?.env?.NEXT_PUBLIC_VERCEL_URL ?? // Automatically set by Vercel.
    "http://localhost:3000/";
  // Make sure to include `https://` when not localhost.
  url = url.includes("http") ? url : `https://${url}`;
  // Make sure to include a trailing `/`.
  url = url.charAt(url.length - 1) === "/" ? url : `${url}/`;
  return url;
};

and In my http action I am doing this :

 if (errorQuery) {
    const errorQuery = params.get("error_description");
    console.log("Api Logs | Error in LinkedIn Api ", errorQuery);
    return Response.redirect(
      `${getURL()}/dashboard/settings?message=${errorQuery}`,
      302
    );
  }

 if (errorQuery) {
    const errorQuery = params.get("error_description");
    console.log("Api Logs | Error in LinkedIn Api ", errorQuery);
    return Response.redirect(
      `${getURL()}/dashboard/settings?message=${errorQuery}`,
      302
    );
  }

But its throwing error :

{
"code": "Uncaught ReferenceError: window is not defined",
"trace": "Uncaught ReferenceError: window is not defined\n    at getURL (../../node_modules/next/src/shared/lib/utils.ts:333:17)\n    at <anonymous> (../../convex/oauth.ts:68:6)\n    at async invokeFunction (../../node_modules/convex/src/server/impl/registration_impl.ts:70:11)\n    at async invokeHttpAction (../../node_modules/convex/src/server/impl/registration_impl.ts:397:0)\n    at async HttpRouter.runRequest (../../node_modules/convex/src/server/router.ts:275:16)\n"
}

{
"code": "Uncaught ReferenceError: window is not defined",
"trace": "Uncaught ReferenceError: window is not defined\n    at getURL (../../node_modules/next/src/shared/lib/utils.ts:333:17)\n    at <anonymous> (../../convex/oauth.ts:68:6)\n    at async invokeFunction (../../node_modules/convex/src/server/impl/registration_impl.ts:70:11)\n    at async invokeHttpAction (../../node_modules/convex/src/server/impl/registration_impl.ts:397:0)\n    at async HttpRouter.runRequest (../../node_modules/convex/src/server/router.ts:275:16)\n"
}

7 Replies

AbhishekOP•13mo ago

Wanted to ask is my approach correct or we can do it in other better way

jamwt•13mo ago

@Abhishek hey there. yep, because the http action runs on the server, not in the browser environment, it doesn't know what the app's current URL is so you'd need to return some error code and then have the app handle the error and do this re-routing app-side

AbhishekOP•13mo ago

@jamwt to use .env variable for localhost, production domain right?

jamwt•13mo ago

so, what's calling this http action? the browser? and it is using fetch? sorry, I need a little more background to be helpful

AbhishekOP•13mo ago

Sure @jamwt so here is repo - https://github.com/imaxisXD/AIvy-Post/blob/main/convex/oauth.ts so this is called by the LinkedIn service as a redirect URL to get the state and code and then call the LinkedIn API with the received code from the previous step.

GitHub

AIvy-Post/convex/oauth.ts at main · imaxisXD/AIvy-Post

Contribute to imaxisXD/AIvy-Post development by creating an account on GitHub.

ian•13mo ago

This might help: - if the redirect is to your website’s url, you’ll need to handle that either in the browser (for a static site eg) or in the server serving your website dynamically (eg the nextjs route). From there you read the state & code from your the window’s location / request url. You can then call convex with those as a parameter. If you set the convex backend as the redirect, eg with the …convex.site/myendpoint syntax, then your backend no longer knows what frontend initiated this request. So you could set an environment variable on your convex deployment that has the website url to redirect to after the code exchange. The trick is in this case the frontend needs to pass the redirect url of the convex.site url and the backend needs to know the frontend. In your oauth provider you’d be configuring the convex url as the redirect. Make sense?

AbhishekOP•13mo ago

Totally makes sense, I will go with a convex backend as the redirect approach Thanks @ian

How to get url of the domain from the http action?

Did you find this page helpful?