FrontEnd Shows "Unexpected End of JSON Input"

[kfayal-iotecha]

After deploying the back end and adding a user in cognito, I started the front end with npm run dev, then accessed the front end via the URL link http://localhost:5173/. I then entered the email address of the user I added in Cognito and clicked Next. Next the following screen appeared with the text "Unexpected End of JSON Input" at the bottom of the screen.

[ottokruse]

Hi mate. Thanks for reporting.

Have a look in the network tab of your browser and see what data is actually coming back? My guess is it's not JSON but some error HTML or so. Probably the root cause is in there.

[kfayal-iotecha]

Ah yes, it is showing that there is an attempt to connect to: http://localhost:5173/changeme/sign-in-challenge, and it's getting a 404 error.

I have set up the .env-local with the outputs of the backend CDK. It seems like that "changeme" in the url is supposed to be replaced with something?

[kfayal-iotecha]

I have also tried to deploy to my AWS account by running ./deploy-spa.cjs. But when I do I run into the following error:

/home/kfayal/projects/amazon-cognito-passwordless-auth/end-to-end-example/client/node_modules/@smithy/config-resolver/dist-cjs/index.js:117
    throw new Error("Region is missing");
          ^

Error: Region is missing
    at default (/home/kfayal/projects/amazon-cognito-passwordless-auth/end-to-end-example/client/node_modules/@smithy/config-resolver/dist-cjs/index.js:117:11)
    at /home/kfayal/projects/amazon-cognito-passwordless-auth/end-to-end-example/client/node_modules/@smithy/node-config-provider/dist-cjs/index.js:72:104
    at /home/kfayal/projects/amazon-cognito-passwordless-auth/end-to-end-example/client/node_modules/@smithy/property-provider/dist-cjs/index.js:79:33

Node.js v20.6.1

But when I echo my AWS_REGION environment variable, it shows us-east-1, which is where I've deployed the back end.

[kfayal-iotecha]

Steps to duplicate:

1. In Windows WSL2 (Ubuntu) clone project to /projects folder
2. NPM install and deploy backend CDK according to instructions in Backend CDK readme (Successful)
3. Create user account in Cognito user pool created by deployment of backend
4. NPM install and npm run dev frontend. Go to http://localhost:5173 to get login page.
5. Enter users email and click Next (shows screen in first post)

[ottokruse]

Can you double check the name of your .env.local file? (Note the dots, you have a dash in the name I see in your comment but maybe that's not right)

[kfayal-iotecha]

Oh boy.. nice to have another set of eyes. Eiii.. Yes, that .env.local was the cause of the issue for "Unexpected end of JSON input"! So it runs locally now.

I am still trying to deploy the SPA to S3 using the deploy-spa.cjs script, but I'm still getting the same error. "Error: Region is missing" I realize this is two topics under the same issue.. Should I open another issue?

[kfayal-iotecha]

I'm going to close this issue because I can get it to work on my Mac, but not in WIndows for some reason.

[kfayal-iotecha]

I was easily able to get this to work on my Mac, but had problems with getting it to work in my Ubuntu WSL2 environment. So closing it.