How can I display a confirmation message after requesting a new code when using the TOTP strategy?

[andersr]

I am currently working on integrating the totp strategy and had a question re. requesting new codes. Currently, when following the code in the docs and the starter example, there is no user feedback provided when requesting a new code. How can I display something like a "new code sent" flash message after a new code is requested?

Thanks for any tips or insights!
-Anders

[ersinakinci]

I'm wondering the exact same thing. Did you find a solution, @andersr?

[ersinakinci]

Thanks for sharing!

I'm new to Remix and ended up scratching my head quite a bit. The core thing confusing me was why on earth doesn't Remix Auth offer a generic way to set the session flash. It seems obvious since all the strategies are based on redirecting the user on success/failure. Requesting a new TOTP code also results in a redirect.

The breakthrough I had shortly after asking you my question was realizing that the redirect is going to be handled by the client, meaning that it won't result in a full page refresh and that I don't need to use session flash. I can handle any user notification within React.

I ended up using an onClick handler on my login button to modify some React state and display some UI. Hope that helps someone else, wasn't obvious as a newcomer.

[sergiodxa]

The core thing confusing me was why on earth doesn't Remix Auth offer a generic way to set the session flash

Because you have access to the sessionStorage so you can use that

[ersinakinci]

@sergiodxa can you give an example of how you would use sessionStorage to accomplish a flash on a successful auth?

If I'm using a cookie session store, then I have to set my cookies after executing await sessionStorage.commitSession(session) in the redirect response. But Remix Auth takes over the the entire response, so how would I set the cookies?

[sergiodxa]

If you don't pass a successRedirect to the authenticate method it will return the user data (what your strategy returned) and you can save it in the session yourself.

The README has an example to decide where to redirect based on the user data https://github.com/sergiodxa/remix-auth?tab=readme-ov-file#custom-redirect-url-based-on-the-user.

You can do something similar, get the user, save it in the sessionKey and add any other flash message you want, you could even return json instead of a redirect.

[ersinakinci]

Ah yes, I remember the problem now. The remix-auth strategies that I tried using don't respect your design and make the successRedirect option mandatory. Examples:

• remix-auth-email-link (see issue)
• remix-auth-totp

In fairness to the strategy authors, the successRedirect contract isn't explicitly spelled out, so it's easy to forget to make it optional.

[sergiodxa]

I totally missed this one, since I didn't built the TOTP strategy myself, I think it was better to ask directly in the repo of the strategy.