App development App instalation Auth0 Flow with

[BenzaValueDev]

Greetings, a pleasure. I wanted to ask if you could help me a little with the development of a Shopify app, I'm just starting out and there are things that are not clear to me. This app would be to show store product recommendations within the client's store page. But for this, I need to bring the recommendation data from the backend of my site, outside of shopify. My understanding is that this can be done by using the proxy and making requests to my backend using this. This way, I wouldn't use the backend of the shopify app much, and instead use the backend of my app through the proxy. Is this a correct approach to the development of this app? Is it okay to just use my own API without using the backend brought with the app template when creating it?

And on the other hand, I am also looking at how to carry out the installation flow to obtain the access token to crawl the products in the store, but when the app reaches my backend and then tries to redirect to the callback address so that it can receive the token, the call fails, or it doesn't seem to find the app. This is good ? or the redirection and installation from where should it be done?

[Liam]

Hi BenzaValueDev,

Yes - You can use Shopify's app proxy feature to fetch data from your external backend. This is a common method for displaying dynamic data in a Shopify store. It allows you to fetch and display data from an external source without worrying about Cross-origin Security Concerns (CORS).

As for using your own API over Shopify's backend, it's definitely possible. However, you would still need to use Shopify's API to access store data, such as product information or customer details. But for the recommendation system logic and data, you can indeed use your own API.

Regarding the installation flow, it's important to ensure that the redirect URL provided matches the one specified in your app settings in your Shopify Partner Dashboard. The authorization process involves several redirects between your app, Shopify, and the user's browser, and at the end of this process, an access token is granted to your app. This token is needed for your app to access the shop's data. The issue you're experiencing might be due to a mismatch in redirect URLs or an incorrect setup of the OAuth process.

Hope this helps!!

[BenzaValueDev]

Hi Liam! Thank you for responding, all this information is very useful to me. Even so, it is not very clear to me how the redirection flow is done, can it be done only from the backend of my app? Or should I use the page of my app to make the redirects, and then at the end, send the access token from my frontend to my backend? This is the part that generates the most confusion for me.

[Liam]

Hi again Benza,

The OAuth flow typically involves both your app's frontend and backend, but most of the critical steps occur on the backend. Here's a simplified breakdown:

1. Initiation from the Frontend: When a store owner installs your app, the process starts from your app's frontend. This is usually a button or link on your app's landing page that directs the user to Shopify's authorization prompt.

2. Authorization URL: The initial redirection is to an authorization URL provided by Shopify. This URL is constructed on your backend and includes parameters like the client_id (your app's API key), the scopes your app is requesting access to, and a redirect_uri which is the URL Shopify will send the store owner back to after they authorize the app.

3. User Approval: The store owner is then taken to a Shopify page where they can approve or deny the requested permissions. This is handled entirely by Shopify and doesn't involve your app directly.

4. Redirection to redirect_uri: Once the store owner approves the app, Shopify redirects them to the redirect_uri you specified. This should be a URL on your backend.

5. Exchange of Temporary Code for Access Token: The redirection back to your app includes a temporary code in the URL parameters. Your backend should immediately exchange this code with Shopify for a permanent access token. This exchange is a backend-to-backend communication between your server and Shopify's servers.

6. Storing the Access Token: After receiving the access token, you should store it securely on your backend. This token is what your app will use for future API requests to access that particular store's data.

7. Final Redirection to Your App's Main Interface: Finally, you can redirect the user from your backend to the main interface of your app, typically a frontend page, where they can start using your app.

Hope this helps!