I'm developing a sales channel and it seems a bit unclear, how should I finish the app installation process securely.
The app has client-server architecture, react client and node.js server.
Expected installation flow:
1. After user chooses to install the app he gets redirected to frontend.ngrok.io/path/to/installation.
2. The query from this page is being sent to backend, a url to shopify permissions page is received in response and user gets redirected.
3. After the user grants permissions he gets redirected to our app at his shop page with the code in query at apps installation callback page.
4. The code is being passed from this page to backend, and access_token is received as response.
The issue is that I can't set the shop's url as the redirect_uri for the installation callback. I'm getting an error saying the url is not is the whitelist when attempting to do so. So I have to set the backend's callback endpoint as the redirect_uri and pass the access_token when redirecting from there to the shop in query which doesn't seem secure.
Am I missing something? Any hints on how should I finish the installation in a secure way?
Code snippets of your auth sequence might help find the problem - I assume it's similar to the tutorials, but there are always extra tweaks that you may have missed that the tutorials don't cover. And if you have further information that would help.
So in your App Setup:
App URL: https://0b62265dxx22.ngrok.io/ <---- your app url
Whitelist redirection URL(s): https://0b62265dxx22.ngrok.io/auth/callback <---- whitelisted callback. No typos?
You have to have at least one redirect url whitelisted.
Hope this helps a little.
The problem is that I would prefer to be redirected to shop-name.myshopify.com/apps/app-name/callback?code=... and handle the installation end from there, by parsing the query from my frontend_url/callback. I can't add the shop-name.shopify.com to the whitelist.
My current working solution is to redirect to backend.
So the App URL is ab123.ngrok.io/auth (at frontend), the whitelist redirection url is ab124.ngrok.io/auth/callback (at backend). But backend callback, after processing the received code, redirects to the shop with access_token in query, and doesn't seem secure.
Maybe there's a different approach to this, other than listed above?
I spent many hours reading about OAuth 2 and also creating my own implementation to see how it works, as well as spending a great deal of time Shopify understanding app installs and how it all hangs together.
To this end, I'd suggest that if you are trying to follow an installation flow contrary to Shopify's recommend flow then you are onto a losing battle.