Authentication Process

This package uses Shopify's session tokens (JWT). Upon first visiting and installing your app, the shop will also be created in the database with an offline token. For all further requests inside your app, the session tokens will be used.

Flows

Install

1. Initial app request
2. Redirect to /authenticate/token for a token
3. Redirect to the permissions page
4. Install actions
5. Redirect to /authenticate/token, then to home route for the app

Revisiting

1. Initial app request
2. Redirect to /authenticate/token for a token
3. Redirect to home route of the app

Session Tokens

This package uses Shopify's session tokens (JWT) for all requests. A Javascript solution is pre-implemented to support Axios, jQuery, XHR, Turbolinks, and others, to provide an up-to-date session token that is refreshed in the background every two seconds.

SPA

Links, Routing, and Forms

If you're using a SPA, you can take advantage of window.sessionToken for your requests. This will contain the latest up-to-date session token every two seconds. You can use this token for all your requests.

Alternatively if needed, you can use the tokenRoute and tokenRedirect helpers for routing.

In controller, (example for tokenRoute): $orders = URL::tokenRoute('orders.view', ['id' => 1]);. In Blade, (example for tokenRoute): <a href="{{ URL::tokenRoute('orders.view', ['id' => 1]) }}">Order #1</a>.

In controller, (example for tokenRedirect): return Redirect::tokenRedirect('orders.view', ['id' => 1]);.

Non-SPA

Links & Routing

For non-SPAs, you will need to visit the /authenticate/token route between each request. You can use the tokenRoute and tokenRedirect helpers.

In controller, (example for tokenRoute): $orders = URL::tokenRoute('orders.view', ['id' => 1]);. In Blade, (example for tokenRoute): <a href="{{ URL::tokenRoute('orders.view', ['id' => 1]) }}">Order #1</a>

In controller, (example for tokenRedirect): return Redirect::tokenRedirect('orders.view', ['id' => 1]);

With these helpers, they will first redirect you to the /authenticate/token page to get a new Shopify session token, then redirect you to the destination route.

Host Param

The host param is required from Shopify and has to be passed along to every request i.e. every page change otherwise your app will stop working.

The easiest way is to use the tokenRoute helper that will pass along the host param if it exists. This is important to note, it will only pass along the host when it is currently on the page. So if you forget to pass it along, i.e. not using the tokenRoute all the way through then it won't be able to pass it along.

New page

Forms

You can use a Blade directive @sessionToken inside your forms to add a hidden input that will contain the up-to-date Shopify session token (refreshed every two seconds).

Alternatively you can simply add .session-token class to anything. If its an input, it will add value="{{ current_token }}", if not an input, it will add data-value="{{ current_token }}".

Using Axios Interceptors

If you are using axios, you can set up an interceptor to get the session token before each and every request. This is a good way to avoid the session token expiry race condition.

axios.interceptors.request.use(function (config) {
    return utils.getSessionToken(window['app-bridge-app']) // requires a Shopify App Bridge instance
        .then((token) => {     
            // Append your request headers with an authenticated token
            config.headers.Authorization = `Bearer ${token}`
            return config
        })
})