how to redirect user back to the router came from after authentication

[ahakem]

Hello,
if the user opens a page which needs authentication I push him to the login page, but I need to push him back to this page
I achieved that in React using react-router-dom
but looking for a way in NextJS

I made that via a bad workaround but I think it's not a good idea.
router.push('/signin', router.pathname)
and on the other page

router.pathname !== router.asPath ? router.push(router.asPath) : router.push("/")

this will open him the signing page and will keep the old URL,

any better answer please?

[vassbence]

You can handle this by having an url query called next for example and have the sign in page read it and redirect accordingly.

Let's say someone goes to /dashboard but is not logged in, the user gets redirected to /login?next=%2Fdashboard and in the login form submission you check for this next query and redirect the user back where he came from or to the default path if the query is not present.

[ahakem]

I think I'll go with your answer as I could not find a better one. @vassbence

[EngrZaks]

One has to somehow, save the current route before redirecting.
What I did when I couldn't find the right answer was to use localStorage. How is that? 😂

[tilda-deimos]

router.back() can also be used to go back in history https://nextjs.org/docs/api-reference/next/router#routerback

[EngrZaks]

No way router.back() can be the solution!
Shouldn't that be like going back to the login page? 🤔

[genevieveikechukwu]

@EngrZaks yours worked for me. thank you.

[msalahz]

Hi @ahakem ,
you can simply check in the begging of your pages if the user is logged in and if not, render login component instead of current page UI without changing the page URL and when the user login, make sure current page gets rendered, and in this case, the logged-in flag should be false and your page UI should render normally. You can follow this post for more details. I hope this helps.

[BernardA]

@msalahz That's a very poor solution.Why doesn't Next uses the same solution applied elsewhere, ie, allow a state property in the route object that, if present, would indicate that a redirect happened from a private route and which page to forward the user to.
The login page also includes the layout ( header/footer), so you are saying we should render a page within a page - doubling header and footer or alternatively double all the login logic in a separate component.

[ahakem]

@BernardA, to be honest, it has totally different layout and different header and footer :D

[BernardA]

@ahakem Haven't tested yet, but this should work:

On the private route, do as indicated in this issue:

   componentDidMount() { // and/or componentDidUpdate, depending on what you're trying to do
      if (!auth) {
         Router.push({
               pathname: '/login',
               query: { from: {router.pathname} },
         }))
     }
   }

Then on the login page, after successful login:

    handlePostLoginOk = () => {
          const { router } = this.props;
          if (router.query && router.query.from) {
               router.push(router.query.from);
        }
  }

[ahakem]

will give it a try and let you know here @BernardA , tnx

[BernardA]

Please see edit

[ahakem]

@BernardA this is the same way as mentioned by @vassbence and it's working fine, I just used useEffect as I'm using functional Component

[marvellousadesanya]

How does one implement this same code base in Next 13?

[BernardA]

Fine, I thought you were trying the not so good solution above. As I mentioned, in other frameworks you can add a property to the route and check it on the next component/page. Not sure why Next isn't using established proper solutions.

[ahakem]

you can do that in react-router-dom simply, but asking the same thing here why Next not providing that!.

[U-4-E-A]

I didn't see this discussion before and I have asked for the same in this discussion (no replies yet). I am now looking at extending the NextRouter type definition to add this property myself.