We are currently developing an embedded app that will consist of a React frontend and Django backend and I am wondering what is the most optimal way to handle the OAuth flow.
Scenario 1) Frontend and backend hosted on separate domains e.g. app.com and api.app.com respectively. Set "App URL" field to be frontend (app.com). When user installs or accesses the app, the frontend will be loaded. Then, simply make a request to the app backend passing the hmac, shop, timestamp, etc. parameters for verification. Receive response and handle redirection etc.
Scenario 2) Frontend and backend hosted on same domain, but different paths. E.g. app.com/api is the backend, app.com/anything-else will go to the frontend. Set "App URL" field to backend, something like: app.com/api/oauth. When the user installs or accesses the app, they will go directly to the backend, verification will be handled and then they will be redirected to a page on the frontend (or back to Shopify to confirm app scopes, etc.).
I'm wondering if there is a preferred approach, or if one would offer certain benefits over the other?
Thanks in advance!
The way I do it is #1 and it's worked out for me so far. One disadvantage of #2 I can think of is it might be harder to take advantage of certain App Bridge components (e.g., redirect), if you're sending them directly to your Django back-end vs. React front-end. I'd be curious what others do though as well.