How to redirect user on client side with remix template | Shopify APP

Retired Boards Appdev Tools
,
1

I’m making a Shopify app where the user needs to log into their account to be able to use the app. When the login is successful I want the user to be redirected, but I can’t do it.

what I’ve already tried:

redirect('/app/produtcs');

window.location.href = '/app/produtcs';

The problem I’m having is that when redirecting it sends me to the correct page but displays this screen instead of the page I want. remembering that I am trying to do server-side redirection, without the loader.

imagem_2024-03-04_124026176.png
imagem_2024-03-04_124026176.png976×213 5.66 KB

4 Likes
2

Hello Zouker!

Stepped into this same problem just yesterday and solved it :slightly_smiling_face:

You need to use the redirect function from the authenticate method, like this:

const { admin, redirect } = await authenticate.admin(request);
redirect('some/where');

Hope it helps!

2 Likes
3

Hey

I used redirect function from the authenticate, here is my code:

export const loader = async ({ request }: LoaderFunctionArgs) => {
  const { redirect } = await authenticate.admin(request);

  return redirect("/app/rule");
};

It is working in development but in production got this error.

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

at Xc (/app/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:77:77)

at Z (/app/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:78:89)

at Xc (/app/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:72:481)

at Z (/app/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:78:89)

at Yc (/app/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:81:98)

at Xc (/app/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:73:145)

at Z (/app/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:78:89)

at Xc (/app/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:72:481)

at Xc (/app/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:76:40)

at Z (/app/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:78:89)
1 Like
4

Mmm… That looks like a Remix problem, maybe inside the “/app/rule” loader.

By the way, you don’t need to return the redirect. You can throw it to let Remix know that the loader function will not finish there. I’m not sure if this would fix the problem, but I’d definitely give it a try.

throw redirect("/app/rule")
1 Like
5 
export const loader = async ({ request }: LoaderFunctionArgs) => {
  const url = new URL(request.url);
  throw redirect(`/app?${url.searchParams.toString()}`);
};

You have an example in the index.tsx file. You need to add query parameters. Everything works well if you do so.

6

In my case it only works if I redirect to local route, however I need to redirect to billing api confirmation url and it is not working

7

same issue…

8

i have the same exact problem, i need to make a one time charge and i have no idea how to do it. From the frontend i use window.location.href =
https://something123.myshopify.com/admin/charges/157109780481/3114926324/ApplicationCharge/confirm_application_ch
arge?signature=BAh7BzoHaWRsKwf0AKq5OhJhdXRvX2FjdGl2YXRlVA%3D%3D–5ee11e25e092855ab463524ce3e99ab7ff257ae8

but it breaks and it shows “Refused to display ‘https://admin.shopify.com/’ in a frame because it set ‘X-Frame-Options’ to ‘deny’.” in the console.

9

It’s the same issue: I can’t redirect the user to the index route if it isOnboardCompleted. After redirection, the user’s session is lost and automatically redirected to /auth/login.

10

I’m still facing with the same problem at the moment. Anyone have solution?