Video tutorial on using JWT session tokens to authenticate your embedded app

[Jason_Tigas]

As indicated via a notification on your partner dashboard, new embedded apps are now required to use session tokens instead of cookies for authorization.

This requirement will apply to all embedded apps by Jan 1 2022.

Below is a link to a video tutorial on implementing the JWT session token using app bridge and bootstrapping the Shopify CLI's example code.

https://www.youtube.com/watch?v=Vq0aWTaJDAY

Contents:
0:00​ Intro
1:26​ What is a session token?
2:36​ What's wrong with using cookies these days?
5:01​ Session token vs access token
6:54​ Looking at the JWT token
16:22​ Session token life cycle
18:00​ Frontend implementation
28:16​ Backend implementation
40:29​ Using the uninstall webhook
44:52​ Questions

Questions
23:22​ Why not just use the offline token?
44:52​ Adding a script tag
46:37​ Stuck in redirect loop

Documentation links
- Overview: https://shopify.dev/concepts/apps/bui...​
- Tutorial: https://shopify.dev/tutorials/authent...​
- Getting started with app bridge: https://shopify.dev/tools/app-bridge/...

Slack Channel
#session-token-migration 

[JHLEE]

Hi Jason,

I'm trying to convert Shopify embedded app with cookie based authentication into session token authentication.  I've watched your YouTube video and followed server.js and _app.js implementation, however, I am keep getting "Enable cookie" notice from the browser.   I think I can continue the conversion, if I can get the point where you are(load the app and display the simple text in the index.js from the frontend without "Enable cookie" notice loop.  So I was wondering if you can share the the source code used for the demo.

Thanks,

[Jason_Tigas]

Hi JHLEE,

The source code from the demo is based off of this repo. 
https://github.com/Shopify/shopify-app-node/blob/master/pages/_app.js

[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 have watched your video still I am stuck in this scenario. Please guide me in right direction. My app is in PHP technology. Thank you in advance.

[Jason_Tigas]

Hi @darakhsa_farhan ,

Can you explain your scenario where the token is expiring?

Have you tried regularly polling for a new token? I've seen some take this approach.

------

Also, I've started a channel in the partner slack at #session-token-migration for devs to ask questions and share solutions.

[darakhsa_farhan]

Hello Jason,

I have used below code snippet to get JWT token via app bridge on the
front-end:

var AppBridge = window['app-bridge'];
var utils = window['app-bridge-utils'];
var createApp = AppBridge.createApp;
const app_bridge_obj = createApp({
apiKey: apiKey,
shopOrigin: shop_domain,
forceRedirect: true
});

utils.getSessionToken(app_bridge_obj).then(ret_val => {

window.session_token = ret_val;

});


Above getSessionToken method of utils lib. automatically polling session
token before it will be expired. Means I have analyzed in network calls
that shopify will generate new JWT token before it will be expired. If
token is not expired then same token will be generated by calling above
method and that token I have attached to authorization header in AJAX
request to back-end.

I was thinking that token will be expired then we(developer) has to managed
this thing in our APPS but after implementation, I have noticed/tested more
times after 1 minute of interval, by calling getSessiontoken method will
generate fresh JWT token once again automatically.

--------------------------------------------------------------

[darakhsa_farhan]

Hello Jason,

I have used below code snippet to get JWT token via app bridge on the front-end:

var AppBridge = window['app-bridge'];
var utils = window['app-bridge-utils'];
var createApp = AppBridge.createApp;
const app_bridge_obj = createApp({
     apiKey: apiKey,
     shopOrigin: shop_domain,
      forceRedirect: true
  });

utils.getSessionToken(app_bridge_obj).then(ret_val => {

window.session_token = ret_val;


});

Above getSessionToken method of utils library automatically polling session token before it will be expired. Means I have analyzed in chrome browser network calls that shopify will generate new JWT token before it will expire. If token is not expired then same token will be generated by calling above method and that token I have attached to authorization header in AJAX request to back-end. 

I was thinking that token will be expired then we(developer) has to managed this thing in our APPS but after implementation, I have noticed/tested more times by calling getSessiontoken method generating fresh JWT token once again automatically before 1 minute of interval elapsed.

[ParanoidAndroid]

Man this is an adventure to say the least... Here's the react specific code I'm using as of (7/21/21)

import {
  Provider as AppBridgeProvider,
  TitleBar,
  Loading,
  useAppBridge,
} from '@shopify/app-bridge-react';

import {getSessionToken} from '@shopify/app-bridge-utils';

const app = useAppBridge();
getSessionToken(app).then((res) => {
    console.log(res);
});

Make sure you install the 1.x version (not the latest 2.x) of app-bridge-react. Found this out the hard way...

[Pengyi]

Hi @Jason_Tigas , Do we need to use session token for every request from frontend even it’s not calling Shopify api? It’s encoded by Shopify key, but we have our own api which is not calling any Shopify api, I’m asking this because I saw ‘Embedded apps that don’t use session tokens’ is ‘Prohibited app types’, and we want to submit our APP for review.

Actually we're not calling any Shopify api from backend, we only use a ResourcePicker from '@Shopify/app-bridge-react' on the frontend.

We're using firebase on the backend, and we have our own security rules.

Thanks!

Pengyi

[Jason_Tigas]

Hi Pengyi,

Yes you should use session token with each request so you can identify user.

[Pengyi]

Hi @Jason_Tigas,

I followed the video and want to see how the session token looks like, and added the codes

getSessionToken(app).then(token => {
    console.log("token:", token)
  })

But it shows the error below, any ideas? much appreciate!

[Jason_Tigas]

Hi Pengyi, can you check that app is being set.

[infowind1]

HI @Jason_Tigas 

I'm developing embedded Shopify App by using Codeigniter framework, and using app bridge session token for authentication. I added app bridge session token in header.

<script src="https://unpkg.com/@shopify/app-bridge@2"></script>

<script src="https://unpkg.com/@shopify/app-bridge-utils@2"></script>

<script>

var shopUrl = 'https://xyz.myshopify.com';

var AppBridge = window['app-bridge'];

var appBrdigeUtils = window['app-bridge-utils'];

var getSessionToken = appBrdigeUtils.getSessionToken;

var createApp = AppBridge.default;

var app = createApp({

apiKey: '123456',

host: 'abcxyz',

forceRedirect: true,

});

document.addEventListener("DOMContentLoaded", async function () {

// Wait for a session token before trying to load an authenticated page

await retrieveToken(window.app);

// Keep retrieving a session token periodically

keepRetrievingToken(window.app);

async function retrieveToken(app) {

window.sessionToken = await getSessionToken(app);

$.ajaxSetup({

headers: {

'Authorization': "Bearer " + window.sessionToken

}

});

}

function keepRetrievingToken(app) {

setInterval(function () {

retrieveToken(app);

}, SESSION_TOKEN_REFRESH_INTERVAL);

}

});

</script>

Added above code for session token authentication but not helping.

So please help me how to authenticate session token for php ( Codeigniter ) App.

[kkang]

It seems that the host string needs to be retrieved from the URL on-the-fly. You may want to change the line

host: 'abcxyz',

to:

host: new URLSearchParams(location.search).get("host"),

[GreenReceipt]

Hi @infowind1  did you set up your shopify app using codeigniter framework with authentication via session tokens? If yes, can you please help me to figure out what steps i have to done for implementing session tokens in my app which is created in codeigniter. It will be very helpful.