fix: Fixes a server client boundary error

[thiessenp-cds]

Summary | Résumé

Fixes a prod error where NextJS tried to server render some client code. Here is the prod error for reference: "ReferenceError: sessionStorage is not defined"

Test

One way to test this is to programmatically trigger the MFA page to sever side render (See Bryan's comment below).
Do this by:

Reproduce the error

1. Checkout the develop branch and add a button like the below on the login page (outside the form element)

      <Button onClick={() => { window.location.href = `/${language}/auth/mfa/resend`; }}>
        test
      </Button>

2. Click the button and watch your dev console, you should see something like this
   

Verify the error is gone

1. Checkout fix/3915 (this branch) and add the button like in the above
2. Click the button and the error in the dev console about sessionStorage being undefined should be gone

[github-actions]

🧪 Review environment

https://annkiztqr2gm73n5wjwsxxtwha0pomae.lambda-url.ca-central-1.on.aws/

[thiessenp-cds]

I really wanted to use the new React hook use() but ran into some errors and an open bug. I wasn't able to find a work around so I sadly went with the old style.
For reference:
facebook/react#26930
and then this
vercel/next.js#51477

[timarney]

@thiessenp-cds can you add test instructions ?

[thiessenp-cds]

@thiessenp-cds can you add test instructions ?

This is a difficult one to test. The error only happens sometimes and manually throwing an error etc. won't really help since it's a hydration related. For this fix, I think all we can do is test that it doesn't break anything. (still works)
@bryan-robitaille can you think of any way to test this?

[bryan-robitaille]

This is a difficult one to test. The error only happens sometimes and manually throwing an error etc. won't really help since it's a hydration related. For this fix, I think all we can do is test that it doesn't break anything. (still works) @bryan-robitaille can you think of any way to test this?

This error was probably happening because somewhere on our site we are still using a standard <a> tag that references this page or a redirect from the server. If you can find how users navigated to the page that triggered the server render instead of client side navigation you'll be able to test. Reference: https://stackoverflow.com/questions/57376992/in-nextjs-how-to-programatically-trigger-server-side-rendering

[timarney]

:)

Can just test by visiting https://localhost:3000/en/auth/mfa/resend direct