How to create a non-embedded Standalone Shopify App

eddyreynoso
Tourist
5 0 3

I've been scratching my head for weeks trying to figure out the correct way to set up a non-embedded Shopify app. 

 

It seems like Shopify has removed all articles on setting up non-embedded apps and there don't seem to be any examples online. 

 

I've found the most difficult part is verifying requests from the Front End to the Custom Server. What is the correct, secure way to do this? 

 

Are there any guides that outline the exact steps to do this correctly? Code examples would be extremely helpful as well. 

 

I am using React/Nextjs and Nodejs.

Replies 14 (14)

HunkyBill
Shopify Expert
4851 60 554

An embedded App is simply an iframe element that Shopify places in the Admin. You know how iframes work right? One of the first HTML elements that we got to embed one website inside another.

Now, you want out of that. So you are now just hosting your own website. You are a non-embedded App. What is the question you have? You know how to set up a website since you probably have done that before. All the links you provide to Shopify in setting up point to your App. You choose NOT to be embedded. Now, when people access your App, they will be leaving Shopify Admin for your App. You still authenticate and render your App and all that, but not in an iframe.

In some respects, this is the easier way to go. You eliminate all the hassles of the authenticated iframe. You get to do as you please. When requests come to your App from Shopify, they are decorated the same. You get the HMAC, the shop, and the parameters. Nothing different. It is not like Shopify is going to treat your website differently because it is non-embedded, other than to not set you up inside that iframe.

Your best bet is to just spend a few minutes with a non-embedded App, do some tests, and convince yourself that it is no different than the embedded App in a sense. Shopify still sends requests to your endpoint that specify where you get to authenticate and act on those requests, and return results. 

 

 

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
eddyreynoso
Tourist
5 0 3

I understand that Shopify provides the shop, hmac, etc as query params when you first install the app as well as every time you click on the app from the admin dashboard.

Once you switch to another page, those query params disappear. 

I’m not sure what is the correct action to take with these query parameters such as whether I should store them as cookies and send them each time I make a request from my front end to my custom Nodejs server.

The process I’m having trouble with is figuring out the correct, secure way to make a request from my Nextjs front end to my Nodejs backend.

I believe there should be a middleware that verifies certain parameters. What are these parameters and how can I verify that they are correct? 

Where does my front end originally get these parameters and how do they persist on the front end?

HunkyBill
Shopify Expert
4851 60 554

You'll have to struggle with your App as any App developer would. Your front-end talks to your back-end using a session cookie if you follow the pattern of the past 20 years. The kids these days prefer JWT so you can try that. Once you establish a session, your front-end may still have to provide parameters, so that is up to you to figure out. So if Shopify sends you a shop, and a product ID to work with, in your App you'll like open a session for the Shop so the merchant does not have issues authenticating, and then you go to work doing whatever it is you do, with that ID. Sure, keep it a cookie. Or, pass it around in query params. It is a web App. You are the boss. You architect the same way 99% of any other web apps are built. Shopify is no different than any other system in this respect.

 

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
loganecolss
Excursionist
11 0 6

Hey HunkyBill, after reading your comments I still don't get how to make the app standalone.

We create the app using the shopify cli like `shopify node create`, and without changing a line of code, just start the node server and install this dummy app on the dev store, it's displayed inside the shop admin iframe, namely it's an embedded app.

Then I followed the steps describe in the documentation (https://shopify.dev/apps/tools/app-bridge/getting-started#embed-your-app-in-the-shopify-admin), to disable the embedded app, and restart my node server and refresh the shop admin, and re-open my app again, it's still displayed inside the admin iframe which means it's still not a standalone app.

What's going on here, and the documentation is wrong? How to make the app not displayed inside the admin iframe, and open with a new tab in my browser?

juanmaptag
Tourist
10 1 4

Hi Loganecolss!

 

It seems like we both were on the same track: I have also used Shopify CLI to create a Node+React app.

 

I tried to develop an embedded app but through my revision process I realized that wouldnt be the best case: So now I am trying to un-embedd it.

 

You took the first step correctly: But next in your _app.js file you have to change the forceRedirect param to false here:

 

class MyApp extends App {
  render() {
    const { Component, pageProps, host } = this.props;
    return (
      <AppProvider i18n={translations}>
        <Provider
          config={{
            apiKey: API_KEY,
            host: host,
            forceRedirect: false,
          }}
        >
          <MyProvider Component={Component} {...pageProps} />
        </Provider>
      </AppProvider>
    );
  }
}

 

That would prevent you from returning to the Admin embedded option... however that wouldnt be enough to make you app un-embedded as I understand that Shopify App Bridge is not to be used in non-embedded apps.

 

Have yo u manage to make some more progress with you transition to a non embedded app? Do you have some tips that could be useful?

 

Thanks! 

Obaida
Visitor
1 0 5

Hi,
1. You need to set IS_EMBEDDED_APP to false from your server index.js file

2. Set forceRedirect to false from your client App.jsx file

3. The most important part

  • Go to your partners account https://partners.shopify.com/organizations
  • Select you account
  • Click on Apps
  • Click the app name
  • Click App setup
  • In the Embedded app section, click Manage
  • In the Embed your app in Shopify admin section, click Disable

 

RyanWong
Visitor
3 0 1

This solved it for me. Thank you.

nabeelsidd
Shopify Partner
2 0 1

For anyone else coming across this later, I found this example repo, which may help: https://github.com/carstenlebek/shopify-non-embedded-app-template

 

Note: I haven't used it yet, but I think the authentication example is quite straightforward.

1080
Shopify Partner
296 9 50

how you fixed ?

Sherki
Shopify Partner
12 0 3

In CLI3 do make sure to replace any authenticatedFetch with normal node fetch.

zksumon
Shopify Partner
9 0 1

Thanks a lot Bro.

loganecolss
Excursionist
11 0 6

I'm having the same questions, hope anyone could provide some example code for building standalone apps.

OvenGui
Shopify Partner
5 0 1

Hi guys,

we are using vue as frontweb and python as backend for our non-embedded app,here is our example code for auth:

 

@shopify_router.get("/install")
async def shopify_install(request: Request, shop: str):
"""
shopify installation authentication and trusted authentication are the same url
1. Check the check. If the check fails, return to the shopify app listing page or Custom page
2. Check whether the store is installed or expired
2.1 If no, return to the shopify app listing page
3. After the installation is successful, the session information and jwt are provided to the front-end. Front-end subsequent requests carry jwt parameters

:param request: fast api request object
:param shop: shop info
:return:
"""
request_args = dict(request.query_params)
# pop hmac,hmac is not used to sign check.
hmac = request_args.pop("hmac", "")
if not hmac:
return RedirectResponse(url=f"https://www.google.com") # todo you can replace the page to anything customer page url
# change the key value with sort,otherwise the sha256 value is diff.
data = '&'.join([
'%s=%s' % (key, value)
for key, value in sorted(request_args.items())
])
is_auth = verify_webhook_data(data, hmac)
if not is_auth:
return RedirectResponse(url=f"https://www.google.com") # todo you can replace the page to anything customer page url

# TODO It is depens on you own bussiness flow.
is_installed = check_installed(shop)
if not is_installed:
return RedirectResponse(
url=f"https://{shop}/admin/oauth/authorize?"
f"client_id={Your App Client Id}"
f"&scope={Your App need Scopes}"
f"&state={}"
f"&redirect_uri={Your App Allowed Redirect Uri}"
)

# TODO if success,you can set your own jwt or cookie as response to web
return RedirectResponse()

 

def verify_webhook_data(data: str, hmac_header):
digest = hmac.new(
{Your App Secret}.encode("utf-8"),
data.encode("utf-8"),
digestmod=hashlib.sha256
)
computed_hmac = digest.hexdigest().encode("utf-8")
return hmac.compare_digest(computed_hmac, hmac_header.encode("utf-8")

 

 

P.S.

1. /install means shopify app url,you can set your own on app dashboard -> App Setup -> URLs -> App URL

 

If you have any questions,please reply to me and I will improve the answer.

ChrisBao
Shopify Partner
6 0 1

As the time of writing this reply(Dec of 2023), Let me share what I learned about this topic. 

 

 If you want  to setup a standalone Shopify App, then it will be 100% same as all other SaaS apps. The only difference is that the backend of it will communicate with Shopify APIs.  And this communication is protected by the access token got from Shopify OAuth workflow. 

 

And for the concern of authentication between the frontend and backend of your Standalone Shopify app, it is 100% controlled by yourself, which has no relationship with Shopify platform. So in theory you can use all kinds of authentication solutions for that. 

 

But in reality, set up a fully functional authentication workflow is not a simple task, which seems luxury for the Shopify developers. So you can rely on the App Bridge library of Shopify in the frontend, this library will get JWT token from Shopify platform easily. Then you need to add the JWT verification logics in your backend service. Based on my investigation, this is a better method.