Hey all! I have two login buttons that should direct users to two different routes/components. However, when a user signs in and I provide a specific URL, the redirection always defaults to the root path (‘/’). Is there a way to resolve this issue, or could my current setup be incorrect?
ReactDOM.createRoot(document.getElementById("root")).render(
<Auth0Provider
domain={authConfig.domain}
clientId={authConfig.clientId}
authorizationParams={authConfig.authorizationParams}
>
<QueryClientProvider client={queryClient}>
<BrowserRouter>
<StyledEngineProvider injectFirst>
<ThemeProvider theme={muiTheme}>
<CssBaseline />
<App />
</ThemeProvider>
</StyledEngineProvider>
{import.meta.env.MODE === "development" && (
<ReactQueryDevtools initialIsOpen={false} />
)}
</BrowserRouter>
</QueryClientProvider>
</Auth0Provider>,
);```
export const authConfig = {
domain: …,
clientId: …,
authorizationParams: {
redirect_uri: window.location.origin,
},
};
const onButtonClick = async (e) => {
e.preventDefault();
await loginWithRedirect({
redirect_uri: ${window.location.origin}/beneficiary-application-page-1,
});
};
<Button variant="contained" onClick={() => loginWithRedirect()}>
Login
</Button>
const App = () => {
return (
{/* Public Route */}
<Route path=“/” element={} />
{/* Protected Routes */}
<Route
path="/dashboard"
element={
<ProtectedRoute>
<Dashboard />
</ProtectedRoute>
}
/>
<Route
path="/feature-page-1"
element={
<ProtectedRoute>
<FeaturePage1 />
</ProtectedRoute>
}
/>
<Route
path="/feature-page-2"
element={
<ProtectedRoute>
<FeaturePage2 />
</ProtectedRoute>
}
/>
<Route
path="/profile-picture-page"
element={
<ProtectedRoute>
<ProfilePicturePage />
</ProtectedRoute>
}
/>
<Route
path="/edit-page"
element={
<ProtectedRoute>
<EditPage />
</ProtectedRoute>
}
/>
<Route
path="/application-step-1"
element={
<ProtectedRoute>
<ApplicationStep1 />
</ProtectedRoute>
}
/>
<Route
path="/criteria-check"
element={
<ProtectedRoute>
<CriteriaCheck />
</ProtectedRoute>
}
/>
{/* Standalone route for dynamic content */}
<Route path="/:dynamicId" element={<DynamicPage />} />
</Routes>
);
};
export default App;
// ProtectedRoute.jsx
import React from “react”;
import { useAuth0 } from “@auth0/auth0-react”;
import { Navigate } from “react-router-dom”;
import { Box, CircularProgress } from “@mui/material”;
const ProtectedRoute = ({ children }) => {
const { isAuthenticated, isLoading } = useAuth0();
if (isLoading) {
return (
<Box
sx={{
display: “flex”,
justifyContent: “center”,
alignItems: “center”,
height: “100vh”,
}}
>
);
}
return isAuthenticated ? children : ;
};
export default ProtectedRoute;