User being redirected back to login page after subscription charge

Authentication & Access
1

Hi!

I am developing remix embeded app with node and I am having issues redirecting user back to my app after subscription charge approval. Basically I pick a plan, I get redirected to shopify’s page, I approve the charge, then when I get redirected back I am greeted with login page..

Here is my confirm page that I use:

import { redirect } from “react-router”;

import { activateSubscription } from “../models/Subscription.server”;

export const loader = async ({ request }) => {

const url = new URL(request.url);

const shop = url.searchParams.get(“shop”);

const chargeId = url.searchParams.get(“charge_id”);

if (!shop) {

throw new Response("Missing shop param", { status: 400 });

}

if (chargeId) {

await activateSubscription(shop, chargeId);

}

return redirect(`/auth?shop=${shop}`);

};

Any idea what could cause this?

2

Hi @Benjamin_Agic

I believe the issue is related to your confirm route; you’re redirecting to /auth?shop=${shop}, which triggers a full OAuth re-authentication flow. After the merchant approves the charge, Shopify redirects them back to your returnUrl, but at that point they already have a valid session. Sending them through /auth again restarts the auth process and lands them on a login page.

You should try using authenticate.admin(request) instead of manually parsing the shop param. This validates the existing session rather than starting a new auth flow. Also redirect to /app (or wherever your main app route is) instead of /auth.

3

Hey Liam!

Thanks for the response, I tried the following but still doesn’t work:

import { redirect } from “react-router”;

import { activateSubscription } from “../models/Subscription.server”;

import { authenticate } from “../shopify.server”;

export const loader = async ({ request }) => {

const url = new URL(request.url);

const shop = url.searchParams.get(“shop”);

const chargeId = url.searchParams.get(“charge_id”);

const { session } = await authenticate.admin(request);

if (chargeId) {

await activateSubscription(session.shop, chargeId);

}

return redirect(‘/app/plans’);

};

4

Hello,

you’re still using React Router redirect use the one returned by authenticate.admin instead:

// remove this
import { redirect } from "react-router";

import { authenticate } from "../shopify.server";
import { activateSubscription } from "../models/Subscription.server";

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

  const url = new URL(request.url);
  const chargeId = url.searchParams.get("charge_id");

  if (chargeId) {
    await activateSubscription(session.shop, chargeId);
  }

  return redirect(‘/app/plans’);

 /* or 
  return redirect("/app");
 */
  
};