Callback Url Clarification

Hi everyone,

I’ve been reading some Auth0 articles about configuring callback URLs and I’m seeking clarification to ensure I’m on the right track with my application setup.

Current Scenario: The authentication and navigation in my application work seamlessly. However, I’ve noticed that to allow a page to be refreshable, I need to add its URL to the callback URL field in the Auth0 Dashboard.

This process seems a bit time-consuming, especially when needing to add new pages to multiple applications. It makes me question whether I might have misunderstood something in the Auth0 configuration process.

Is this the standard method for implementing Auth0, or could I have potentially misconfigured a setting?

My architecture is a SPA, React JS, TypeScript, I’m using the latest version of everything and this is how my code look like:

// package.json

{
   "dependencies": {
     "@auth0/auth0-react": "^2.2.4",
     "react": "^18.2.0",
     "react-router-dom": "^6.21.1",
  }
}

// index.tsx
import { Auth0Provider } from '@auth0/auth0-react';
import { BrowserRouter } from 'react-router-dom';

(...)

const redirectUri = `${process.env.REACT_APP_AUTH0_ORIGIN_URL}${window.location.pathname}`;

root.render(
  <Auth0Provider
    domain={domain}
    clientId={clientId}
    authorizationParams={{
      redirect_uri: redirectUri,
      scope: 'openid email profile'
    }}
  >
    <HelmetProvider>
      <HumaitrixModalProvider>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </HumaitrixModalProvider>
    </HelmetProvider>
  </Auth0Provider>
);

// App.tsx
import { useAuth0 } from '@auth0/auth0-react';  
  const { isAuthenticated, isLoading, getIdTokenClaims, loginWithRedirect, logout, user } = useAuth0();

(...)
  useEffect(() => {
    (async () => {
      if (!isAuthenticated) {
          const claims = await getIdTokenClaims();
          const token = claims.__raw;

          // do something cool
      } else {
        // do something even more cool
      }
      })();
  }, [isAuthenticated, apiService]);

(...)

const authenticatedRoutes = (
    <Routes>
      <Route path='/' element={<WelcomeView {...defaultProps} />} />
      <Route path='/error-401' element={<Error401View />} />
      <Route path='/error-404' element={<Error404View />} />
      <Route path='/error-500' element={<Error500View />} />
      <Route path='/dashboard' element={<DashboardView {...defaultProps} />} />
      <Route path='/ask-ai/:conversationId?' element={<AskAiView {...defaultProps} />} />
      <Route path='/simulator' element={<SimulatorView {...defaultProps} />} />

   (...)
}

(...)

  return (
    <ThemeProvider>
      <LocalizationProvider>
        <CssBaseline />
        {isAuthenticated ? authenticatedRoutes : publicRoutes}
      </LocalizationProvider>
    </ThemeProvider>
  );
};

Thank you in advance for any clarification. I’ve tried to find answers in previous discussions (e.g., Callback URL mismatch when changing the Allowed Callback URL of the application), but most seem to revolve around the use of wildcards, which I understand are not permitted."

Best,
daniel

Hi @daniel.santana,

Thanks for reaching out to the Auth0 Community!

If you are using a single application to redirect your users to different callback URLs based on the login process they initiate, then the list of allowed callback URLs you have included looks good so far.

Could you please clarify if you are encountering any callback URL mismatch errors?

And if you do need to use wildcards as a placeholder, I recommend referring to our Subdomain URL Placeholders documentation.

Thanks,
Rueben

1 Like

Hi Rueben, thanks for the great material you shared.

Regarding your question: no callback URL mismatch errors. Everything is going smooth on my implementation. Thanks for asking.

My issue was more like an understanding. Even knowing the documentation is rich in details I was afraid I was doing something wrong because of React Route v6.

Which leads me to another question still on this topic:

  • Pretty clear, from the doc you shared, how to use subdomain placeholders (https://*.domain.com, for instance)
  • What I couldn’t find is how to set a callback for a route with parameters.

For example: http://localhost:3000/ask-ai/65a8192def333

I tried the wildcard. Maybe for localhost it won’t work, but how about https?

Kind regards,
daniel

Hi @daniel.santana,

Thanks for the update and reply.

Unfortunately, it won’t be possible to use the wildcard in the way that you intend. If you have dynamic callback URLs with different parameters, this is not supported.

This is also mentioned in our Dynamic Callback URLs with Wildcards knowledge solution.

In this situation, you will have to have use specific callback URLs and include them in your Allowed Callback URLs list.

I hope this helps!

Thanks,
Rueben