Introducing cookieless authentication beta with App Bridge

andreiasdfg
Tourist
11 0 1

Yep, even tho it's a bit tricky. I've created a function in <head> in index.html to get that shop param, and i taught that it would work now without cookies but it seems like during the authorization (using koa-shopify-auth) at some point i need the shop param before i have that URL that contains state and shop. So i do something like this in my App.js where i wrap the providers, and it's working on all browsers and incognito EXCEPT SAFARI. lol i dont know what is going on in safari..

 

'Whenever Shopify loads your app in the embedded context, the app URL contains several URL parameters, including a `shop` parameter that is the shop origin. You can use this `shop` parameter to load up App Bridge.'

So at a certain point, App Bridge tries to get shop param but it happens before Shopify loads my app in embedded context, thats what im trying to say..

 

 

const config = {
    apiKey: process.env.REACT_APP_SHOPIFY_API_KEY,
    shopOrigin: window.getUrlParameter('shop') || Cookies.get('shopOrigin'),
    forceRedirect: true,
  }

 

 

0 Likes
andreiasdfg
Tourist
11 0 1

So if you have any idea why App Bridge requires the shopOrigin before i get that embedded URL link with shopOrigin, or why auth doesn't work on Safari let me know :d

0 Likes
dzdzteste
New Member
1 0 0

what is haill

0 Likes
Bengk
Shopify Partner
13 0 6

I'd like to move over and ditch cookies.

What's the process for apps that are developed on Node using this configuration: https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react

Does this mean we get rid of koa-shopify-auth entirely? 

What replaces koa-shopify-auth for the initial authentication flow?

Haven't been able to find any outline on how developers should go about this.

Thanks

releod
Tourist
9 0 4

Hi @Liam / @Michael_Ragalie 

Can we get some updated docs, specifically around new users accessing an already installed application. I see there is another fetch method available `userAuthorizedFetch` - which possibly handles per user tokens?

Would love to get more clarity in the docs, this is likely the best way to get more folks moving off cookies and into session based.

 

Also any plans to expose current user / shop / device information from within App Bridge?

rezaansyed
Shopify Staff
Shopify Staff
7 0 3

Hi @Bengk,

As mentioned by Mike, there is App Bridge support for frontend changes, as well as a library by a community member to validate the session token on a node backend: https://community.shopify.com/c/Shopify-APIs-SDKs/Introducing-cookieless-authentication-beta-with-Ap... 

We're still figuring out the best way for us to surface the backend logic for node. The good news is that most of the logic lives in App Bridge, and you can use the `authenticatedFetch` fetch implementation with pretty much any modern JS framework (see more about `authenticatedFetch` here: https://shopify.dev/tools/app-bridge/authentication#setup).

I did notice that a community member created a helper to validate the session token for node: https://github.com/leighs-hammer/shopify-jwt-auth-verify You could see if that meets your needs.

rezaansyed
Shopify Staff
Shopify Staff
7 0 3

Hi @releod,

`userAuthorizedFetch` is in reference to our new solution to updating online access tokens. We are still working on this and do not suggest using this yet. However, if you are authenticating requests between your app frontend and app backend, you can leverage the `userAuthenticatedFetch` fetch implementation. It is a custom fetch operation that will fetch the session token and append it in your request.

Here are the docs for the new auth using session tokens: https://shopify.dev/tools/app-bridge/authentication
Example using the the `userAuthenticatedFetch`: https://shopify.dev/tools/app-bridge/authentication#frontend-changes

Martin_Caum
Shopify Partner
40 3 18

Maybe I am missing something here, but I am currently working on an app right now and have hand coded the Oauth handshake without the use of cookies. My app is currently embedded and can handle things like pulling orders from the server and everything. All without using cookies. Am I missing a key part to writing a secure app or is this dependent on how the app works and what it wants to do? From my understanding, and what I have completed so far, the Oauth handshake is all done through a ping-pong volley of GET requests. Once this is done, I am able to get a permanent token. Any calls to the Shopify API are done using this token. I could maybe see once the token has already been received then one could argue that the original call for the Oauth could be sent from anywhere/anyone. But the next step is to ping Shopify's server with the response. This step should prevent allowing access to the app from an outside source.

I did add in an extra security measure where once the hmac/nonce is verified and I have gotten the response back from Shopify's server I generate a nonce/HMAC of my own and the HMAC is sent to the final redirect URL by way of URL parameter. Once the page of the app loads with the HMAC it verifies it (server side with PHP) against the nonce on my server (that never left the server) as well as checks against a very short timeout from when the nonce and HMAC are generated. If all of that checks out I know this session came from the Shopify admin and should be secure so I serve the front end of the app. During that session any calls that need to be made come from my app's front end to my server, where the server would make the calls to Shopify's API using the stored permanent token.

One could maybe argue that it is this call from the app's front-end to the server that could be vulnerable but even then I could, once the app has verified my nonce/HMAC, generate a session Id cookie (1st party, not 3rd party) to be sent with the call to the server to access the Shopify API. An even further step could be taken that each time that happens or a new page/state of my app's front end is loaded, a new session Id is generated. This is all a very drawn out process but I think it is simple enough to handle and should be more than secure enough without the use of third party cookies.

0 Likes
HunkyBill
Shopify Expert
4355 36 462

If your App is embedded in an iframe, note that the token exchange happens outside that iframe. So to get your session happening inside the iframe, requires a mechanism like cookies. Since that is now verboten with several browsers without approval, that is the issue at hand. If your App just lives on it's own, then sure, you can manage your own cookies and not experience this problem. Only if you're embedding your App is the transition to JWT a needed thing at this time. Since the exchange of a JWT can occur with just headers, it evades this third-part cookie issue.

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
Martin_Caum
Shopify Partner
40 3 18

But this is what I am not following. By "embedded app" you mean one that shows in an iframe inside the Shopify admin? Mine does this. It is loading and authenticating inside the iframe but I am not using cookies. Are there special features/functions of communication that are not done from server calls to the API? Or is this more about trying to avoid needing server side scripting?

0 Likes