Example App Bridge application?

hmpws
New Member
3 0 0

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.

Replies 3 (3)
alanthai
Shopify Staff
9 0 1

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!

hmpws
New Member
3 0 0

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 = "<api>";
const redirectUri = `https://<url>/auth/callback`;

// get host and shop
const params = new URL(window.location).searchParams;
const shop = params.get("shop");
const host = params.get("host");
console.log(shop);
console.log(host);

const permissionUrl = `https://${shop}/admin/oauth/authorize?client_id=${apiKey}&scope=read_products,read_content&redirect_uri=${redirectUri}`;
// If the current window is the 'parent', change the URL by setting location.href
if (window.top == window.self) {
    window.location.assign(permissionUrl);

    // If the current window is the 'child', change the parent's URL with Shopify App Bridge's Redirect action
} else {
    const app = createApp({
        apiKey: apiKey,
        host: host,
    });

    Redirect.create(app).dispatch(Redirect.Action.REMOTE, permissionUrl);
}

 

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.

hmpws
New Member
3 0 0

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 = "<api>";
const redirectUri = `https://<url>/auth/callback`;

// get host and shop
const params = new URL(window.location).searchParams;
const shop = params.get("shop");
const host = params.get("host");
console.log(shop);
console.log(host);

const permissionUrl = `https://${shop}/admin/oauth/authorize?client_id=${apiKey}&scope=read_products,read_content&redirect_uri=${redirectUri}`;
// If the current window is the 'parent', change the URL by setting location.href
if (window.top == window.self) {
    window.location.assign(permissionUrl);

    // If the current window is the 'child', change the parent's URL with Shopify App Bridge's Redirect action
} else {
    const app = createApp({
        apiKey: apiKey,
        host: host,
    });

    Redirect.create(app).dispatch(Redirect.Action.REMOTE, permissionUrl);
}

 

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.