Issues with React Router and LoginwithRedirect

Help
,
1

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;