Example App Bridge application?

Retired Boards Appdev Tools
1

Hello,

I have a simple app set up to display ‘Hello World’ but I have been bashing my head for a few days trying to get App Bridge working. Can anyone provide a simple Node/React application using App Bridge? Specifically I would like to use “Cart” actions but any simple example would help me really! For example, fetching “Features”.

Thanks.

2

Hi hmpws,

Have you been following the getting guide on shopify.dev? It can be found here https://shopify.dev/apps/tools/app-bridge/getting-started

There’s more info on Cart here https://shopify.dev/apps/tools/app-bridge/actions/cart, and Features here https://shopify.dev/apps/tools/app-bridge/actions/features

If you have been following and you’re still stuck, let us know which part you’ve been stuck on.

Thanks!

3

I have read the documentations many times and even look at the Github repo issues.

Currently I am getting:

Invalid OAuth callback.

My server is a simple koa-shopify-auth:

const router = new Router();
const server = new Koa();
server.use(session(server));
server.keys = [Shopify.Context.API_SECRET_KEY];

server.use(
    createShopifyAuth({
        afterAuth(ctx) {
            const { shop, scope } = ctx.state.shopify;
            ctx.redirect(`/?shop=${shop}&host=${ctx.query["host"]}`);
        },
    })
);

server.use(router.allowedMethods());
server.use(router.routes());
server.use(verifyRequest());
server.use(mount("/", koaStatic(__dirname + "/public")));

And index.html calls index.js with the following authentication code from the documentation:

var AppBridge = window["app-bridge"];
var actions = AppBridge.actions;
var createApp = AppBridge.createApp;

const apiKey = "

I have attached the complete code below. This OAuth problem only happens with the app-bridge. The site loads fine if index.js is not loaded. I have also tried putting the authentication into a separate function that I trigger with a button (to avoid an authentication loop), but the same problem occurs.

Please advise on how I should modify the code. Thanks.
4

I have read the documentation multiple times. At the moment, I get an “Invalid OAuth callback” error.

My server uses koa-shopify-auth to server a static index.html with index.js:

server.use(
    createShopifyAuth({
        afterAuth(ctx) {
            const { shop, scope } = ctx.state.shopify;
            ctx.redirect(`/?shop=${shop}&host=${ctx.query["host"]}`);
        },
    })
);

server.use(router.allowedMethods());
server.use(router.routes());
server.use(verifyRequest());
server.use(mount("/", koaStatic(__dirname + "/public")));

Index.js is an extension of the authentication from documentation:

var AppBridge = window["app-bridge"];
var actions = AppBridge.actions;
var createApp = AppBridge.createApp;

const apiKey = "

If index.html does **NOT** load index.js, I don't get any error but I get OAuth error when I try to use App Bridge. Please advise on how I should modify the code. I have also attached the complete code below.