0

For example, assume I have a page called internal.tsx that has:

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const session = await getSession(ctx);
  if (!session) {
    // TODO: Add a toast notification explaining the redirect. Ideally, the desired destination should be remembered and should be redirected to after login.
    return {
      redirect: {
        destination: '/',
        permanent: false,
      },
    };
  }

  const props = ...
  return { props };
};

If a visitor browses to this page at /internal, they will get bounced to my signin page without explanation.

I instead want my signin page to show a toast notification at the top of the screen explaining that the page they tried to access requires a login and that they will be returned to that page once they log in.

I plan to use a library like https://github.com/fkhadra/react-toastify on the signin page but haven't been able to figure out how / where to read from the session that the visitor had just been redirected.

Ideally each page (such as /internal) initiating a redirection could specify its own custom message (e.g. saved to a "flash variable" in the session) for the signin page to display in the toast.

Ryan
  • 22,332
  • 31
  • 176
  • 357
  • I am assuming there is a reason for not using a good old url param in the redirect, perhaps a reasoncode or something so you can contextualize them? – Ramakay May 10 '22 at 18:39
  • @Ramakay Thanks for the suggestion but I'd rather manage it invisibly. Laravel in PHP made this easy with https://laravel.com/docs/9.x/session#flash-data, so I figured Next.js would have an easy way too. – Ryan May 10 '22 at 19:21
  • Attempted an answer below, i think it might need more revisions , let me know if you feel the direction is viable - cheers! – Ramakay May 11 '22 at 13:10
  • @Ramakay I also just added this more generic question: https://stackoverflow.com/questions/72206121/how-can-i-set-a-flash-variable-in-next-js-before-a-redirect – Ryan May 11 '22 at 18:45

1 Answers1

0

Attempting an answer here based on the comment above.

Instead of using Redirect, it might be better to use the context and set a new header and do a context.res.redirect which now contains the new header flashVariable (borrowing from Laravel) from my previous comment - the inbuilt redirect does not seem to have the ability to set these values.

i.e

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const session = await getSession(ctx);
  if (!session) {
   ctx.res.setHeader("yourFlashVariable", "yourFlashValue");
   ctx.res.redirect('/')
  }

  const props = ...
  return { props };
};

The in your / route, you can look for the FlashVariable and invoke the toast library.

Ramakay
  • 2,919
  • 1
  • 5
  • 21
  • Thanks for your suggestion. It looks really promising. But currently it's causing this error: `Property 'redirect' does not exist on type 'ServerResponse'.ts(2339)` – Ryan May 11 '22 at 18:07
  • 1
    Looks like someone already solved it - there is more to it - https://stackoverflow.com/a/68613720/13749957 – Ramakay May 11 '22 at 18:47
  • Thanks for sharing! That looked like a great hint. Unfortunately it was for an older version of Next.js. https://stackoverflow.com/questions/68613087/next-js-res-redirect-in-getserversideprops-res-redirect-is-not-a-function/68613720#comment127577753_68613720 So I'm still trying to figure it out. Thanks. – Ryan May 11 '22 at 22:01