Following the Node+React tutorial I end up with https://undefined/admin/oauth/authorize

Solved
artooras
Tourist
7 0 3

Hi. I'm building a public app, and I followed the instructions in the Node+React tutorial to the t. I finished the setup until the end of part 3. Embed your app in Shopify, and I'm stuck with an issue...

Before setting up the server.js file, i.e. when the dev script was still just "dev": "next", everything worked fine, i.e. I could see my initial page on http://localhost:3000. However, when I have created the server.js file following the steps in the tutorial and changed the script into "dev": "node server.js", when I visit http://localhost:3000, I end up with the following in the url:

 

https://undefined/admin/oauth/authorize?client_id=CLIENT_ID&scope=read_products&redirect_uri=REDIRECT_URI&state=STATE&grant_options%5B%5D=per-user

 

 

Notice the undefined in the URL.  I tried looking everywhere, reviewing my steps, but I cannot find the issue. My .env file includes keys for SHOPIFY_API_KEY, SHOPIFY_API_SECRET, SHOPIFY_API_SCOPES and SHOPIFY_APP_URL as per instructions, and my server.js looks like this:

require('isomorphic-fetch')
const Koa = require('koa')
const next = require('next')
const Router = require('koa-router')
const {default: Shopify, ApiVersion} = require('@shopify/shopify-api')
const {default: createShopifyAuth, verifyRequest} = require('@shopify/koa-shopify-auth')
require('dotenv').config()

Shopify.Context.initialize({
  API_KEY: process.env.SHOPIFY_API_KEY,
  API_SECRET_KEY: process.env.SHOPIFY_API_SECRET,
  SCOPES: process.env.SHOPIFY_API_SCOPES.split(','),
  HOST_NAME: process.env.SHOPIFY_APP_URL.replace(/https:\/\//, ''),
  IS_EMBEDDED_APP: true,
  API_VERSION: ApiVersion.July21,
  SESSION_STORAGE: new Shopify.Session.MemorySessionStorage()
})

const port = parseInt(process.env.PORT, 10) || 3000
const dev = process.env.NODE_ENV !== 'production'
const app = next({dev})
const handle = app.getRequestHandler()

const ACTIVE_SHOPIFY_SHOPS = {}

app.prepare().then(() => {

  const server = new Koa()
  const router = new Router()
  server.keys = [Shopify.Context.API_SECRET_KEY]

  server.use(
    createShopifyAuth({
      afterAuth(context) {
        const {shop, scope} = context.state.shopify
        ACTIVE_SHOPIFY_SHOPS[shop] = scope
        context.redirect(`/`)
      },
    }),
  )

  const handleRequest = async (context) => {
    await handle(context.req, context.res)
    context.respond = false
    context.res.statusCode = 200
  }

  router.get('/', async (context) => {

    const shop = context.query.shop

    if (ACTIVE_SHOPIFY_SHOPS[shop] === undefined) {
      context.redirect(`/auth?shop=${shop}`)
    } else {
      await handleRequest(context)
    }
  })

  router.get('(/_next/static/.*)', handleRequest)
  router.get('/_next/webpack-hmr', handleRequest)
  router.get('(.*)', verifyRequest(), handleRequest)

  server.use(router.allowedMethods())
  server.use(router.routes())

  server.listen(port, () => {
    console.log(`> Ready on http://localhost:${port}`)
  })
})

I'm quite literally stuck, I'm not sure what it is I'm doing wrong. Is there perhaps anything in the shop setup that I may have missed?

kojo
Shopify Staff
Shopify Staff
2 1 0

This is an accepted solution.

Hey @artooras,

Just to confirm, have you completed the steps to authenticate your app against a test store? After completing most of step 3 of the guide you will need to authenticate your app with a test shop and run it to view it in the Shop admin. At this point, your app will not load on `localhost:3000` because it is expecting to operate in Shopify context (ie. be authenticated with a Shopify store and be running embedded within the Shop admin).

The URL you posted above, is an example of the link Shopify store's will use to install your link. The `undefined` in this case should be the `shop-origin` (e.g. teststore.myshopify.com). I'm assuming it's `undefined` in this case because you are not viewing it from your development store's shop admin?

https://undefined/admin/oauth/authorize?client_id=CLIENT_ID&scope=read_products&redirect_uri=REDIRECT_URI&state=STATE&grant_options%5B%5D=per-user



0 Likes
artooras
Tourist
7 0 3

Hi @kojo . Thanks for the tip, this actually works now. It was confusing because I was getting the same result with the "undefined" in the URL when installing on a development store as well, so I figured that since I'm getting the same result either locally or trying to install onto a development store, I would try and debug locally.

In any case, after multiple tries to install my app on the development store and failing (with the "undefined" URL), I accidentally refreshed the store admin page and the app appeared! Perhaps it was there installed for quite some time, but I never saw it as I simply hadn't refreshed. In any case, perhaps the steps in the tutorial could be reviewed a little to highlight this point.

Thanks again!

kojo
Shopify Staff
Shopify Staff
2 1 0

Glad to hear you fixed the issue @artooras! And thanks for the feedback. I can definitely understand your confusion. We'll take a look at the guide and see where we can make things clearer.

0 Likes