I posted a message the other day that didn't get any responses but I thought I would clarify my issue here.
I want to describe the way I am currently doing my Auth flows as I'm not fully confident if I'm doing things right. I'm using Create React App (CRA) to build my application so its CSR not SSR.
Installation Flow
- A visitor navigates to app.myappdomain.com/install?shop=shopname.myshopify.com
- My CRA app generates a state variable and stores it in a cookie, this is just a random number/nonce.
- My CRA app redirects automatically to https://${shop}/admin/oauth/authorize?client_id=${shopify_api_key}&state=${state}&scope=read_products,read_content&redirect_uri=https://app.myappdomain.com/callback;
- The visitor is now in the shopify admin screen being prompted to install my app. So they click the "install" button.
- Shopify then redirects to the redirect_uri I specified with a bunch of additional URL variables.
- My CRA app takes those URL variables and passes them to my server function (api.mydomain.com/verifyCallback). This server function stores my shopify_api_key and shopify_secret_key as env variables and does the following:
- Validate the HMAC that was sent in the callback url params.
- Request a permanent Access Token
- Create a Cognito User and store the shopify Access Token against that user.
- Returns a Token to be used by the CRA app to login to cognito
- My CRA app logs in to Cognito using the shopname as the username and verifies with the Token returned in the previous step.
- The user can now use the app authenticated.
Post Install Flow
This is when a user goes to their shop admin and navigates to my embedded app through the admin apps menu.
- A user logs in to their shopify admin screen and navigates to my app via their apps menu.
- The app loads in an iframe in the shopify admin with some URL variables and a HMAC. This is described in the Verification section of this page https://shopify.dev/apps/auth/oauth
- My CRA app then calls a similar api method to my verifyCallback function mentioned above (api.mydomain.com/verifyLogin) which does the following:
- Verifies the HMAC passed from the URL params in my CRA app and the shopify_secret_key and shopify_api_key
- Returns a Token to be used by my CRA app to log in to Cognito
- My CRA app then uses the Token returned by the above API call and uses that and the shopname to log in to Cognito.
- The user can now browse the app authenticated.
- The CRA gets data from the back end via a graphql api (api.mydomain.com/graphql) which is authorized by the cognito user. And any requests to the shopify apis are made using the access_token stored against the cognito user.
- Whilst the user is logged in via cognito, the CRA app doesn't perform any further verification of page requests from the Shopify admin whilst the cognito user is logged in.
So I'm looking for some people to confirm if this is an acceptable way of authorising my embedded app?
It seems quite complex actually and I guess it would be much easier to create a SSR app with something like next.
Some concerns that I have are as follows:
I've read about Session tokens and Authorising embedded apps here https://shopify.dev/apps/auth/session-tokens/authenticate-an-embedded-app-using-session-tokens Given the fact I'm using a permanent access_token I'm assuming I don't need to use session tokens correct?
Once a user is logged in to cognito I no longer verify each page load request, given that I would need to call my verifyLogin api each time. Should I actually be verifying each page load request?
