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

zouker
Shopify Partner
3 0 0

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

 

Replies 4 (4)

juan_fero
Shopify Partner
2 0 1

Hello Zouker!

 

Stepped into this same problem just yesterday and solved it 🙂

 

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!

AswinAshok
Shopify Partner
1 0 0

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)

 

juan_fero
Shopify Partner
2 0 1

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")

 

ConstantineDev
Shopify Partner
9 0 2

 

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.