Introducing cookieless authentication beta with App Bridge

Michael_Ragalie
Shopify Staff
Shopify Staff
37 2 11

Thanks for the feedback and ideas! We want to make building with session tokens a straightforward experience, so we'll take these ideas back as we consider future improvements.

0 Likes
assafl
Tourist
8 0 1

@Michael_Ragalie thanks for the update

Can you share timeframe for the updates to be available?

0 Likes
gatanik
New Member
2 0 0

A digital storytelling blog touching upon themes and trends in eCommerce, tech trends, retail, and CPG. Sharing my close to 15 years of experience in the technology sector

0 Likes
assafl
Tourist
8 0 1

@Michael_Ragalie Would be great to hear of any updates on this

0 Likes
Michael_Ragalie
Shopify Staff
Shopify Staff
37 2 11

Hi! We're actively improving the tooling around this feature. For example, we recently shipped improvements to how session tokens operate in server-side rendered Safari apps: https://github.com/Shopify/shopify_app/issues/1101

We don't give guidance on when particular features will be implemented so that we have the flexibility to adjust the roadmap as new problems and opportunities appear.

0 Likes
assafl
Tourist
8 0 1

@Michael_Ragalie thanks for your response

My issue here is that there is a guidance which is not adjusted to this great new feature which looks pretty much baked.

Since the original guidance is well documented and officially supported I would expect this feature to be so as well

Adjusting to the new feature currently means removing important SDK packages and implementing infrastructure logic on my own. It causes me to handle a lot more than just the pure business needs of my app which is not the best way to go.. 

Do you recommend to use the solutions suggested by our great community here or should we wait for an official SDK support?

0 Likes
Adriano_Corte_R
Shopify Partner
5 0 4

Maybe this might help those of you who are having a hard time.

Not entirely sure if the way I'm doing it is perfectly sound or "best practices" but it works for me. If you're using the pre-built sample nodejs or ruby apps that Shopify provides then I don't know what you'll need to do exactly to make it work but for me it works the following way:

(disclaimer: my backend is in Golang, not NodeJS or RoR)

I added a middleware to my backend routes that expects to receive a JWT as a Bearer token in the headers. This middleware is responsible for decoding and verifying the JWT on each and every request to any of the "protected" routes.

My frontent loads inside Shopify unauthenticated and it initializes appbridge and grabs a token through appbridge. I then make a call to my backend to check if this particular store is in the database. This backend call includes the JWT Bearer token I mentioned earlier. If the backend properly verifies the JWT string and the store is present/located in my database, it returns a 200 status which my frontend takes as a sign that we're good to proceed and everything is OK. If the backend returns a 4xx or 5xx status code, the frontend uses appbridge to redirect the parent window/tab to the Shopify app install URL for my particular app. From there the process repeats and any calls to the backend includes the JWT Bearer token. Any calls to the backend without the token fails with a 401 status. 

If you go this route make sure to properly verify the JWT signature and validate the NBF and EXP fields in the JWT string.

HunkyBill
Shopify Expert
4353 36 462

Nice job Adriano! That reads as textbook perfecto!

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
0 Likes
ptrck_schndr
Tourist
6 0 1

Hi there. The new App Bridge seems to a be a very modern way of embedding apps into the Shopify admin. Congrats for this huge improvement. I really love this!

I'm very well-known into the basic concepts of JWT and how it works to decrypt it and check if it's valid or not. No problem for me at this point.

But still I have a really hard time to even get it just simply running through the OAuth-process on the first install, although I'm doing it exactly how it is described in the manuals.

Can someone please explain what I am doing wrong here?

/auth/index.html

 

import createApp from '@shopify/app-bridge';
import { Redirect } from '@shopify/app-bridge/actions';

const shopOrigin = 'xxxxxxxxxxxx.myshopify.com';
const apiKey = 'xxxxxxxxxxxx';
const redirectUri = 'https://xxxxxxxxxxxx.ngrok.io/';
const scopes = [
    'read_products',
    'read_content'
];
const permissionUrl = `https://${shopOrigin}/admin/oauth/authorize?client_id=${apiKey}&scope=${scopes.join(',')}&redirect_uri=${redirectUri}`;

if (window.top == window.self) {
    window.location.assign(permissionUrl);
} else {
    const app = createApp({
        apiKey: apiKey,
        shopOrigin: shopOrigin,
        forceRedirect: true
    });
    Redirect.create(app).dispatch(Redirect.Action.REMOTE, permissionUrl);
}

 

 

 

 
Inside my app settings I set the App-URL to `https://xxxxxxxxxxx.ngrok.io/auth/`

The original App is located in the root-URL, described in the redirectUri.

This works at least until I accept the OAuth-Screen in the Shopify admin, but after this it leaves the Shopify admin, opens up the redirectUri (setting hmac and code in the query) and then it gets stuck and never loads inside the Shopify admin iframe again.

Did someone get this working?


0 Likes
ptrck_schndr
Tourist
6 0 1

Okay, so after some more investigations on this...it seems, that on an initial install of an app Shopify still tries to handle cookie session authentication on the app – after the OAuth permission prompt to accept the scopes I get a redirect loop 3 times, like https://xxxxxxxxx.ngrok.io/?code=xxxxxx&hmac=xxxxxx&shop=xxxxxxx.myshopify.com&timestamp=1613242675 – after this it breaks, goes back to the app list and shows an error like "This app can’t load due to an issue with browser cookies. Try enabling cookies in your browser, switching to another browser, or contacting the developer to get support."

BUT: after this when I click on the app the app loads normal and I can get the JWT token by using getSessionToken(app).

Is there a way to omit this redirect loop? Well, I have to admit that it is a custom app – so I think I can ignore this. But maybe I am doing things wrong with the App Bridge?

0 Likes