Introducing cookieless authentication beta with App Bridge

[Liam]

With the strong focus on privacy, browsers have recently started phasing out support for the 3rd party cookie. This has caused issues for embedded apps which until now have required the use of 3rd party cookies.

Our new App Bridge auth beta introduces “session tokens” to empower developers to create faster, more flexible, and more compatible apps. Session token based auth does not depend on cookies and instead relies on a Shopify-generated token that your app needs to send with every request.

In order to get started with App Bridge auth, or migrate your current app from traditional, cookie-based authentication, you can follow the guide in our developer documentation.

Questions about App Bridge auth or session tokens? Post them in this board or reach out to support through your partner dashboard.

[tonypmuk]

Thank you for your comments.  I fully take your point about turbolinks.

I am working on a small app, and have dispensed with turbolinks and the extra code added to make tubolinks work.  I am doing page updates using rails templates and ajax requests. 

I have a couple of things that I would welcome some help with.

1.  keepRetrievingToken.  this was added to shopify_app.js for turbolinks, and I have added a similar function in my non-turbolinks app.  Without it I get token expired failure.  Since there is no mention of having to poll the session token for other shopify app session token examples, I figure I should be able to avoid it, but don't know how this is done.

2.  When I get an auth fail, my app redirects to the login page, but this does not get rendered because I am expecting an ajax request.  At least that is what I think is happening. 

I am starting out with React.js and like what I see.  I have built and installed the next-gen-auth-app-demo,  I cant really see how to extend the app from the basic home page to add pages to the app. Nor can I see if it would be necessary to poll the session token to keep it live in this app, and indeed if not why.

[tonypmuk]

OK, regarding the next-gen demo app, I see that the piece of the puzzle I was missing wat react.js/react-rails.  I have only just noticed that this was built into the demo app, and that react-ujs and react-router will be the keys to understanding how to add more resources to the app.  Which should then allow me to see how session tokens co-operate with all this.

However, I still think it would be valuable to extend the example demo app just a little more to make it more apparrent how session tokens, react, routing etc fit together for this type of app.  If I find my way through it perhaps I will be able to write a little tutorial of my own (unless I am the only one out there struggling with this stuff?). 

[darakhsa_farhan]

Hello Sir,

When JWT token will expire after 1 minute then what to do to handle this thing in our Apps. Can you please provide step by step details for how to integrate JWT tokens part in our APP?

[HunkyBill]

App Bridge has a getSessionToken! Use that. You get a token, you use the token. No more worrying about expired tokens.

[darakhsa_farhan]

Hello Sir,

In articles, shopify has mentioned that token life span will be 1 minute. After 1 minute, if in some case, token becomes expired when reaches to back-end then how to manage this thing and if we force users to re-login when token is stale then it will result in not good user experience as they've to login within 1 minute of interval.

Here mentioned that, we've to verify this in 6 steps >> https://shopify.dev/tutorials/authenticate-your-app-using-session-tokens#obtain-session-details-manu...

In 6 steps, we've to verify about expiry time too.

If we only verify signature and shop domain in payload will match record in our server's database then will we consider request as valid instead of considering expiry time and other factors too? Because if user does nothing in 1 minute and token will be expired then each time we've to force them to login into system which is not good.

I am stuck in this scenario. Please guide me in right direction. Thank you in advance.

[assafl]

The auth login flow should only be a redirection you make to the /auth route of your app to get a new and valid token (in Node.js its through the callback of the createShopifyAuth method of the koa-shopify-auth package) 

From end user point of view the experience is of a few more page redirects. There is no need to perform a login to the site.

[prince_lyzer]

hello @Michael_Ragalie 

Yes, it will be working when app is loaded first time. but when I redirect to another page and then reload the iframe, at that time, shopify did not provides the shop or host key in the url. and Here issue arises.

app bridge throws an error of shop origin is required.

Please consider this case.

[robbwinkle]

@prince_lyzer I had the same issue and the reason is that when you link to the new route you are not including the shop parameter.  So it's probably something like /about instead of /about?shop=myshop.myshopify.com.  The problem relies in your router not maintaining the parameter when changing routes.  

Possible solutions:

1. It is possible in React to listen for link changes and append the current shop parameter to the new link but you will get a browser console error.  
2. You could also append the shop parameter to every link programmatically, but this is hard to maintain. Each time you add a link you would need to make sure the parameter is added
3. Use React Context to maintain the parameter
4. If using Next.js, use server side props in next.js on each page to pass the shop from the parameter as a prop. This is difficult to maintain as well because essentially you copy/pasta it to every page.

I didn't like either of these solutions but at the time didn't have time to track down another solution. 

I used a combination of both 1 & 2 in case future developers forgot to add the parameter on new links. Some of the other more elegant solutions I tried didn't work so I went with the brute force approach given time constraints.

[prince_lyzer]

I do the same solution for now.

[kyle_truong]

I'm having some issues with app-bridge 2.0.3, specifically the `forceRedirect` option. My embedded app loads the skeleton unauthenticated as suggested by the Session token tutorial, the skeleton loads app bridge and then app bridge redirects to a broken url at `https://<myshopifydomain>/apps/<shopifykey>`. Before, it redirected to `https://<myshopifydomain>/admin/apps/<shopifykey>` and that worked but it no longer seems the case. This affects the flow for creating app subscriptions after confirming the subscription and getting redirected back to the returnUrl, but also I've had issues with this during the app submission process. 

I created a GitHub issue at https://github.com/Shopify/shopify-app-bridge/issues/65 but haven't received a response yet. I'm not sure where to go from here or if I'm missing something really obvious. 

[sonium]

Is there the possibility to test an app with the shop_origin of a different merchant's shop (obviously one that has the app installed)?

This would be great for helping merchants to resolve issues with the app!

[HunkyBill]

You always build and test with your own development store! That way you get to work with production and development API keys. That way you test and play with the cloud (your merchant customers) and using a decent tunnel like ngrok, localhost on your machine.

If you are having trouble with this concept, you can experiment and quickly get up to speed.

[sonium]

I didn't mean testing per-se.

Is there the possibility log into an app with the shop_origin of a different merchant's shop for helping the merchant to resolve issues with the app?

[HunkyBill]

Not sure I understand you. Logging in as the merchant is what you want? You can only do that if you ask them for permission and they grant it to you. Your partner account has that built in.