Login button in React Test deployment is not responsive, no redirect occur, no error shown.

[dominikusbrian]

Hi there I am facing an issue with unresponsive login button. Which I expect to send me to the portal app after being clicked.

I checked the code I typed following the React single page app Tutorial, and also tested using the app I copy directly from github authgear-example-react repository without modification. Both exhibit similar behaviour.

noticing there is no error anywhere could be found, I am not sure where to check for issue.

I am using npm 8.19.2 and node v18.12.1 just in case there's compatibility issue I am not aware of.

Below is a screenshot of the deployed test app.

The screenshot for the onClick login button is attached below

Start login function is as follow:

[chpapa]

@dominikusbrian any error or messages shown in your Javascript Console? (On Chrome, click menu "View" -> "Developer" -> "Javascript Console"

also tested using the app I copy directly from github authgear-example-react repository without modification

Do you meant this repo?

https://github.com/authgear/authgear-example-react

[dominikusbrian]

Yes I am testing both with my own version and the github repo you mentioned.

The following below are inspection for my own version following the Authgear official React tutorial

Okay I followed the debug first step you suggested.
The issue is with CORS setting, I either need to allow it for authgear from my server, or maybe if it is safe enough to specify no-cors instead as suggested in the error code (attached below).

Meanwhile, I will try to see how I can fix this. Looking forward to great suggestion from the authgear team.

Best, Domi.

[dominikusbrian]

Added the following hook and headers,

now there's no error when Login button is clicked

but still its not sending me to the authentication page connected to my authgear app dreambrook.authgear.cloud

[dominikusbrian]

For the official unabriged copy (deployed in port 4001) from the repository the error are as follows:

To be sure, for deployment with the official repo, I also modified the endpoint app URIs as follow:

cmiiw~

[chpapa]

@dominikusbrian you should not need the hook to work around the CORS header.

When you add the Authorized Redirect URIs to Authgear Portal, it shall automatically add the URL to the CORS allow list of Authgear.

Please note that these URL must be exactly the same:

1. The URL on the browser location bar you saw.
2. The Authorized Redirect URIs
3. The redirectURI in your code.

If the URL is different, e.g. http://127.0.0.1 vs http://localhost, even both URL is the same, due to how browser security works, it would still be invalid.

I saw that in your screenshots you replace something with localhost, if you only use localhost:4000 as URL of all 3 above, would it works? If yes it is probably due to the misconfiguration as mention above.

If it works, would you mind to record the session in HAR file (ref: https://support.zendesk.com/hc/en-us/articles/4408828867098-Generating-a-HAR-file-for-troubleshooting-) and send it to [email protected] so we can looks into details?

[dominikusbrian]

Hi Ben, thank you for the instructions.
Unfortunately, without the hook and the work around it will still giving me error regarding CORS header.

I have changed the URL for point number 2 [The Authorized Redirect URIs] and 3 [The redirectURI in my code] to consistently be http://localhost and not http://127.0.0.1 or explicit IP address.

The one on my browser however is not localhost, because I am deploying the authgear app on an external server and do not do port forwarding for this purpose. So on my browser I am trying to access the page via http://[my server IP address]:4000. Would this be an issue with browser security ?

Let me also try deploying locally or via port forwarding to see if that's the case.

[after trying the above]
Using port forwarding through VSCode, it works properly now.
I can type localhost:4000 and now it shows what is expected. Hurray~

Thanks for the explanations that help finding where the issue is.
Next, step is for me to test this on how I can deploy them from the server side without needing to type http://localhost on my user's browser point of view.

Sure I will try to look into the session recording, I am using Brave browser which have a recording function for user experience, let me see whether it is compatible with the HAR file and will send it to [email protected] when its done.