Customer Accounts Dev Best Practices
rylanharper opened this issue · comments
Hey there 👋 Me again.
I was just wondering what you would recommend for best practices while developing the storefront for customer accounts. The docs is lacking a bit in this area. It would be best to add in more information such as first enabling user accounts in store settings, enable test-payments, etc..
The issue I keep running into is that when I create a "test" user account the email confirmation redirects me to the Shopify storefront (domain.myshopify.com) instead of the localhost. Do you recommend first setting the store up on a server (Netfliy or Vercel) or can I manage redirects in the Shopify store settings? This is my first time working with Gridsome/Shopify (instead of Nuxt and Shopify Api) and I am a bit lost here.
Also, I was wondering if you could just briefly explain how the accounts are created/stored with Vue Apollo and the storefront api.. I understand the Vuex store and all that (no need code explanations), but I just mean how everything fits together package wise just so I can understand. 🙃
👋🏻
As in the docs for this starter, or the Shopify docs? I could add more setup info, either way.
You should be able to edit the Shopify email templates, and replace the store domain with either localhost or the live domain (see an perhaps slightly out-of-date thread here). This way it will open on your site, and you can handle the confirmation/password recovery etc with the Storefront API as needed (e.g. https://shopify.dev/docs/storefront-api/reference/mutation/customerresetbyurl?api[version]=2020-04). I could probably add more docs/examples for that, too.
Sure - so, when you login, apollo runs a mutation that returns an access token, and customer info (should you need it). Then it should be stored somewhere - in this starter, I am using vuex-persist, so I run an action to save it to Vuex, and therefore persisted storage. When the website loads, it will restore the Vuex store, so you have your access token again, which can then be used in the apollo client to run authenticated queries.
It's much the same for register etc. Does that help?
Yes the docs for this starter 📝
Hmm I am still having some trouble trying it this afternoon. Seems my email-redirect is still not allowing to gain access to the account page.. when I try logging in I keep getting "Unidentified customer." I think a simple step-by-step on the docs would help for this. The Shopify customer account email should be (as an example) http://localhost:8080/account correct?
And thank you for explaining that for me it really clears things up! The only part I am still confused on is exactly how that mutation grabs the customer info/order history.. Is that just from the storefront api itself?
Ah, okay - at the moment, this starter doesn't handle any of that, you would need to write the code for it yourself. This was just meant to be a demo of how you can use auth with Gridsome. I can definitely add it, and add more documentation when I get some time though.
You would need to create a new page (like /activate) that would take that activation url, and run the customerActivateByUrl mutation.
Exactly, yes. I was wrong earlier, the login mutation doesn't return any customer data, just an access token. However you can just fetch customer data in a subsequent API call. For example, this query: https://github.com/thetre97/gridsome-starter-shopify-account/blob/70af502458c731aa02a37f5a9f5cbaf9eba91f3c/src/pages/Account.vue#L39
Ah okay I got it that makes more sense. Yes, I think adding some info to the docs regarding the correct way to setup the activation url would be great 😁
Thanks for your help so far on this!