How to add Redirect Url for App Proxy Application when User logs in

Technical Q&A
1

I have a storefront in Shopify, and one of the tabs is a nextjs app which is hosted with app proxy. I have everything working, and I am trying to support users who are unauthenticated with Shopify.

I can detect if they are not authenticated and show a notification with a “Click here to login” link. The problem is, it always takes them to the orders page after the login, not back to the route they were on when I initiated the flow. I have tried a number of solutions but nothing is working including. Below is the loginUrl I am using in my tag as the href. The behavior described happens after the user clicks on the anchor.
1.)

const loginUrl = <STOREFRONT_DOMAIN>/customer_authentication/redirect?return_to=${currentUrl};

This approach gets them to the login page, they login, and it takes them to the orders page, instead of to my “current URL” value.

2.)

const loginUrl = <STOREFRONT_DOMAIN>/customer_authentication/login?return_to=${currentUrl};

I found this URL on line for some liquid apps or whatnot, but when I use this I get a Bad Request message in the main page.

Any help would be greatly appreciated!
2

I figured it out:

const storeDomain = getDomainUrl();

// The relative path you want to redirect to (the app proxy path):
const appProxyRoute = ‘/apps/rod-builder’;

// Build the login URL that Shopify will accept
// Important: The return_url must be relative (no domain).
const loginUrl = ${storeDomain}/customer_authentication/login?return_to=${encodeURIComponent(appProxyRoute)};

3

Hello **colchuck,

I am also facing the same problem. Can you help me with it? **
I am using Shopify auth redirection in Next.js. After login, users go to Shopify’s account page instead of my site. “account.cofferce.com/orders?locale=en&region_country=IN” instead i want to prad4x4.vercel.app/accounts

Login page -
‘use client’

import { useEffect } from ‘react’; export default function LoginRedirect() {

useEffect(() => { const shopifyDomain = process.env.NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN; const returnUrl = encodeURIComponent(’ https:prad4x4.vercel.app/accounts’); window.location.href = `htttps://${shopifyDomain}/account/login?return_url=${returnUrl}`; }, ); return ( Redirecting to Shopify login… );

}