Advice On How To Redirect To Dynamic Callback URL Using WithAuthenticationRequired HOC

Help
, ,
1

SDK: @auth0/auth0-react version
SDK Version: 1.3.0
Platform Version: 17.0.1

Hi There

I’m trying to implement dynamic callback_urls for my react SPA using the WithAuthenticationRequired HOC

General guidance on how to do this is given here

However I am using the WithAuthenticationRequired HOC to handle auth and am unable to directly call auth0.loginWithRedirect() directly.

Similarly I can’t call auth0.handleRedirectCallback() to fetch the url to redirect users to after auth

Has anyone had any experience with implementing the above?

Any thoughts would be greatly welcomed

index.js

 const history = createBrowserHistory();
 
>const onRedirectCallback = (appState) => {
   history.replace(appState?.returnTo || history.location.pathname);
 };
 
 if (document.getElementById("app-root")) {

     ReactDOM.render(
         <Auth0Provider
             domain="*redacted*"
             clientId="*redacted*"
             audience="https:/creative_approvals_tool/api"
            scope="read:current_user update:current_user_metadata"
             redirectUri={`http://localhost:3000${history.location.pathname}`}
             onRedirectCallback={onRedirectCallback}
         >
              <Router history={history}>
                 <app.App/>
              </Router>
         </Auth0Provider>
        , document.getElementById("app-root"))
 
 }

Blockquote

**private_route.js**

const ProtectedRoute = ({component, ...args}) => (
    <Route
        component={withAuthenticationRequired(component, {
            onRedirecting: () => <LoadingScreen/>,returnTo:args.computedMatch.url,
        })}
        {...args}
    />
);

**app.js**

export function App() {
    return (
        <main>
            <AppNavbar/>
            <Switch>
                <Route exact path='/' component={Home}/>
                <ProtectedRoute exact path={'/view_template_variation/:template_variation_id'} component={TemplateVariation}/>
                <Route component={errors.Error}/>
            </Switch>
        </main>
    )

}