search

bigcommerce / storefront-data-hooks

Hooks for React Storefront UI Components
MIT License
165 stars 36 forks source link

Sign Up and Login Data Hooks return Error but user is created and/or active in BigCommerce #13

Closed RayeEThompson closed 3 years ago

RayeEThompson commented 3 years ago

Reproduction Steps:

  1. Using the Next.js Commerce application, navigate to the customer login section. Sign Up to create a customer.
  2. You will be returned an error.
  3. Navigate to BigCommerce Store Control Panel - Customer was created and is active.
  4. Navigate back to Next.js Commerce application, and attempt to log in said customer, it will fail sometimes.
  5. Graphql works fine from playground, postman etc.
  6. No errors in BigCommerce.

Expected Result: User will be able to sign up and log in without errors being returned to the frontend.

Actual Result: User always experiences an error on Sign Up User sometimes experiences an error on Log in.

Per Research I have done with Nathan Booker, these are the best practices for implementing the Graphql Login:

  1. call login API from FE, cookie is set directly on your graphQL hostname (invisible to you), and future requests have customer-specific data
  2. call login API from BE, and if success response, set your OWN variety of cookie to store the customer ID, and send customer ID server-side with future requests (using customer impersonation token) This is what is happening:
  3. steal the cookie and proxy it for future requests from the BE
keaglin commented 3 years ago

I've run into this issue. So I have one created user account in the BC BE that can't login to the Next Commerce app.

derardeek commented 3 years ago

I've run into this issue. So I have one created user account in the BC BE that can't login to the Next Commerce app.

Getting the same issue,

AndreiBuh commented 3 years ago

I have the same issue with sign up hook.

holotus commented 3 years ago

Any work around at the moment?

magicspon commented 3 years ago

I'm also seeing this

The login mutation seems to be broken as well

image

AndreiBuh commented 3 years ago

any workaround? i still get the same problem with getting that error on sign up.

dy-byron commented 3 years ago

I had the store status on "Down for maintenance". So changing it to "Open" solved the problem.

Nick-Achee commented 3 years ago

Ive been trying to fix this all day as well. not sure what to do

magicspon commented 3 years ago

I've noticed that the graphql endpoint generated via the vercel integration is incorrect. I was getting errors when using a url like:

"https://store-60csalghrft-163774.mybigcommerce.com/graphql"

Switched to the "live domain" -> "https://mystore.mybigcommerce.com/graphql" now login/reg is functioning.

RayeEThompson commented 3 years ago

I've noticed that the graphql endpoint generated via the vercel integration is incorrect. I was getting errors when using a url like:

"https://store-60csalghrft-163774.mybigcommerce.com/graphql"

Switched to the "live domain" -> "https://mystore.mybigcommerce.com/graphql" now login/reg is functioning.

@magicspon: This would be a work-around correct, because you would prefer it to work locally and on dev environments?

RayeEThompson commented 3 years ago

any workaround? i still get the same problem with getting that error on sign up.

I've noticed that the graphql endpoint generated via the vercel integration is incorrect. I was getting errors when using a url like:

"https://store-60csalghrft-163774.mybigcommerce.com/graphql"

Switched to the "live domain" -> "https://mystore.mybigcommerce.com/graphql" now login/reg is functioning.

Strapazzon commented 3 years ago

For me, it was just the configuration of the store. Down for Maintenance image

pgvercel commented 3 years ago

I've noticed that the graphql endpoint generated via the vercel integration is incorrect. I was getting errors when using a url like:

"https://store-60csalghrft-163774.mybigcommerce.com/graphql"

Switched to the "live domain" -> "https://mystore.mybigcommerce.com/graphql" now login/reg is functioning.

Where did you switched that? in Vercel environment variables?

pgvercel commented 3 years ago

I still get that errors when sign up on dev environment and after deploy on Vercel. How can i resolve it?

AndreiBuh commented 3 years ago

Is anyone here that has the Sign Up / Login / Logout for BigCommerce + Nextjs starter template, working without errors?

derardeek commented 3 years ago

It seems that it does generate the wrong domain and we do need to get it live so we can actually run it, however the tokens no longer work

https://github.com/vercel/commerce/issues/122

Nick-Achee commented 3 years ago

yeah the tokens for login no longer work for me either.

On Sat, Dec 19, 2020 at 7:08 PM derardeek notifications@github.com wrote:

It seems that it does generate the wrong domain and we do need to get it live so we can actually run it, however the tokens no longer work

vercel/commerce#122 https://github.com/vercel/commerce/issues/122

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/bigcommerce/storefront-data-hooks/issues/13#issuecomment-748556382, or unsubscribe https://github.com/notifications/unsubscribe-auth/APJ6E5UNEHHGPEO5UJ3GZXDSVVTBJANCNFSM4UMAWH5A .

-- Waving [image: 👋]🏻 from Laguna,

Nick Achee | Digital Marketer web: www.nickachee.com cell: 949.320.3818

Nick-Achee commented 3 years ago

Ok so I've found the solution!

If you are still having problems With the graphQL env variables

Try switching out the

STOREFRONT_URL=

to be consistent with the name of your storefront

https://storefront.bigcommerce.com/graphQL

Like mentioned above by @RayeEThompson

After doing so the next env you are looking for is the STOREFRONT_TOKEN

to find this go into the "advance settings" then click on the graphQL playground.

On this page it will have two tabs at the bottom left corner that says "Query Variables" and "Http Headers"

Click on the tab that says "Http Headers" (see attached pic)

Inside this tab you will see something like this..

{ authorization: Bearer "ey..." } - this is your token (see attached)

Copy the entire string and paste it into your env and voila! You should be up and running. If this doesn't work try creating a new API and then try again.

Each time you make a new API this token changes so be aware!

Cheers! Nick :)

image image

pgvercel commented 3 years ago

Thanks, @Nick-Achee. Seems to be working fine now, without errors. But when you sign up, the customer seems to be returned null, using the useCustomer() hook from @bigcommerce/storefront-data-hooks/use-customer.

Nick-Achee commented 3 years ago

@pgvercel this seems to only be the case when developing locally.

Be sure to update the environment variable in the settings tab on the vercel dashboard for the site you are working with then redeploy.

It will work properly on the "live" version...

Example "https://mystore.vercel.app"

Im sure the BC engineers are working on fixing this part of the developer experience but this is the work around for now.

derardeek commented 3 years ago

@Nick-Achee and @pgvercel I can confirm this works both locally and production for now,

@RayeEThompson Should this work around be part of the vercel commerce Readme?

mountiny commented 3 years ago

@Nick-Achee God bless you! Saved a lot of time. It works on production Vercel, but it still return null as a customer on localhost, so it is unusable. Any tips for that? I have changed the env variables as suggested and I have also switched the advanced settings of Bigcommerce storefront to Open. Thank you!

Nick-Achee commented 3 years ago

Also another update!

The API PATH: that is generated on the txt file when creating a new API generates like so ..

Exp: "API PATH: https://api.bigcommerce.com/stores/{{store_id}}/v3/"

..but I've been removing the " /v3 off the end of url because when "compiling" it adds /v3 to the end of the URL... hope that helps also.

Nick-Achee commented 3 years ago

@Nick-Achee God bless you! Saved a lot of time. It works on production Vercel, but it still return null as a customer on localhost, so it is unusable. Any tips for that? I have changed the env variables as suggested and I have also switched the advanced settings of Bigcommerce storefront to Open. Thank you!

You can still make all your front end Tailwind changes locally. Then when you push your code out it will update said style changes and the customer login webhooks should work work live.

It is definitely still somewhat buggy and the graphQL Storefront Bearer token changes like every 2 days so I am constantly monitoring it and switching out the new token.

Vercel will statically serve the site too even if the graphQL token changes, however the "products" will not be fetched. You will hit a 500 error status when clicking on products tab. That's when you know it's time to switch out that Bearer Token again.

Heck might try and build a tool to help automatically update the key if it failed authentication with Puppeteer 🤪

Will keep you posted

Nick-Achee commented 3 years ago

I spoke too soon.. the "carts" hook isnt working properly.

mountiny commented 3 years ago

@Nick-Achee Yes, also noticed it and wasnt sure what is it. Out of a sudden the cart hooks returns 500 in my Next.js/commerce app. Any workarounds?

mountiny commented 3 years ago

@Nick-Achee Update from my side. From their storefront api documentation (https://developer.bigcommerce.com/api-reference/store-management/tokens) I have created new token using Postman and set the expires_at attribute to 2030 and so far, the token has been valid for 3 days and my cart or any other BigCommerce related function did not stop to work.

To get the token, create POST request to https://api.bigcommerce.com/stores/{{STORE_HASH}}/v3/storefront/api-token, in the headers add Content-Type: "application/json" and X-Auth-Token: "Your BigCommerce token" you can find in your store's settings.

The request body can look like this:

{ "channel_id": 1, "expires_at": 1924902692, "allowed_cors_origins": [ "https://your.url" ] }

This token together with the other steps mentioned above, solved the problem for me, although the login functionality does not work for me on localhost. Works well when deployed to Vercel, which is what matters.

I assume the token you can get in GraphQL Playground is set to expire every two days.

pgvercel commented 3 years ago

Hi. Using BigCommerce checkout solution, is there a way to keep the logged in user saved so that we don't need to login again in order to proceed to final steps?

pgvercel commented 3 years ago

@Nick-Achee Do you know if there is a data-hook for fetching orders available?

AndreiBuh commented 3 years ago

Has anyone fetched the orders history? there is not a storefront hook for that.

Nick-Achee commented 3 years ago

I have tried and noticed that it doesn’t work either 🤷‍♂️

On Jan 6, 2021, at 7:18 AM, Andrei Buhus notifications@github.com wrote:

 Has anyone fetched the orders history? there is not a storefront hook for that.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

keaglin commented 3 years ago

Still no official fix or word on when it might be fixed?

dankore commented 3 years ago

For me, it was just the configuration of the store. Down for Maintenance image

REMEMBER TO SAVE! i It worked for me after I finally remembered to save!

image

jorgemasta commented 3 years ago

Added a troubleshooting section in the Readme with most common issues.

dy-byron commented 3 years ago

I had the store status on "Down for maintenance". So changing it to "Open" solved the problem.

@jorgemasta @Strapazzon just showing the first appearance of this solution.

CrewHack commented 2 years ago

Pretty sure this is a non-issue. The Next.js commerce app sign in doesn't work right out of the box until you complete BigCommerce activation checks in your dashboard. Then click the "Launch" button that appears after completing all the checks. Sign up works fine after that.

29hsaeed commented 2 years ago

Solution for anyone struggling with getting the next.js demo work out of the box:

  1. After vercel deployment if your sign-up/sign-in isn't working:
    • make sure your bigcommerce storefront status is active (you can find it in the Channel Manager section)
  2. If your checkout page isn't working
    • you need to add the following Environment Variables for production in your vercel project's Setting -->Environment Variables section and then redeploy:
    • BIGCOMMERCE_STORE_API_STORE_HASH
    • BIGCOMMERCE_STORE_URL
    • BIGCOMMERCE_STORE_API_CLIENT_SECRET