Customer Cookie

[kogan007]

Bigcommerce changed the cookie header in the response from doing login mutation. You get 2 cookies, you need to concat them. Until this is fixed, login won't work on the preview site

Also a separate question, have you guys come up with any way to login the customer on the bigcommerce frontend? A logged in customer on the nextjs frontend will not be logged in at checkout.

[zachary-horvath]

I am also having these issues! Very frustrating.

[kogan007]

I am also having these issues! Very frustrating.

Before when the cookie came from bigcommerce it came as a string, now it is an array, I think one called shop_token and the other one is called shopper-pref, so you just have to set those as cookies on your frontend, and then you can send it as a header with graphql query to get the current customer

[clockelliptic]

I believe this may be a duplicate: https://github.com/vercel/commerce/issues/299

[clockelliptic]

I am also having these issues! Very frustrating.

Before when the cookie came from bigcommerce it came as a string, now it is an array, I think one called shop_token and the other one is called shopper-pref, so you just have to set those as cookies on your frontend, and then you can send it as a header with graphql query to get the current customer

the new token uses the key Shopper-Pref, but now SHOP_TOKEN is missing from cookies.... basically, this breaks wishlist and login functionality.

[kogan007]

I am also having these issues! Very frustrating.

Before when the cookie came from bigcommerce it came as a string, now it is an array, I think one called shop_token and the other one is called shopper-pref, so you just have to set those as cookies on your frontend, and then you can send it as a header with graphql query to get the current customer

the new token uses the key Shopper-Pref, but now SHOP_TOKEN is missing from cookies.... basically, this breaks wishlist and login functionality.

https://gist.github.com/jorgemasta/c709b63501344970026f3a3e7646cc77

try using this instead of the graphql cookie, it returns 3 cookies

[clockelliptic]

I just solved the problem for myself. I set the Shopper-Pref cookie like so:

I changed the async function login(){...} definition in the file framework/bigcommerce/auth/login.ts (lines 32-71) to the following:

async function login({
  query = loginMutation,
  variables,
  res: response,
  config,
}: {
  query?: string
  variables: LoginVariables
  res: ServerResponse
  config?: BigcommerceConfig
}): Promise<LoginResult> {
  config = getConfig(config)

  const { data, res } = await config.fetch<RecursivePartial<LoginMutation>>(
    query,
    { variables }
  )

   // Set-Cookie returns several cookies, we want SHOP_TOKEN and Shopper-pref
   let shopToken = getCookie(res.headers.get('Set-Cookie'), 'SHOP_TOKEN');
   let prefToken = getCookie(res.headers.get('Set-Cookie'), 'Shopper-Pref');
   if (shopToken && typeof shopToken === 'string') {
     // In development, don't set a secure shopToken or the browser will ignore it
     if (process.env.NODE_ENV !== 'production') {
       shopToken = shopToken.replace(/; Secure/gi, '')
       shopToken = shopToken.replace(/; SameSite=none/gi, '; SameSite=lax')
     }
     response.setHeader(
       'Set-Cookie',
       concatHeader(response.getHeader('Set-Cookie'), shopToken)!
     )
     response.setHeader(
       'Set-Cookie',
       concatHeader(response.getHeader('Set-Cookie'), `${prefToken}`)!
     )
    }
    
    return {
      result: data.login?.result,
    }
}

[zachary-horvath]

I just solved the problem for myself. I set the Shopper-Pref cookie like so:

I changed the async function login(){...} definition in the file framework/bigcommerce/auth/login.ts (lines 32-71) to the following:

async function login({
  query = loginMutation,
  variables,
  res: response,
  config,
}: {
  query?: string
  variables: LoginVariables
  res: ServerResponse
  config?: BigcommerceConfig
}): Promise<LoginResult> {
  config = getConfig(config)

  const { data, res } = await config.fetch<RecursivePartial<LoginMutation>>(
    query,
    { variables }
  )

   // Set-Cookie returns several cookies, we want SHOP_TOKEN and Shopper-pref
   let shopToken = getCookie(res.headers.get('Set-Cookie'), 'SHOP_TOKEN');
   let prefToken = getCookie(res.headers.get('Set-Cookie'), 'Shopper-Pref');
   if (shopToken && typeof shopToken === 'string') {
     // In development, don't set a secure shopToken or the browser will ignore it
     if (process.env.NODE_ENV !== 'production') {
       shopToken = shopToken.replace(/; Secure/gi, '')
       shopToken = shopToken.replace(/; SameSite=none/gi, '; SameSite=lax')
     }
     response.setHeader(
       'Set-Cookie',
       concatHeader(response.getHeader('Set-Cookie'), shopToken)!
     )
     response.setHeader(
       'Set-Cookie',
       concatHeader(response.getHeader('Set-Cookie'), `${prefToken}`)!
     )
    }
    
    return {
      result: data.login?.result,
    }
}

This did it for me. Using the getCookie function from @kogan007 I got this to work. Thank you all!

[srahman99]

@clockelliptic I have updated my code to cater for the multiple cookies as per your code above. However, when I'm redirected to the Bigcommerce checkout url, the customer is not logged in.

Any additional steps I need to take to make this work? Is your implementation based on using redirecting to Bigcommerce store checkout url as well?

[kogan007]

@clockelliptic I have updated my code to cater for the multiple cookies as per your code above. However, when I'm redirected to the Bigcommerce checkout url, the customer is not logged in.

Any additional steps I need to take to make this work? Is your implementation based on using redirecting to Bigcommerce store checkout url as well?

https://github.com/bigcommerce/storefront-data-hooks

For starters the checkout needs to be on a subdomain of your headless implementation

[Florian-crg]

Any news or merged request as been made on this issue ?

In my side, even using the getCookie from @kogan007's answer with @clockelliptic's code it does not work.

If I am already logged in when I proceed to checkout I got an error.

And as @kogan007 said

For starters the checkout needs to be on a subdomain of your headless implementation

my stores domain are, I think, well configured, regarding https://github.com/bigcommerce/storefront-data-hooks#checkout

Am I missing something else ?

[kogan007]

@Florian-crg Don't use the cookie code anymore. See this https://github.com/vercel/commerce/issues/531

You need to implement server session. Use the graphql login mutation and get the customer ID. Use the ID to create a customer impersonation token, and store it along with any other customer information you need in a secure session. Check out https://github.com/vvo/next-iron-session or Next Auth for implementing this.

Also for checkout code make sure the customer ID is an Int and not a string, and console.log the payload to make sure all the variables are there. You might be missing some environment variables.

[Florian-crg]

Yes you're right one of my variables had something. When you mean create a customer impersonation token you're talking about the BC route /storefront/api-token-customer-impersonation ?

Because I do not see any mention in the storefront customer impersonation token about the customer ID.

I feel lost between the doc and what I understand in the issues opened about the login.

[manovotny]

Hey there! Thank you for your contribution. We have decided to take Next.js Commerce in a new direction and will be closing out current PRs and issues due to this change. Please see this PR for more details: #966