Custom storefront wishlist using Admin API

[Famous_Fella]

Hello,

I am new to the shopify world and I recently started experimenting on how to use shopify as a headless CMS to build an ecommerce platform. 

The technology stack I picked was Next.JS with typescript so I started off using the vercel starter template which uses the shopify platform together with the storefront API to build a custom ecommerce platform deployed to Vercel. Now I am trying to figure out how I could implement a wishlist.

My original plan was to create a customer metafield in JSON format that could be used to store productIds.

Digging around (as I stated I am a fresher to shopify development) and as I understand it up to this point, and please correct me if I am wrong, I can use the storefront API to retrieve the metafield (aka wishlist) but in order to send the actual customerUpdate mutation I would need to use the Admin API but using the admin API from the frontend is not allowed to prevent security issues. 

I read the documentation about the node.js api library as well as some other libraries created by developpers (next-shopify-toolbox) but this only added more confusion as to how I can go on to implementing the feature, mostly because the libraries give examples for private apps and not custom storefronts. 

Can I for example, use the api routes that nextjs 10 provides, to authenticate and send the customerUpdate mutation?
Do I need ngrok ? why? 

What kind of authentication must/should use? 0Auth? basic-http? session-tokens?
Will I need to authenticate everytime the customer clicks "Add-to-Wishlist" button? 

Will this strategy fail if lots of users hit "Add-to-Wishlist" button as I will eventually cap the request limit?

[Jannik_Hansen]

Hi there, 

Not really too difficult... To get from frontend to backend you need to use app-proxy: https://shopify.dev/apps/online-store/app-proxies

Takes 30 sec to set up - and then you can access the admin api accordingly. 

[Famous_Fella]

Hello Janik, 

thank you for your time to help me. Could you care to ellaborate more on the app proxy? How should I go about implementing the feature in my next.js project?

[Jannik_Hansen]

I've never used Next.JS.... 

But for an example... I make a PHP file in the private app... 

Call it through the app proxy.. 

And now I can load it in the theme without being blocked by CORS. 

Do some googling - or otherwise maybe hire a specialist for a few hours to teach you this. 

[Famous_Fella]

I am not building a private app. I guess this was the main reason of confusion. I am building a custom storefront using next.JS. Shopify exists on my project only as a headless CMS. I am not using any shopify themes for the project. I basically only make use of the cart, customer, inventory and products functionalities of shopify.