All Tutorials

Get session tokens using App Bridge utilities

All Tutorials

Get session tokens using App Bridge utilities

Get session tokens using App Bridge utilities

The app-bridge-utils library provides helper functions to handle using session tokens for your application. You can use helper functions to fetch a session token from App Bridge and include them in requests being made to the app backend.

Requirements

Get a session token

The getSessionToken helper retrieves a session token from Shopify. It sets up a subscription on the App Bridge client to listen for the APP::SESSION_TOKEN_RESPOND action and then immediately dispatches the APP::SESSION_TOKEN_REQUEST action.

In your app, set up the App Bridge client and import getSessionToken using the following code:

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

const app = createApp({
  apiKey: "12345",
});

Where your app requires a session token, specify the following code:

const sessionToken = await getSessionToken(app);

getSessionToken returns a Promise, which either resolves with the session token, or rejects with an APP::ERROR::FAILED_AUTHENTICATION error when the session token is undefined.

Authenticate your requests

The authenticatedFetch helper function authenticates your requests using the session token. The function internally gets the session token from App Bridge and passes in the Authorization header to your subsequent fetch requests.

Parameters

  • app: The App Bridge instance.
  • fetchOperation: Optional. Allows you to define your own custom fetch wrapper.

The following example illustrates how to use authenticatedFetch with a custom ApolloLink:

import ApolloClient from "apollo-client";
import { authenticatedFetch } from "@shopify/app-bridge-utils";
import createApp from "@shopify/app-bridge";
import { HttpLink } from "apollo-link-http";
import { InMemoryCache } from "apollo-cache-inmemory";

const app = createApp({
  apiKey: "12345",
});

const client = new ApolloClient({
  link: new HttpLink({
    credentials: "same-origin",
    fetch: authenticatedFetch(app), // ensures all apollo client triggered requests are authenticated
  }),
  cache: new InMemoryCache(),
});

Use your own custom fetch wrapper

You can optionally pass in your own custom fetch wrapper function to the fetchOperation parameter. The app-bridge-utils function (authenticatedFetch) returns your custom fetch wrapper function along with an authenticated Authorization header appended to the request options provided.

Any custom fetch function you provide needs to append all appropriate options, including headers. The following example shows how to append options:

import ApolloClient from "apollo-client";
import { authenticatedFetch } from "@shopify/app-bridge-utils";
import createApp from "@shopify/app-bridge";
import deepMerge from "@shopify/app-bridge/actions/merge";
import { HttpLink } from "apollo-link-http";
import { InMemoryCache } from "apollo-cache-inmemory";

// Sample custom fetch wrapper
const yourCustomFetchWrapper = (uri, options) => {
  const aggregateOptions = deepMerge(options, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
  });
  return fetch(uri, aggregateOptions);
};

const app = createApp({
  apiKey: "12345",
});

const client = new ApolloClient({
  link: new HttpLink({
    credentials: "same-origin",
    fetch: authenticatedFetch(app, yourCustomFetchWrapper), // ensures your custom fetch wrapper is authenticated
  }),
  cache: new InMemoryCache(),
});

Next steps

  • Make authenticated requests using Axios.
  • Convert a multi-page, server-side rendered (SSR) app to use App Bridge authentication with Turbolinks.
  • Learn how to build a Shopify app with Rails 6, React, and App Bridge authentication.