Try SuperTokens in under 1 Minute Fails

[danhumphrey]

🐛 Bug Report

Executing the following from your quick start instructions fails:

1. npx create-supertokens-app@latest
2. cd my-app
3. npm run start

I see the following:

The app launches to a blank grey screen with no UI:

I decided to try the non localhost url and it loads, however, any action on the UI (trying to sign up with email and password, or Google etc.) results in the 'Something went wrong' error and I've now lost faith and don't feel like exploring supertokens any more....

I don't know if your intention with the quick start is only to demo what the UI looks like without it being functional, but if that's the case, then maybe you should explain this in the quick start instructions.

If there are other dependencies and/or pre-requisites, then this should also be made clear.

Either way, I think a quick start intro to a product or service should be seamless and error free.

Useful informations

[rishabhpoddar]

This is strange. Whats the error you see on the network tab when you click on the sign in button?

[rishabhpoddar]

I just tried the CLI with the same options and node version as you did, and it worked. Which OS are you using?

[danhumphrey]

Apologies, I should have given more info sooner.

On the localhost url there are no errors in the console.

On the network URL:

At this stage, immediately after loading:

I see this in the console:

After refreshing the page (no UI interaction), I see this:

⚠️ As an aside, weird that it mentions React when I chose Vue.

After clicking the button:

After clicking 'Continue with Google':

Bear in mind that I had already deleted the directory I created this morning, so this is a reproduction of the issue I faced earlier.

Mac OS Sonoma 14.5 M2 Chip

I tried in Brave earlier, but just tried Safari and get the same error

Let me know if I can help further.

Dan

[rishabhpoddar]

As an aside, weird that it mentions React when I chose Vue.

Thsi is expected. We only have pre built Ui for react, and therefore we load react and the pre built UI on the /auth page of the application.

Can you also show me the network tab response please? Perhaps send the HAR file.

Thanks

[danhumphrey]

Thsi is expected. We only have pre built Ui for react, and therefore we load react and the pre built UI on the /auth page of the application.

Understood, thanks!

supertokens.txt

HAR file attached, although I had to change the file extension to upload it here

[rishabhpoddar]

Unfortunately, the har file deosn't show the status codes of the API calls. I suspect that the backend node server in the example didn't start for you for some reason.

Can you run npm run start:backend and show the output? Thanks

[danhumphrey]

If I run that independently (e.g. I'm not running the app and it isn't already running the API server on port 3001), then I get the following:

[rishabhpoddar]

Right, so this means it worked. Now if the frontend is not able to communicate to the backend, it may be an issue with your node version (try v18 or v16), or some firewall setting on your system.

[danhumphrey]

Neither of the ports are blocked - I run various different servers (vite, webpack) and can spin up http-server on the ports you use without anything being blocked.

Sorry, I don't have time to try different node versions at the moment. Feel free to close the bug if you don't think it's an issue to be solved.

[rishabhpoddar]

Will keep it open in case someone else can reproduce this issue. Thanks