Headless Customer Log In

pristas-peter
Tourist
5 0 3

Hello, I have a problem with Lite plan. I am developing my online store on another platform (gatsby js + apollo), but using shopify checkout and Storefront API. I want to use the customers feauture in checkout however I am unable to login customer through the API.

 

I am using checkoutCustomerAssociateV2 mutation, however the customer is still not logged in when in checkout, only the email address is associated. So my question is how can I log in customer properly from the API so he can use his addresses in checkout.

 

If it is not possible I have no problem that the customer have to click Log In in checkout to log himself in, however what it does now is to go myshopify.com/account/login and displays liquid theme from non existent online store. How can I access this login template without an online store? If I can't (which I would consider as a big bug from your side) can I use reverse proxy to checkout page without getting a ban and then be able to use my custom login page on that url (I could have than sent request to your login page behind the scenes to get proper cookie and redirect user back to the checkout page).

 

Thank you. I hope you have some resolutions for me.

Replies 10 (10)

pristas-peter
Tourist
5 0 3

I have found out that the REST api admin is the answer.

Nesters
Shopify Partner
19 1 19

Hey,

 

Could you please elaborate how you have come to the conclusion that "REST Admin API" is the answer. There is no way for you to authenticate the customer via Admin API.

You can, however, create a custom checkout experience that way but that would come with some noticeable limitations.

 

Keep in mind that if you associate customer to Checkout, all the customer related discounts will apply in the Checkout.

 

Some things in Shopify Checkout seem to rely on Shopify Storefront cookies so that probably also applies to customer session to identify customer as logged in.

 

 

Contact me: mail@nesters.me
Technical solutions / integration / headless ecommerce.
Latest post: Benefits of JAMstack ecommerce
Nesters
Shopify Partner
19 1 19

I went over to test it and came across the documentation here addressing this issue.

 

Caution

If you complete a checkout for a logged-in customer, then the customer is prompted to log in again. You currently cannot use theX-Shopify-Customer-Access-Token header to preserve authentication when the customer is associated to the checkout.

Looks like we currently don't have a straightforward option to achieve this.

Contact me: mail@nesters.me
Technical solutions / integration / headless ecommerce.
Latest post: Benefits of JAMstack ecommerce
pristas-peter
Tourist
5 0 3

My biggest problem was that i could not modify login page from checkout, because there are no templates in shopify lite program. However I have found out that I can modify the login template liquid file through REST.

 

Then I have added to the login template JS a code to accept some query parameters and if they are present the login form is automatically submitted. This is then requested on my gatsby site alongside the mutation within hidden iframe.

 

Nesters
Shopify Partner
19 1 19

Don't forget that any login requests to Shopify Storefront will trigger a CAPTCHA after couple unsuccessful attempts and the user will be locked out of logging in for 24 hours.

It used to be possible to request Shopify that CAPTCHA is disabled on your store, however, as you are using Lite, you are not supposed to have Storefront in the first place. 🙂

 

I have used a similar strategy before, just not with Shopify Lite (didn't know it would actually work).

 

EDIT: You could technically delay posting authentication to Shopify Storefront until it's been successfully authenticated via Storefront API.

Contact me: mail@nesters.me
Technical solutions / integration / headless ecommerce.
Latest post: Benefits of JAMstack ecommerce
pristas-peter
Tourist
5 0 3

Yes, I only authenticate with iframe when I have successfully obtained the token.

Trevor
Community Moderator
3391 459 977

Hey, everyone! 

 

We’re following up on this thread as it mentions the Shopify Lite plan. 

 

We’d like to announce that as of June 22nd, 2022, we have launched the Shopify Starter Plan! The Starter Plan will be $5 per month and will be replacing the Shopify Lite plan ($9/month). 

 

The Starter Plan includes everything merchants need to build social-first businesses, on their phone. The plan allows merchants to create product pages that are easily shareable across social and messaging apps, powered by Shopify checkout, payment, order, and analytics features. 


You can learn more about the Shopify Starter Plan here


Disclaimer: Due to the age of this thread, we will be locking the thread for new replies. Please create a new thread under the Shopify Discussions board for questions relating to the Starter plan.

Trevor | Community Moderator @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

SwitchmodeNZ
Shopify Partner
4 0 1

First, thanks for sharing this approach!

 

I have a question about this as I attempt to implement it (it seems like the only way) - loading a store template via iframe has this in the response headers:

 

X-Frame-Options: deny;
content-security-policy: ...frame-ancestors 'none';...

 Which produces the error: 

 

Refused to display 'https://****' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'none'".

 

Did you run into this &/or have a way around it? (I'm sort of wondering if lite mode is a sneaky way around this issue). I would really rather use the token but it appears we have no choice.. Shopify in Headless mode feels a bit unfinished in places..

Switchmode
Shopify Partner
2 1 1

Following up in case anyone else runs into this. Shopify disabled loading storefronts inside iframes on stores made after ~2017 and there's no way to disable it like there is with the challenge captcha.

 

So it appears that (for now at least) this isn't possible outside of Shopify Plus.

pristas-peter
Tourist
5 0 3
What I actually ended up with was to redirect to the shopify actual url using window.location.href and then doing the same in shopify liquid inside