Introducing a new Node library for accessing the Shopify Admin API

[Liam]

Hi App Developer Community,

The new Shopify Admin API library for Node is here! This library makes interacting with the Admin API easy and works with any backend framework (Koa, Express, etc). 

This new library includes all the key features we believe developers are looking for when building a Shopify app, including:

•   JWT Based Authentication
•   REST / GraphQL Clients
•   GraphQL Proxy 
•   Cursor Based Pagination
•   Webhooks subscription helpers and HMAC validation 

The existing `koa-shopify-auth` package has also been updated to use this new library [migration guide here], as well as our Node & React tutorial and the Shopify App CLI. For some more examples of its usage, please visit the Getting started guide in the GitHub repository.

The future of Shopify Admin API libraries

Shopify is actively updating all our Admin API libraries in 2021 and this new Node library is the first to be released. Our goal is to create a suite of open-source libraries consistent in functionality across a variety of languages and Shopify’s app best practices. We also have future plans to build enhanced experiences on shopify.dev based on these libraries (tutorials with code samples and requests in API references in your language preference).

We want your input to make the libraries as useful as possible, to enable the developer community to get their apps on the Shopify App Store as soon as possible.

Have some feedback? Reply to this post and let us know!

[dylanpierce]

Finally we have official NextJs + Koa session token authentication support!

This is great and something I & the Node community has been asking for for quite some time.

https://github.com/Shopify/shopify-app-bridge/issues/13

However, I just want to point out that since NextJs version 10, they no longer recommend using a separate secondary server (like Koa.js) to handle backend API requests. Instead they have included API routing support directly in the framework: https://nextjs.org/docs/api-routes/introduction

In addition you cannot deploy a NextJS application to Vercel with the official Shopify NextJS + Koa implementation. https://nextjs.org/docs/advanced-features/custom-server

In addition after rolling out my own 100% NextJS implementation of OAuth & Session Token validation on my projects, I'm seeing a huge reduction in page refresh time. The development cycle is so much quicker.

I know NextJS and Javascript practices move much more quickly than mature frameworks like Ruby on Rails, I just ask that we try to be more in lockstep with the latest version & practices of the software stack in the documentation.

That's my only ask! Thanks again for sharing this with the community, most other NextJS apps are following the official docs and this will help most get their foot in the door.

 

[amosmos]

Hey @dylanpierce share your custom framework 🙂 or at least record a video tutorial about how you made it and sell it, I want to buy 🙂

Amos

[dylanpierce]

Thanks @amosmos it's just the authentication portion, no full fledged framework yet.

It's available to download as an npm/yarn package: https://github.com/ctrlaltdylan/shopify-nextjs-toolbox

```

npm i --save shopify-nextjs-toolbox

yarn add shopify-nextjs-toolbox

```

And here's an example app repository using the package for authentication with OAuth & the new session tokens without cookies: https://github.com/ctrlaltdylan/shopify-session-tokens-nextjs

All open source and free.

[mattryles]

Thanks @dylanpierce , much appreciated by a new Shopify dev trying to use the correct auth flow. 

[dylanpierce]

@mattryles glad it's helping you!

[amosmos]

Thanks @dylanpierce you're awesome!

For some reason in my original post the smilies I put didn't show, just know I meant it with tons of respect!

Thanks,

Amos

[luistmartins]

@dylanpierce thank you so much for making this available. This has been super useful to me, to be able to get around the necessity of deploying to Vercel but also using queries to a MongoDB.

[RileySeaburg]

Thank you so much for sharing this!

[dgtlmonk]

@dylanpierce doesn't seem to work with Custom App? Custom app requires API Secret which the configuration (env file) doesn't have. So I suppose  your framework is only for Private Apps? 😞

[dylanpierce]

@dgtlmonk no it's compatible with both private & public apps.

You may have mixed up and created an `.env` file but NextJS by default reads `.env.local`.

[luistmartins]

@dylanpierce apologies for deviating from the main topic, but do you have an example of how can a NextJS API route could consume the `sessionToken` for axios REST Admin API requests? I'm really close to have this working but I think I'm missing a critical step somewhere.

[dylanpierce]

@luistmartins

There is a middleware called "withSessionToken" in the package.

In the example repo look at the API route that is called within the
pages/home.js frontend component.

This withSessionToken middleware verifies the authenticity of the session
token and sets req.shopName to the name of the shop that's currently logged
in.

[luistmartins]

Thank you @dylanpierce, for the help here and for this useful library.
My difficulty was taking the accessToken given out by the middleware and use that to make REST Admin API requests, and that was because I was not passing the information through the `X-Shopify-Access-Token` header, which solved it for me, hopefully the proper way.

[dylanpierce]

@luistmartins 

Oh I’m sorry, I misunderstood session token with access token.

For others reading this:

* Session Token == the frontend JWT authentication token for proving your merchant’s identity
* Access Token == the backend private key that represents your access to the merchant’s resources within the Shopify Admin API

The idea behind the session token is that it’s publicly accessible in the browser, but it will eventually expire.

The withSessionToken middleware proves that the merchant is using your app and is authenticated - however its up to your implementation to pull the shop’s Access Token from your backend database given the shop’s name (aka origin).

The next-js-shopify-toolbox package gives you the relevant middleware to retrieve this Access Token during OAuth, but it’s up to you to decide where to store it and how to retrieve it later.

[luistmartins]

@dylanpierce 

Thanks so much for taking the time to go through this Dylan.
I've figured out since that I could use the access token given out by the auth callback, so it all makes a bit more sense to me now. It was my lack of understanding of all involved parts that lead to my confusion, so again thank you for adding this information here.

[dylanpierce]

@luistmartins 

No problem!

That's right, and it is a bit confusing with essentially 2 parts of authentication:

1. Access Tokens (server side stored and used) - distributed to your app during the OAuth callback when the merchant accepts your auth scopes (the /api/auth/callback.js example in next-js-shopify-toolbox)

2. Session Tokens (browser side, JWT, generated by AppBridge) - distributed by Shopify's AppBridge, which requires the shopOrigin (aka shop name) and you pass to **your** API using axios. Behind the API on the server, it's up to you to find the corresponding Access Token given the shop's name from the Session Token.

Good luck!

[dgtlmonk]

@dylanpierce  im getting client_id undefined 

https://github.com/ctrlaltdylan/shopify-session-tokens-nextjs/issues/8

[GoodfyLabs]

Hi there @Liam  a very novice questions ..

I am following tutorial but got confuse about Shopify.Context.Initialize ... 

can I still use even if my first app will be a PRIVATE ONE ?  The readme in the library mention the tutorial is also viable to PRIVATE ... but in Private I do not have a API_SECRET_KEY ( we have SHARED_SECRET ) ...

ANYBODY can help with this Newbie question ?

BR

[luistmartins]

@GoodfyLabs independently from being a public or private app, you should get the API keys listed on the app main screen as shown here: https://cln.sh/vbENzd

[Vyacheslav81]

I have a private shopify app therefore I don't have local application running and also I don't have envirement variable HOST. How can I use this library with private app if Shopify.Context.initialize function use a config object ContextParams needs to have HOST_NAME key?

I have npm package "@shopify/shopify-api" version 1.2.1 installed and it has no Storefront API implemented. I don't know why there is no Storefront API in this version of package considering that github repo release with the same version has that API implemented.

[GoodfyLabs]

Hi @Vyacheslav81  ... that was my intention too ...( use with PRIVATE APPS) 

I did some tests and ... in fact I realize that did not work because do not make SENSE ( at least this was my understanding ) 

Because with Private apps ... you will authenticate every api call using key and password  ... 

Maybe  an expert can explain better

Best regards 

[umerhamza]

Hi, I hope you are doing well.

I am recently starting work on Simple Public Shopify App (It's literally for learning) with node and react. I have confused about the stack. Shopify is providing the Next JS for Frontend Development and KOA for Backend Development.

According to docs of next js. we can write our own API in the next js. Then Why We use KOA?

[EugeneKim]

It looks like the the library is largely written in Typescript. It would be great to have the actual REST Admin API objects written as types as well from the Shopify team and not a 3rd party so that we can have types we can rely on.

Is something like this on the roadmap for this or another library?

Thank you