Documentation for Partner with NextJS

ctrlaltdylan commented 4 years ago

Describe the feature you’d like

We'd like an example repository implementing the App Bridge with session tokens on a NextJs app specifically. The documentation has an example with a Ruby on Rails app.

However, there's no concrete example of a NextJs app like the koa2 + cookies authentication strategy provides.

Describe alternatives you've considered

Trying to figure it out on my own is the other option of course. It's not easy for a mediocre developer as myself 😅

Additional context

Shopify NextJs example repo with koa2 + cookie based auth Shopify Ruby on Rails App Bridge session token (JWT) based auth example

EDIT 10/30/2020

In the meantime, I've been attempting to figure it out myself, I've got an example repo up and I'm pretty close to having a pure NextJS with App Bridge session tokens authentication:

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

EDIT 11/02/2020

Repo is fully functional, beginning to move the middleware and contexts into their own package for porting over existing apps.

I have a few more issues to figure out, but they're not session token related just redirecting from the OAuth flow.

EDIT 11/09/2020

I've separated the functions to complete both OAuth & Session Token verification into a package:

yarn add shopify-nextjs-toolbox

https://github.com/ctrlaltdylan/shopify-nextjs-toolbox

The example repo in the docs explain how each function is used.

EDIT 04/06/2020

Hi friends. Shopify recently released v2 of the AppBridge packages. However, there was a bug with the release which causes the newly required host parameter to not be included in the new OAuth redirect.

Shopify is aware of this and is making a fix. shopify-nextjs-toolbox has a feature branch ready and I will tag a release when they have this bug fixed.

Don't worry, it will support both v1 & v2 of the AppBridge authentication with session tokens. Will be in touch.

benjitastic commented 4 years ago

Big upvote for this. It's a struggle to find good examples of this common set up.

The plus is that developers need to spend some time to have a deeper understanding and likely build their own auth router, their own JWT verification.

The negative is that it's discouraging to developers, costs them more time, and is a little odd since learning by examples is often the norm and what we have come to expect in documentation.

benjitastic commented 4 years ago

Also, it would be great if this documentation could also include recommended practice for fetching shop metadata from a database to pass to next/polaris/react. For example getting currency of the shop and making that available to the app bridge context. All the bridge provides us is the "shop" query parameter so likely there's more info on that store that apps will need (what billing plan they are on, what currency is the shop in).

Should we be using "getInitialProps"? Should we be waiting and requesting that data on the client-side with a useEffect?

I know it sounds like this is a little outside the scope but it's a question every app dev has to ask and some guidance on recommended & best practice would be great.

patryk-smc commented 4 years ago

Having up-to-date guidelines for Next.js-powered app would be awesome. Especially with taking into the account JWT auth, Apollo Client 3.0 and Next.js 9.3 new data-fetching features.

math-ecen commented 4 years ago

Thanks for this issue and for raising it in the Partner Slack as well. The Shopify Node + React tutorial is a popular discussion point in the Partner Slack and the news of JWT auth has excited the community. The tutorials and blog posts released for JWT are as simple as updating the Shopify gem if Rails is the backend but I'd love to see a Node best practices example and an updated Node+React tutorial which incorporates this as well.

greatestape commented 4 years ago

Thanks for submitting this request! It's definitely a good idea. We'll see what we can do!

ctrlaltdylan commented 4 years ago

I've got a barebones prototype here, it still needs the OAuth portion for the initial handshake but I'm pretty certain the session token retrieval & verification are accurate:

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

ctrlaltdylan commented 3 years ago

Another update, same repo but I've completed the cookieless session token auth with just NextJS:

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

I've started to abstract the middleware & contexts out for use in other apps. Will leave the main proof of concept app up as an example - but will package up the middleware and frontend contexts for implementing in pre-existing apps.

ctrlaltdylan commented 3 years ago

I've separated the 5 essential middleware functions out of that example repo and placed them into a separate package so you can use them in your projects:

yarn add shopify-nextjs-toolbox

https://github.com/ctrlaltdylan/shopify-nextjs-toolbox

You can use this package to migrate your existing apps off of cookie based auth, or use the example nextjs repo as a boilerplate for new apps.

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

MykalMachon commented 3 years ago

Just wanted to chime in and say I would love to see some official Shopify docs around this! I'm in the process of building a Shopify app with Next.js and auth has been the trickiest part to get right.

Even if you were to modify the current Next.js tutorial with Koa + cookie-based auth to work with session tokens, the custom server approach isn't really how Next.js recommends you handle server-side code in general anymore. Next's API routes have mostly replaced the need for a custom server, and seem like a much better abstraction IMO.

@ctrlaltdylan has done a great job of putting together a package to help with this, but I would love to see what Shopify themselves would recommend whether that's through an updated example, a tutorial, etc (even if it's just to use @ctrlaltdylan's package)

mattryles commented 3 years ago

The docs really need updating, as a new Shopify developer it was quite painful to run through a tutorial hosted in the official docs for it to be stuck in a "Enable Cookies" loop. Thanks @ctrlaltdylan for your effort here, it's very much appriciated by a developer trying to learn the Shopify app dev workflow.

mikeSTLMO commented 3 years ago

I am up and operating with next js and shopify app-bridge-* with both 1.3 (shopOrigin) and 2.0.3 (host). In both situations the built in routing system of Next js does not appear to work anymore. I can not use any of the shopify navigation tabs that you can install with the embedded app. I'm receiving messages that either shopOrigin or host (depending on the version) is needed. The only page that works is the index page configured in next.config.js. Any attempt to redirect to another page within the same site or use the tabs seems to do a full page refresh and send back index. Anyone else running into this problem?