Newb question -- hello world react app doesn't work

Help
,
1

I’m just trying to follow follow the “choose your own stack” tutorial for React and Express, and I can’t get it working correctly.

Behavior:

  1. When I go to my https://localhost:4040 url, it shows a spinner for 60+ seconds before showing me the page. In the console it reads:

Failed to load resource: the server responded with a status of 400 () … domain_name.us.auth0.com/authorize?client_id=clientID&scope=openid+profile+email&redirect_uri=http%3A%2F%2Flocalhost%3A4040%2Fcallback&prompt=none&response_type=code&response_mode=web_message&state=blphajVNSEVHWFBsV25sdW5SV3JLcm5sb25rbkpnTU5rSzd0MVFOcmZyLg%3D%3D&nonce=MS53OWlzOWxudURMVmk5TzZraGd6TEMwa2N6NGVSLUJwVDA0QXBjT1VPbg%3D%3D&code_challenge=IDREMqzy4of-qH43lSkro4UAeLRlHbhuS-2hq3S1mdo&code_challenge_method=S256&auth0Client=eyJuYW1lIjoiYXV0aDAtcmVhY3QiLCJ2ZXJzaW9uIjoiMi4wLjAifQ%3D%3D:1

From the network:Headers panel
https://domain_name.us.auth0.com/authorize?client_id=tanvglrxgePkncAMgDdFY9Zw47TdEAPq&scope=openid+profile+email&redirect_uri=http%3A%2F%2Flocalhost%3A4040%2Fcallback&prompt=none&response_type=code&response_mode=web_message&state=ZWRmVkN4M3RJaGg1d21EYzNVT3dCcEt0VVcuLlBRc1VfYzhab3RTRXVqMQ%3D%3D&nonce=OTlXd0YtZjNXSjFBRjR0YjliYjJrNm9MYWdsdDllV212R1BZMDZrMGdTNA%3D%3D&code_challenge=T_vhFifnthyny8u9SFbmuLZbuL5v7TnS018qZ7WnQLA&code_challenge_method=S256&auth0Client=eyJuYW1lIjoiYXV0aDAtcmVhY3QiLCJ2ZXJzaW9uIjoiMi4wLjAifQ%3D%3D

Request Method:
GET

Status Code:
400 Bad Request

Remote Address:
104.19.167.24:443

Referrer Policy:
strict-origin-when-cross-origin

  1. After it finally loads, I click “Login” and it brings me to the generic signup/login page. I log in and get to the profile page, which looks correct.

  2. When I click on “Protected” or “Admin” in the nav bar, the message shows:
    {
    “message”: “Requires authentication”
    }

I assume that I am misconfiguring somehow. Here’s me FE .env file…

REACT_APP_AUTH0_DOMAIN=Auth0Domain
REACT_APP_AUTH0_CLIENT_ID=ClientID
REACT_APP_AUTH0_CALLBACK_URL=http://localhost:4040/callback
REACT_APP_AUTH0_AUDIENCE=https://hello-world.example.com
REACT_APP_API_SERVER_URL=http://localhost:6060

The tutorial on the site DOES NOT HAVE AN EXAMPLE ENV FILE. So I have no idea if this is right or if I got it totally wrong. It also does not have a troubleshooting section.

Can anyone help me? Thank you in advance!

2

Hi @vineel

Welcome to the Auth0 Community!

Thank you for posting your question; I’ve edited your code to remove PII information like a domain name or client.

First, you can safely remove the protocol from the Auth0Domain value "https://"; it’s unnecessary and can cause issues. In terms of other values, check if they are aligned with the Auth0 settings that you can check in the Auth0 Dashboard. You can also check if the express server runs on the correct port. Let me know if this helps you.

Thanks
Dawid

3

Thank you for your response Dawid. I removed the https (I had added it when I was trying to make stuff work) and I double-checked all the fields. No joy. I’ve given up on the React tutorial altogether. I assume I made some fatal mistake somewhere along the line and will have no way of figuring out what went wrong.

So, I created a new account with a new email and a new tenant and was able to get a plain javascript app up and running on that, which seems to behave correctly. I’m going to try to climb the learning curve from that.

Thanks again for the response.
Vineel