Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

Redirect to original url after login on react


Hello,

I am using the react demo and was wondering where is the best place to implement an automatic redirect after login to the original private url that was intercepted by the login.

What would your suggestion be?

Thanks in advance!


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (9)


I don't understand why this query became resolved without any answer happy



Sorry, this ticket was closed accidentally.

Check the reply below.



Hi,

This must be implemented by default in the latest Metronic v8.0.35.

If the user is not authenticated then it will be redirected to the login page otherwise to the /dashboard page.

Check react/demo1/src/app/routing/Routes.tsx file.



Hi,

Yes, but my question is regarding, if the user is not logged in and the url is something like /private-page/sub-page then one is redirected to the login, and after the login the user is not redirected back to that original url, but the dashboard.

We would like the login to redirect to the original private url that was caught by authentication. Where and how would you recommend to do this?



Hi,

I think to achieve this in our current system you can try to use react-router-last-location dependency.

Check their GitHub page:
https://www.npmjs.com/package/react-router-last-location

After successful login, you can redirect the user back to the last location which you can get using the react-router-last-location dependency.

And then in file demo1/src/app/modules/auth/components/Login.tsx after successfull login make a redirect as shown below.

import { useHistory } from "react-router-dom";


let history = useHistory();


history.push(lastLocation.pathname);



Thanks for the awesome tip! I tried it and it works.

To simplify it further, I ended up using a url query string that is parsed and redirected to in the Routes.tsx module and the useLocation() hook to pass the original url as a query string in the AuthPage.tsx



Hi Lauris,

It seems that with the new Metronic and React Router v6 update the whole routing structure has changed and this needs to be re-implemented. What would you suggest is the best way to do this?

Thanks!



Just wanted to let you know that I managed to do this by writing a wrapper around the to='/auth' redirect in AppRoutes.tsx and another one to read the query string after login in PrivateRoutes.tsx.



Hi,

It has to be the same solution, based on the wrapper data you need to navigate to the original URL instead of '/dashboard' in the app/routing/PrivateRoutes.tsx file (row 22).
React-Router update from 5 to 6 doc: https://reactrouter.com/docs/en/v6/upgrading/v5.

Regards,
Keenthemes support


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(