is that possible to use admin APIs in frontend directly in the store without app

[pavansingh]

I want to hidden public pages that are show the open orders when the user who knows the path of the page and when he visits the page he will able yo see the order in a list. and the same for the inventory of the products.

[HunkyBill]

If you know how to make and install an App (admin API) in a store, then you can use the App Proxy for your purposes. You can place a callback to your App Proxy anywhere in your store. So when you know a user knows what they want, you can do a callback asking for the special info only the Admin API can get for you. Your response to the callback can be JSON, or Liquid. Either way, your front-end code can present the results, and you are securely using the Admin API in the front-end without security issues.

[abdurrakib528]

@HunkyBill Hi, is there any instructions to create proxy app and make admin api calls in the frontend? 

Thanks 

[HunkyBill]

https://shopify.dev/apps/online-store/app-proxies

[jstukey]

Hi Bill (who is hunky),

I'm a long time Shopify theme developer but very new to app dev and am killing myself over what feels like a simple concept that you touched on above. 

My goal:
From my store theme files, I want to either write some javascript that will create a customer metafield or call in a javascript file from my app that does this.

I realize to write a customer metafield programmatically, I need to be authenticated with an app and make either a rest or graphql call. I of course do not want to do this directly in the theme code as to not expose my app's credentials.

I cannot for the life of me figure out how to make this happen and have tried so many approaches.

For example, I was able to whip up a simple node app with express (not based on shopify documentation - just testing the concept quickly) where on the server side I set up a route app.post for an endpoint I named 'write-metafields'. Within that route on the server I then call the shopify admin api using my private app credentials and it returns what I need no problem.

Then, from a public folder/url (client side) I can test hitting that server endpoint 'write-metafields' and return that json response (originally from shopify admin api), back over to the browser without exposing my credentials. That felt like progress to me...

But then, I realized - doh! Anybody can now hit that write-metafields endpoint on my server and write metafields to my store, right? I've hidden the authentication details, but now they are obsolete anyway - right?

So then I decided to try spinning up Shopify's sample app and build it as a public app instead. I see that their sample connects the front end to the backend api calls BUT their 'front end' is all within the Shopify admin, not on the storefront and now I am frustrated and stumped. For example, the sample app has a button in the app page (within the shopify admin) that creates products (front end button - triggers backend api call...). I need to do the same (essentially), but from the theme where the customer pushes that button, not the admin. I must be missing something!

As you can tell, I'm really VERY new at dealing with apps. I'm reading a TON but just cannot get through this basic concept and I know once I do it will unlock a lot of things I want to try building.

I looked into testing theme block extensions but that won't work as I need to add this script in my theme to checkout.liquid (and yes, I'm on a plus store and have access to this, and yes, I know checkout.liquid will be phased out soon...).

If there is anything at all you would be willing to share to help me get over this hump I'd be incredibly appreciative.

Thanks so much in advance,
Jackie

[HunkyBill]

Hi,

Say you have a back-end App that is installed in the Shopify store, and it has permission to write metafields on a Customer resource. Fine. Aces. A-OK. Easy stuff. If you dig into that App you will realize in 2022 there are two new things available to you and that App. 

1. Theme App Extension - lets you place some HTML/Liquid, JS and CSS inside a store nice and clean. 
2. App Proxy in the App, an endpoint you can call from a front-end store with XHR (Ajax)!

So your theme app extension JS calls /app/beer or /tools/vodka or /community/knitting and your App then gets a secure call from Shopify, so you know it comes from Shopify for that store, and you are then free to do what you want. Shopify also apparently might even provide the customer ID these days if they are logged in. Now you get to securely use that to do whatever your App wants. You are free to return JSON to your front-end. 

In your theme app extension JS, the response to calling the proxy therefore, is all secure, cool, and has no CORS issues or other problems. It is not exactly perfect, but it is what it is, and you can use that for life.