meteor-shopify authenticator getPermanentAccessToken with code

Question

I'm using the froatsnook:shopify atmosphere package to create an embedded public app on Shopify. I currently have a couple issues:

1) Getting the access token from the "code" query parameter after a user authenticates. As it mentions in the docs here, I'm supposed to use authenticator.getPermanentAccessToken(code) but what I don't understand is how to get call authenticator if the "code" parameter appears on the callback route (at that point, the authenticator I instantiated on the client pre-auth route is out of scope).

2) The "oAuth" function callback is never called for some reason, even when assigning it to Shopify.onAuth on the server.

3) The difference between post_auth_uri and redirect_uri ?

// I call this during 'onBeforeAction' for iron-router
function beforeAuth (query) {
    // is this necessary..?
    console.assert(Meteor.isClient);

    // get shop name like 'myshop' from 'myshop.shopify.com';
    const shop = query.shop.substring(0, query.shop.indexOf('.'));

    // use api_key stored in settings
    var api_key = Meteor.settings.public.shopify.api_key;

    // Prepare to authenticate
    var authenticator = new Shopify.PublicAppOAuthAuthenticator({
        shop: shop,
        api_key: api_key,
        keyset: 'default',
        embedded_app_sdk: true,
        redirect_uri: 'https://45a04f23.ngrok.com/testContent',
        //post_auth_uri: ???

        // This is doesn't seem to be getting
        // called after clicking through the OAuth dialog
        onAuth: function(access_token) {
            ShopifyCredentials.insert({
                shop: shop, 
                api_key: api_key, 
                access_token: access_token
            });
        }
    });

    // Should i use something different with iron-router?
    location.href = authenticator.auth_uri;

    // how do i get code in this scope???
    // authenticator.getPermanentAccessToken(code);
}

Answer 1

There are a few issues with the way you are trying to set up the authenticator, although it's not really your fault because the way Scenario 3 works in the docs is not an 'out of the box' solution and requires a bunch of custom code, including your own handler (I can provide a gist if you REALLY want to build your own handler, but I suggest using the new server-side onAuth callback instead)

1. Specifying a redirect_uri overrides the package's default redirect_uri handler which is Meteor.absoluteUrl("/__shopify-auth").

So instead, completely remove redirect_uri and put your testContent url in post_auth_uri instead.

2. ShopifyCredentials does not exist in this package. If you want to use it that way, make sure you actually have defined a collection called 'ShopifyCredentials' and insert the record from the server, not the client. Note that you will still need to add a keyset on the server for the API methods to work. If you are using user accounts and would like to permanently store credentials, I suggest saving the credentials to the database and adding the keyset via a server-side onAuth callback.

3. authenticator.getPermanentAccessToken(code) isn't useful unless you are using your own handler. Instead, you can just get access_token from the onAuth callback.

Also keep in mind that if you ever need to reauthenticate from inside the embedded app, you need to use window.top.location.href to break out of the iframe.

If you want a complete, working boilerplate example with user accounts see my gist here: Authentication with Accounts and Persistent Keysets

If you aren't using accounts, you can use this gist instead, but please note that you really need to come up with some way to check that the current client has permission to request the keyset for a given shop before going to production: Authentication with Persistent Keysets