redirect_uri and custom app logic after app install and auth

[Gabiras12]

Im trying to create a shopify app using remix. I started a new app using the cli and have a clean state.

This is my Shopify server

const shopify = shopifyApp({
  apiKey: process.env.SHOPIFY_API_KEY,
  apiSecretKey: process.env.SHOPIFY_API_SECRET || "",
  apiVersion: ApiVersion.July24,
  scopes: process.env.SCOPES?.split(","),
  appUrl: process.env.SHOPIFY_APP_URL || "",
  authPathPrefix: "/auth",
  sessionStorage: new PrismaSessionStorage(prisma),
  distribution: AppDistribution.AppStore,
  isEmbeddedApp: true,
  logger: {
    level: LogSeverity.Debug
  },
  restResources,
  future: {
    unstable_newEmbeddedAuthStrategy: false,
  },
  ...(process.env.SHOP_CUSTOM_DOMAIN
    ? { customShopDomains: [process.env.SHOP_CUSTOM_DOMAIN] }
    : {}),
});

I have a route:

<Route path="api/auth/callback" file="routes/api.auth.callback.tsx" />

And Im installing the app using this link:
https://rye-gabriel-test.myshopify.com/admin/oauth/authorize?client_id=X&scope=write_products&redire...

But the callback route never gets called.

[shopify-app/INFO] Shop hasn't installed app yet, redirecting to OAuth | {shop: rye-gabriel-test.myshopify.com}
14:34:30 │ remix │ [shopify-api/INFO] Beginning OAuth | {shop: rye-gabriel-test.myshopify.com, isOnline: false, callbackPath: /auth/callback}
14:34:30 │ remix │ [shopify-api/DEBUG] OAuth started, redirecting to https://rye-gabriel-test.myshopify.com/admin/oauth/authorize?client_id=751331473bf1956d6e575ce33f2d7...
A%2F%2Fnumerical-depot-baths-nuke.trycloudflare.com%2Fauth%2Fcallback&state=481131684731414&grant_options%5B%5D= | {shop: rye-gabriel-test.myshopify.com, isOnline: false}
14:34:30 │ remix │ [shopify-app/DEBUG] Authenticate returned a response
14:34:33 │ remix │ [shopify-app/INFO] Handling OAuth callback request
14:34:33 │ remix │ [shopify-api/INFO] Completing OAuth | {shop: rye-gabriel-test.myshopify.com}
14:34:33 │ remix │ [shopify-api/DEBUG] OAuth request is valid, requesting access token | {shop: rye-gabriel-test.myshopify.com}
14:34:33 │ remix │ [shopify-api/INFO] Creating new session | {shop: rye-gabriel-test.myshopify.com, isOnline: false}
14:34:33 │ remix │ [shopify-app/DEBUG] Request is valid, loaded session from OAuth callback | {shop: rye-gabriel-test.myshopify.com, isOnline: false}
14:34:33 │ remix │ [shopify-app/DEBUG] Authenticate returned a response

How can I make sure that the redirect_uri is called after the oauth process? 

[sherpabot]

Are you using Shopify 3.X CLI and remix or another template for React? 

You usually don't need to worry about oAuth with the CLI as it's out of the box ready to implement using shopify app dev in the command line. Your root toml file has the callback routes created and updated dynamically each time you run the command. 

it should be a server file as well and on complete brings you to the root route "/" (index file usually). 

[Gabiras12]

Im using the remix template from shopify team
and have this -> unstable_newEmbeddedAuthStrategy: false,

The Oauth works and I can make the app load and request data. But there is a specific flow in my app where I use the state param of OAuth. In the previous version (express) I could use this value and setup the store correctly. 

What we want to do is have this state value that was passed in the installation link to know who is installing. 

AfterAuth hook doesn't provide this value and we lost track of who is who in our system


rye-gabriel-test.myshopify.com/admin/oauth/authorize?client_id=X&scope=write_products&redirect_uri=[...]&state=customPARAMUSED

[sherpabot]

are you using prisma? 

if so run npx prsima studio. You should see the sessions. Inside your app.tsx file (I believe routes) you can see the loader function at the top and there you have access to admin and session. That file is called across all the pages. You can have logic there with Prisma to run something on install and save/call to Prisma to handle the state for new/existing apps. 

with the authenticate function from Shopify (in the loader function), you have the session object which also has the store and access token. 

[sherpabot]

 

you can do billing check logic here (example) and fetch the merchant's session as well. 

[Gabiras12]

Thanks for helping me out! 

So in our express app, we had one callback route that would run this custom logic. 
We're migrating to remix. 

I can see the session and authenticate normally with remix. And the state variable in the session object isn't the one we're passing in.

The use case we need is:
Our users send a installation link to shops. And when setting the app we link the store with the user of our system.
This is done in express with the "redirect_uri" and "state" params of OAuth process.

Where we create a link users can sent to shops to install the app with the identifier.
E.g.: anyshop.myshopify.com/admin/oauth/authorize?
client_id=appClientId

&scope=sampleScope

&redirect_uri=https://myapp.domain.com/custom/callback

&state=customDataThatIdentifyUser

In express shopify, it would call https://myapp.domain.com/custom/callback during the auth/installation process and I had the state property with the session and shop info.

Looks like in remix the callback always is: "auth/callback" but if a try to add this route it looks like shopify overrides it.
and the param a set in redirect_uri is never used. 

I need the state param from the installation link. the custom one. not the one shopify puts in i think.

Make sense?

[sherpabot]

Try updating the root TOML file to reflect the URL you are trying to push to. 

You will see something like this

[auth]
redirect_urls = [ https://YOUR_APP.herokuapp.com/auth/callback, ...]

Try modifying that page then run shopify app config use followed by shopify app deploy. run through the steps on the CLI and then try again. Ensure the URLs are not automatically updated, this will inject new cloudflare tunneling URLs and push it to the Apps confi page in partner dash . If that's the case I believe the --reset flag on shopify app dev should allow you to remove that. Similarly, you should be able to update that in the TOML file.