Example App Bridge application?

Example App Bridge application?

hmpws
Shopify Partner
5 0 5

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 (Retired)
10 1 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!

To learn more visit the Shopify Help Center or the Community Blog.

hmpws
Shopify Partner
5 0 5

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
Shopify Partner
5 0 5

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.