Auth0 react app in a subfolder

Help
,
1

I’m working on a react app which uses the auth0 quickstart as a base (and am new to React). The app is in a folder in a site with wordpress at the root. It is hosted by a webhost. The “member” app should be totally separate from the rest of the site and the only part of the site with authentication. I have the react app on its own in localhost working.

When I use it on the webhost, I hit login and get the message
"unauthorized_client: Callback URL mismatch. https://www.example.org/member is not in the list of allowed callback URLs”. It is in the list of allowed callbacks though.

I have tried to figure this out and have tried changing the following but then changed them back

  • using permutations of “homepage” in the react package.json,
  • using permutations of “basename” on the router,
  • changing the htaccess file in the site route (which is a very long file made by the webhost and it gets changed when wordpress or the version of php is updated)
  • changing the htaccess file in the member folder

Thanks in advance,

Miriam

settings
settings666×3058 303 KB

1 Like
2

I had the same issue with deploying the app on an Apache HTTP server in a subfolder named ‘testLogin’. The root web page is our corporate page. Auth0 kept trying to use the root address but that was not listed in the Allowed Callbacks URLs in the Auth0 Application. In order to fix this I had to modify the authorizationParams in the index.js file:

  authorizationParams: {
    redirect_uri: window.location.origin + '/testLogin',
    ...(config.audience ? { audience: config.audience } : null),
  },

Note that I modified the “redirect_uri: window.location.origin,” line to “redirect_uri: window.location.origin + ‘/testLogin’,” This allowed the login to work and redirect to the specifice subfolder.

Note also that I have the homepage property set in the package.json file set with

"homepage": "https://{my domain}/testLogin",

I also have an .htaccess file in the public folder as well with a RedirectMatch set to the full URL to the subfolder:

    Options -MultiViews
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [QSA,L]
    RedirectMatch ^/$ "https://{my domain}/testLogin/"

With the above done, I can successfully login on the subfolder application and get returned to that subfolder application.

I am now experiencing a similar difficulty on Logout. If I set the Allowed Logout URLs to the path of the subfolder (`https://{my domain}/testLogin’) I get the Callback URL mismatch error. If I change that to ‘https://{my domain}’ it works but is redirected to the root web page and not that of the subfolder application. Reading the documents I try including the returnTo option (https://{my domain}/testLogin, https://{my domain}?returnTo=https://{my domain}/testLogin&client_id={CLIENT_ID}) but this does exactly the same thing by returning to the root web page.

Perhaps you can help me resolve the logout issue that it should return to the subfolder application and not the root application?

3

Ok, I will answer my own question. Needed to modify the component NarBar.js by appending “testLogin” to the window.location.origin value in the logoutWithRedirect method declaration. The returnTo part is no longer needed in the Allowed Logout URLs and just changed it to https://{my domain}/testLogin. Everything works now.

  const logoutWithRedirect = () =>
    logout({
        logoutParams: {
          returnTo: window.location.origin + '/testLogin',
        }
    });