Shopify Embedded App - Sudden Login Page Appearance

App Bridge
1

Hey, we are building a Shopify App using Remix Template.
Everything is working as expected. For example, saving data to metafield, retrieving data, publishing it in storefront.

But sometimes, users are presented with login page which is auth.login/route.jsx of the template.

We dug up but could not found anything meaningful.

Any idea how can we avoid this? Or can we re-authenticate users programmatically and send them to the previous route or intended route?

This is happening randomly, but I was able to replicate it.

My working route: /app/plan?type=free
Login Appearance route: /app/plan
[See? just removing the parameter caused a redirect to login page.]

I also noticed in the Network Tab that, app/plan?hmac=****&locale=&session= which removed the type parameter along with value which is essential for my app.

2

Seeking your attention here.

@Liam-Shopify @Dylan

3

Hi @illusionist3886

Could you please provide more context around when this is happening?

Are users experiencing this after clicking a link? Or subscribing to a plan?

Or is it only after opening the app from the Admin sidebar? Or is it only when installing for the first time?

4

Hey @illusionist3886, along with Dylan, I think we would need a little more context on your current implementation to know for sure why this is happening.

Generally though, if you’re using Shopify managed billing, I’d suggest reviewing our documentation here on billing redirects to make sure this is implemented properly.

5

When a user opens any URL in new tab Ctrl + Click the login page appears everytime. The only condition need to be met is “The URL should have parameters”.

6

Thanks for sharing that. I believe I was able to replicate the same as you.

In my Remix app, when I tested Ctrl+clicking links with parameters, they consistently redirected to the login page and stripped the parameters. The fix that worked was preserving the current query string on internal app links.

Import useLocation and modify your links like this: <Link url={/app/plan${location.search}}>Plan Page</Link>.

This keeps both the required host parameter and your custom type=free parameter intact when users open links in new tabs, preventing the authentication redirect.

Let me know if that helps

7

Hey Delowar. Did the above help at all?

8

Hey @KyleG-Shopify and others,

Thanks for your ideas. I just came up on this thread as I also noticed one of my users ending up in auth.login.

To me it seems like the user might have had the app open for a long time (~10 hours) and then decided to do something, so probably the token had expired.

I tried adding the “location.search” in a fresh react router app, but when I navigate between pages, it has like a small flicker of the page I’m navigating to. It seems like it does a page refresh in that flicker.

However, If I don’t add location.search, then it seems to work without flicker/refresh, but doesn’t pass around the query params like “shop” and “host”.

Code that I tried:

<s-app-nav>
    <s-link href={`/app${location.search}`}>Home</s-link>
    <s-link href={`/app/additional${location.search}`}>Additional page</s-link>
</s-app-nav>