Auth0, React, Configuring callback url for deployment

Question

I followed the tutorial given here : https://auth0.com/blog/role-based-access-control-rbac-and-react-apps/ and it works all fine on localhost. After deployment on a VPS (with Apache2), the callback url doesn't work anymore I get a 404 not found page from the server when I land on http://domainename/callback after authentication. I have taken care of changing the callback url when deploying both in the app and among the authorized callback url from auth0.

I have tried to use an # in the domaine name : http://domainame.com/#/callback but it doesn't work. I have two questions : how to make it works and why does it work on localhost:3000 and not on domainname.com...

Answer 1

Ok, the deal is not configuring react but configuring apache2. Here is what I did :

Allowing Override for the Webpage in order to authorize the reading of a .htaccess file

Creating a .htaccess file with the following content :

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>

Enabling mode_rewrite

Don't forget to allow the callback url in Auth0

Here is some documentation to help you :

• https://htaccess.madewithlove.be/
• How to enable mod_rewrite for Apache 2.2
• react-router redirect to index.html AND remove www from url in .htaccess
• https://gist.github.com/joellongie/e6f4a3b5fa98c521782619e487aca15a
• https://gist.github.com/leocaseiro/4305e06948aa97e77c93
• https://gist.github.com/jxnblk/6137537
• https://www.beyondjava.net/pretty-urls