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