Redirecting to previous page after Auth0 sign-in

Question

Upon entering a protected route the user gets redirected to auth0 as follows:

/user/home -> auth0 login -> /user/home

or

/user/profile/id123 -> auth0 login -> /user/home

but always to the callback url (/user/home in this case)

Using the following code

function Auth0RedirectWrapper(props: { children: ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment; }) {
 
// redirects user to an Auth0 sign-in page with 'http://localhost:3000/user/home' as callback 

}

function Profile() {
    let params = useParams();
    return(<p>Profile of {params.userId}<p/>)
}

function App() {
    return (
        <BrowserRouter>
          <Routes>
                <Route element={<Auth0RedirectWrapper><Outlet /></Auth0RedirectWrapper>} >
                    <Route path='/user/home' element={<p>Welcome home </>} />
                    <Route path='/user/profile/:userId' element={<Profile/>} />
                </Route>
            </Routes>
        </BrowserRouter>
    );
}

The question: what is the prefered method of always redirecting to the page a user visited initially?

e.g. /user/profile/id123 -> auth0 login -> /user/home would become /user/profile/id123 -> auth0 login -> /user/profile/id123

Using:

• ReactJs
• Auth0
• React-router v6
• Auth0-react

Answer 1

The solution I came up with is saving the currentpage in the localStorage. Then set the callback to a designated url \redirectAfterLogin. When visiting \redirectAfterLogin use react-router's Navigate component to redirect to the page saved in localStorage.

function Auth0RedirectWrapper(props: { children: ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment; }) {
 
// redirects user to an Auth0 sign-in page with 'http://localhost:3000/redirectAfterLogin' as callback 

}

function App() {
    return (
        <BrowserRouter>
            <RedirectingRouter />
        </BrowserRouter>
    );
}

function RedirectingRouter() {

    //save previous path so that we can return to it after auth0 authentication
    let location = useLocation();
    let [prevPath, setPrevPath] = useState(localStorage.getItem('prevPage'));

    useEffect(() => {
        setPrevPath(localStorage.getItem('prevPage'));
        if (location.pathname !== '/redirectAfterLogin') localStorage.setItem('prevPage', location.pathname)
    }, [location])

    return (

        <Routes>
            <Route element={<Auth0RedirectWrapper><Outlet /></Auth0RedirectWrapper>} >
                <Route path='/redirectAfterLogin' element={<Navigate to={prevPath ? prevPath : '/user/home'} replace />} />
                    <Route path='/user/home' element={<p>Welcome home </>} />
                    <Route path='/user/profile/:userId' element={<Profile/>} />
                </Route>
            </Routes>
        </BrowserRouter>
    );
    )
}