Web Checkout URL Without Login #105
Replies: 19 comments 52 replies
|
Currently facing the same issue which makes it impossible to have a complete storefront if customer login is required prior to checkout. I don't have much to add because you've pretty much covered everything so just adding this here in hopes that this request gains traction. On my end, I have also tried making use of the cartBuyerIdentityUpdate mutation after customer login on my hydrogen storefront, but that ultimately had no effect in the checkout flow (once my user clicks checkout on the hydrogen app, it redirects them to the shopify hosted site (example.myshopify.com) login screen). |
bro did you find any solution? |
|
I recently refactored one of my stores from checkout to cart using storefront api. When using the checkout I managed to get the email registered and showing up on the checkout page. This I haven't accomplished on the new Cart api. I wonder why that mutation to add customerAccessToken is even there, it seems it has no effect at all. |
|
Completely agree... Baffled. I have their access token, I don't understand why I can't log the user ON PAGE in to the store when I literally have their access token created by email/pw. Seems like a major oversight from Shopify to force users to use only the normal signup or login - god forbid you have any sort of flow that needs this inside of another flow. |
|
I'm also extremely interested to see a nice solution for this issue. Even the Multipass route seems unnecessarily complicated and does indeed require the Plus subscription which, let's be frank is not an option for many store owners. There's also a thread open on Shopify community on this exact same topic that hasn't gained any traction from the Shopify side. Is this something the storefront product team is thinking about/planning to fix and when might we see a resolution @vixdug? It's little things like this that make it harder to push headless Shopify to customers that are actively asking for it 🤷♂️. Shouldn't |
|
Hey Everyone 👋 Just wanted to mention having an authenticated buyer on a custom storefront be persisted over to the Shopify web checkout is something we've heard, and is being worked on. I can't share any timeline as of yet, but we know this is really important to the community and we want to get this right for all merchant types. The I know it's not an authenticated buyer that everyone here is after, but I wanted to add that on navigation to the Shopify web checkout, checkout form fields can be appended as query string parameters to the |
|
Hey @tobbbe 👋 . While not documented, phone |
|
Oh okey! Gonna try that then. Thanks!! Unfortunately this project isn't on a Plus plan so I can't use checkout extensibility platform. |
|
While someone not on a Plus can't use something like a checkout ui extension, their storefront is likely still on the latest version of checkout which should support the |
|
Ohh! Awesome! Trying that tomorrow. |
|
Hey @johncraigcole, quick follow up question, is this planned to remain exclusive for new customer accounts? While I would love to not have to use multipass, we can't get lost of classic accounts yet. |
|
Why not try this API? |
|
tried. no luck. |
|
@johncraigcole Would love to have an update on this when you have time. |
|
Thanks for the ping @arobbins . At summer editions, we actually introduced our new customer account api that will support auth into checkout. We're early days and the Customer account API is still in unstable, but we're targeting it's first stable release for For headless merchants not using the Hydrogen channel, you'll need to use our Headless channel instead of configuring a custom app that has Storefront API access. The headless and hydrogen channels provide access to the the necessary customer account type settings like Callback uri's, origin, logout url etc. In addition to using the headless channel, there are some other important requirements.
|
|
@vixdug I have recorded a video for you to show what is happening on frontend (request ids in the brackets) screencap-2024-05-15T171713.123Z.mp4
|
|
It seems that checkoutUrl after the first execution "is broken" and when the user tries to execute it later buyerIdentity data is ignored. I have tested this on mobile and web and in both cases the result is the same. |
|
+1 |
|
@vixdug any updates on the above issue? I see that checkoutURL is being redirected from: Can it be a potential source of the problem? |
|
@vixdug @johncraigcole I have a similar problem explained in the comments above. Any update on it? |
|
Hey, I think you are misunderstanding. A lot of us are trying to use
Shopify's customer accounts to log in to Shopify, on Shopify... Can you
explain how graphql on a hosted Shopify store in a liquid theme can be used
to log a customer in? There is email and password graphql for the customer
access token, but there seems to be no way to actually log the customer in
with it.
I am talking about normal Shopify accounts here. Not third party auth, and
not Multipass.
…On Wed, Sep 13, 2023, 7:54 PM 'JohnCCole' via DevOps < ***@***.***> wrote:
@electricenjindevops <https://github.com/electricenjindevops> if Shopify
is not managing authentication (you're using a 3rd party), in the future
the new customer accounts and public api will support authentication via a
3rd party. I don't have a timeline to share on when this will be available.
Today, the only way to implement your own auth, and have the customer be
logged in, is only possible for a Plus merchant with multipass.
—
Reply to this email directly, view it on GitHub
<#105 (reply in thread)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AZUTVRHGCCMGLVHYZLU32VTX2JBUFANCNFSM5VBAFXIQ>
.
You are receiving this because you were mentioned.Message ID:
<Shopify/storefront-api-feedback/repo-discussions/105/comments/6995836@
github.com>
|
|
The Storefront API can not be used to a log a customer in to the online store. It can only be used to generate an acces token from which you can then query for information about the customer, and make changes to the customer such as adding additonal addresses. I'm curious about the use case of not wanting to use the default login Shopify provides with online store. |
|
They sign up in a custom form, we pass that to our backend, we create the Shopify account for them (and other accounts / data saves), and then we return success to frontend. In this case, we got it working - because the user just signed up, they have their plaintext password/email in the form already (and we never save their password in plaintext) so we can trigger auto-login from Javascript using the form data. We got it all working, but wish this had been more well-documented. The use case is a custom signup leading to an automatic login without a page refresh / redirect / etc. It works currently for us. |
|
Figured it out, finally. Why this is not more well documented is beyond me.
You just send a post to /account/login with correct form data and
form_type=customer_login and it logs them right in.
The use case is we ask user to create an account, we send to our own API.
In our own api, we create a Shopify account, a Salesforce profile, a Venly
address, and more. Now, finally, we can silently log them in to their brand
new Shopify account automatically before they even finish the next page of
our form wizard.
I cannot for the life of me figure out why on-site Shopify login with JS is
not more publicly documented. Forcing stores to use official login and sign
up pages would eliminate so many use cases. Yes, we use Shopify, but it's
not the main account for our customers and its part of a bigger user flow
so it was never an option to redirect them to the normal sign up.
…On Wed, Sep 13, 2023, 8:32 PM 'JohnCCole' via DevOps < ***@***.***> wrote:
The Storefront API can not be used to a log a customer in to the online
store. It can only be used to generate an acces token from which you can
then query for information about the customer, and make changes to the
customer such as adding additonal addresses.
I'm curious about the use case of not wanting to use the default login
Shopify provides with online store.
—
Reply to this email directly, view it on GitHub
<#105 (reply in thread)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AZUTVRELMDR55O3FX4MQ53TX2JGBJANCNFSM5VBAFXIQ>
.
You are receiving this because you were mentioned.Message ID:
<Shopify/storefront-api-feedback/repo-discussions/105/comments/6996020@
github.com>
|
|
That requires you to save the user's password in plain text, isn't it? |
|
Yes to plaintext data, no to the saving. We have a signup form inside of |
|
I'm facing the same issues with not finding a way to log in a customer via API. One question about your approach: |
|
Is this still working for you? @electricenjindevops |
|
On ours, this is what we did:
- Registration form ON shopify
- Send details to our backend API, via a shopify proxy app
- Create accounts on Shopify, Auth0, Salesforce, Venly
- Send success message back to frontend
- Because the user filled out the form w/ their email & password ON
shopify, we just take the form values and submit to the login route ON
shopify.
…On Fri, Jan 26, 2024 at 6:17 AM 'Julian Garcia Castillo' via DevOps < ***@***.***> wrote:
I'm facing the same issues with not finding a way to log in a customer via
API. One question about your approach:
From where are you making the post request to /account/login ? A custom
app? From within the storefront? Or from a external site? Because I'm
getting CORS errors. Thanks!
—
Reply to this email directly, view it on GitHub
<#105 (reply in thread)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AZUTVRDL4JNWBFWIXPNKJ5TYQOGE5AVCNFSM5VBAFXI2U5DIOJSWCZC7NNSXTOKENFZWG5LTONUW63SDN5WW2ZLOOQ5TQMRVGU4DSNQ>
.
You are receiving this because you were mentioned.Message ID:
<Shopify/storefront-api-feedback/repo-discussions/105/comments/8255896@
github.com>
|
|
Greetings I am not sure if this is solved but essentially from what I understand you create the customer access token from their email and password then you create the cart and open the checkoutUrl with these variables so this will even be better becuase instead of email it connect to the correct shopify account My question is (unrelated) |
|
Doesn't work for me. mutation CreateCart {
cartCreate(
input: {buyerIdentity: {email: "wangchenyu2017@gmail.com", customerAccessToken: ",,,"}, lines: [{quantity: 1, merchandiseId: "gid://shopify/ProductVariant/..." }]}
) {
cart {
checkoutUrl
}
}
}Then I copy the checkout url to the browser. Still, the user is redirected to the login page in the liquid store instead of going to checkout with an identify associated with Update: I was using 2023-10 but 2024-4/2024-7 also doesn't work for me. |
|
im not familiar with shopify liquid, there is also the cart url in the docs you will have to double check. |
|
I believe this only works for the Hydrogen sales channel. |
|
Since it's been almost a year, I was wondering if you could provide an update on when this should start working with the Storefront API—without Hydrogen? As a reminder of my setup:
It sounds like passing the |
|
Hey I sent you an email I got my setup working and would like to try to help if I can. Im having issues with shopify subscriptions, maybe we have mutual interest maybe I can learn a thing or two |
|
Hey folks, anything new about this topic? I'm with the same issue. The New Customer API 2024-10 does not keep the customer authenticated when goes to checkout page. |
|
MY SOLUTION (workaround): The Shopify Customer API doc mentions appending |
|
how did u manage to transform the cart to checkout url ? |
|
Earlier this month support was added to ensure a buyer is authenticated at checkout provided the This should work for both classic customer accounts where a customer access token is created from a customer email and password via customerAccessTokenCreate, or with new customer accounts using an access token obtained with the customer account api. |
|
Unfortunately, neither the cart-to-checkout URL transformation using the logged_in query parameter nor the customerAccessToken method with buyerIdentity upgrade is working. Has anyone found a solution to this issue? Strangely, the API response indicates that everything is functioning correctly. The shopping cart session is associated with my user identity. However, when I navigate to the checkout page, the user is no longer logged in. |
|
Same. Sometimes this works when using GraphiQL, but that is not consistent. import {redirect, json} from '@remix-run/react';
export const loader = async ({request, context}) => {
const cartID = context.cart.getCartId();
const customerAccessToken = await context.session.get('customerAccessToken');
const {cartBuyerIdentityUpdate} = await context.storefront.mutate(
CART_MUTATION,
{
variables: {
cartID,
buyerIdentity: {
customerAccessToken
}
}
}
)
const {cart} = await context.storefront.query(
CHECKOUT_URL_QUERY,
{
variables: {
cartID: cartBuyerIdentityUpdate.cart.id
}
}
)
return redirect(cart.checkoutUrl);
};
export default function CheckoutUrl() {
return null;
}
const CHECKOUT_URL_QUERY = `#graphql
query checkoutURL(
$cartID: ID!
) {
cart(id: $cartID) {
checkoutUrl
id
buyerIdentity {
email
phone
countryCode
customer {
acceptsMarketing
createdAt
displayName
email
id
}
}
}
}
`;
const CART_MUTATION = `#graphql
mutation cartBuyerIdentityUpdate ($cartID: ID!, $buyerIdentity: CartBuyerIdentityInput!) {
cartBuyerIdentityUpdate(
cartId: $cartID
buyerIdentity: $buyerIdentity
) {
cart {
id
checkoutUrl
}
userErrors {
field
message
}
}
}
` |
|
|
GPT says....
*context.cart.getCartId() is not guaranteed to be defined in a loader*
Shopify Hydrogen/Remix context methods like context.cart.getCartId() *are
client-specific* and may not work in a loader, which runs *server-side*. If
no cart is initialized on the server yet, this returns undefined.
This import is incorrect. @remix-run/react is for components. In a *loader*,
you should import from:
import {redirect, json} from ***@***.***/node';
This can cause silent errors or inconsistent behavior, depending on your
bundler and environment.
Shopify *will not return a cart object if the mutation fails* (e.g.,
invalid/expired customerAccessToken). You’re accessing
cartBuyerIdentityUpdate.cart.id directly without checking userErrors.
if (cartBuyerIdentityUpdate.userErrors.length > 0) {
throw new Error(cartBuyerIdentityUpdate.userErrors[0].message);
}
You already have checkoutUrl in cartBuyerIdentityUpdate.cart. You don’t
need to re-query the cart.
return redirect(cartBuyerIdentityUpdate.cart.checkoutUrl);
*Fixed version (from GPT):*
import {redirect, json} from ***@***.***/node';
export const loader = async ({request, context}) => {
const cartID = context.cart.getCartId();
const customerAccessToken = await
context.session.get('customerAccessToken');
if (!cartID || !customerAccessToken) {
throw new Error('Missing cartID or customerAccessToken');
}
const {cartBuyerIdentityUpdate} = await context.storefront.mutate(
CART_MUTATION,
{
variables: {
cartID,
buyerIdentity: {
customerAccessToken
}
}
}
);
if (cartBuyerIdentityUpdate.userErrors.length > 0) {
throw new Error(cartBuyerIdentityUpdate.userErrors[0].message);
}
const checkoutUrl = cartBuyerIdentityUpdate.cart.checkoutUrl;
return redirect(checkoutUrl);
};
…On Thu, Apr 10, 2025 at 1:24 PM 'matt-meagher' via DevOps < ***@***.***> wrote:
Same. Sometimes this works when using GraphiQL, but that is not consistent.
I even set up a route in remix to do this and it has yet to work:
import {redirect, json} from ***@***.***/react';
export const loader = async ({request, context}) => {
const cartID = context.cart.getCartId();
const customerAccessToken = await context.session.get('customerAccessToken');
const {cartBuyerIdentityUpdate} = await context.storefront.mutate(
CART_MUTATION,
{
variables: {
cartID,
buyerIdentity: {
customerAccessToken
}
}
}
)
const {cart} = await context.storefront.query(
CHECKOUT_URL_QUERY,
{
variables: {
cartID: cartBuyerIdentityUpdate.cart.id
}
}
)
return redirect(cartBuyerIdentityUpdate.cart.checkoutUrl);};
export default function CheckoutUrl() {
return null;}
const CHECKOUT_URL_QUERY = `#graphql query checkoutURL( $cartID: ID! ) { cart(id: $cartID) { checkoutUrl id buyerIdentity { email phone countryCode customer { acceptsMarketing createdAt displayName email id } } } }`;
const CART_MUTATION = `#graphql mutation cartBuyerIdentityUpdate ($cartID: ID!, $buyerIdentity: CartBuyerIdentityInput!) { cartBuyerIdentityUpdate( cartId: $cartID buyerIdentity: $buyerIdentity ) { cart { id checkoutUrl } userErrors { field message } } }`
—
Reply to this email directly, view it on GitHub
<#105 (reply in thread)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AZUTVRDNZBVZSJ7PFAGDF4T2Y2SL5AVCNFSM5VBAFXI2U5DIOJSWCZC7NNSXTOSENFZWG5LTONUW63SDN5WW2ZLOOQ5TCMRXHE2DMNBS>
.
You are receiving this because you were mentioned.Message ID:
<Shopify/storefront-api-feedback/repo-discussions/105/comments/12794642@
github.com>
|
|
We have implemented this using the latest APIs. It works when the checkout is opened for the first time, but if I close it and open the checkout again, it redirects to the login page. We have verified that the cartBuyerIdentity is correct and that the latest checkout URL is being opened. This issue also occurs when using the Checkout Sheet Kit in React Native. We are testing this in a React Native environment.
|
|
This solved the same issue discussed in the issue: |
and others
Uh oh!
There was an error while loading. Please reload this page.
FEATURE REQUEST
Thanks in advance for you help!
The Shopify GraphQL Storefront API is awesome. Unfortunately, it has a huge user experience limitation that is quite PAINFUL to run into after developing a custom storefront for Shopify.
LIMITATION
If you complete a checkout for a logged in customer, then the customer is prompted to log in again.
You can't use the
X-Shopify-Customer-Access-Tokenheader to preserve authentication when the customer is associated to the checkout.Multipass login requires additional server side setup and costs $2,000 a month.
Your custom storefront is not truly headless because the Shopify login pages are required for checkout.
https://shopify.dev/api/examples/checkout#complete-a-checkout-for-a-logged-in-customer
SECURITY
It looks like the security concern is stated here: 'Shopify/js-buy-sdk#561 (comment)'
The
customerAccessTokencan also be "shared or stored [and gives] direct access to customer details" so I'm a little confused about why the unauthenticatedwebUrlis any less secure than thecustomerAccessToken. Could you just limit the number of times thewebUrlis able to be used for a checkout request to tighten up the security issues? Similarly, could you limit the time that thewebUrlis valid for?POSSIBLE SOLUTION
If a
webUrlis less secure for some reason, then would it be secure to put thecustomerAccessTokenor some other token in a cookie that the web checkout form, living on a subdomain, could access to log the customer in?and
All reactions