Users should be instantly redirected to the login page once their auth token expires

[coderatomy]

Describe the the feature request
Rather than seeing a 404 error page, It's ideal to redirect the user to login page once there session expires since we are sure now that they have to login to continue.
This should happen instantly as possible. I actually had to first see a few failing requests. Then did some actions on the site until I saw the 404.

We could show some notifiers like Your session has expired. Redirecting to login. What do you say about this @Temabo @srish

Screencast.from.2023-10-15.08-58-19.webm

[yokwejuste]

This is interesting @coderatomy, we can use a refresh token here instead which is much easier to generate and as well as resource use effective too.

Picture this out, we will have less efforts getting the access token, so the user logs in once and the token is stored.

what do you think?

@coderatomy @tuxology

[coderatomy]

Great suggestion, @yokwejuste. However, I think this is already implemented. The server effectively handles the expiration of authentication tokens and generates new ones seamlessly. Our task is to promptly capture and respond to this update on our frontend.
To achieve instant responsiveness, we can integrate this redirection mechanism within the pageWrapper. Given that it encompasses every page, redirection processes can occur significantly faster in this context.

[srish]

As per @tuxology, whenever the token expires, the user should see an error at the top first that says "Your session has expired, redirecting you to the login page" and be redirected to the login page.

[yokwejuste]

Great suggestion, @yokwejuste. However, I think this is already implemented. The server effectively handles the expiration of authentication tokens and generates new ones seamlessly. Our task is to promptly capture and respond to this update on our frontend.
To achieve instant responsiveness, we can integrate this redirection mechanism within the pageWrapper. Given that it encompasses every page, redirection processes can occur significantly faster in this context.

I think this issue is made for me 😅

[coderatomy]

Go on then @yokwejuste. Though, I would first request some help from the UI/UX team on how the redirection text should look
Will we just have a spinner with those texts
cc @Temabo ...

[mehreeee]

Page.1.-.Create.-.Figma.2023-10-17.00-14-05.mp4

Hi @yokwejuste @coderatomy This is what I think the redirection screen should look like. The redirection should happen automatically and redirect to the login screen.

[yokwejuste]

Page.1.-.Create.-.Figma.2023-10-17.00-14-05.mp4

Hi @yokwejuste @coderatomy This is what I think the redirection screen should look like. The redirection should happen automatically and redirect to the login screen.

Can you send me links to prototype and to the figma file?

[mehreeee]

Page.1.-.Create.-.Figma.2023-10-17.00-14-05.mp4

Hi @yokwejuste @coderatomy This is what I think the redirection screen should look like. The redirection should happen automatically and redirect to the login screen.

Can you send me links to prototype and to the figma file?

sure here is the link to the figma file
https://www.figma.com/file/uw9ZqAJtIRK83oHGYKnJi1/redirection?type=design&node-id=1%3A5&mode=design&t=0hKSDD4pLqaunOGU-1

[yokwejuste]

Page.1.-.Create.-.Figma.2023-10-17.00-14-05.mp4

Hi @yokwejuste @coderatomy This is what I think the redirection screen should look like. The redirection should happen automatically and redirect to the login screen.

Can you send me links to prototype and to the figma file?

sure here is the link to the figma file
https://www.figma.com/file/uw9ZqAJtIRK83oHGYKnJi1/redirection?type=design&node-id=1%3A5&mode=design&t=0hKSDD4pLqaunOGU-1

Amazing 🎉

[mehreeee]

Page.1.-.Create.-.Figma.2023-10-17.00-14-05.mp4
Hi @yokwejuste @coderatomy This is what I think the redirection screen should look like. The redirection should happen automatically and redirect to the login screen.

Can you send me links to prototype and to the figma file?

sure here is the link to the figma file
https://www.figma.com/file/uw9ZqAJtIRK83oHGYKnJi1/redirection?type=design&node-id=1%3A5&mode=design&t=0hKSDD4pLqaunOGU-1

Amazing 🎉

Thank you

[coderatomy]

Nice work @mehreeee. Though I was expecting some sort of a modal and we just blur stuff in the background. But it's okay if that will take a while. This is already good

[mehreeee]

Nice work @mehreeee. Though I was expecting some sort of a modal and we just blur stuff in the background. But it's okay if that will take a while. This is already good

I can fix that. Let me do a few changes

[yokwejuste]

Nice work @mehreeee. Though I was expecting a modal, and we just blur stuff in the background

I guess we will link it up to the issue #802 with the design on this comment

[mehreeee]

@mehreeee, I meant something like a loading spinner, not directly popping the login modal. Something like below but in the context of our design. Again, if this complicates stuff, we can go on with the first mock-up

I'm not sure I understand. You want a modal to pop up on the page with a loading spinner?

[coderatomy]

Ahh alright. Let's go on with that one you've designed for now. We can modify later

[mehreeee]

Nice work @mehreeee. Though I was expecting some sort of a modal and we just blur stuff in the background. But it's okay if that will take a while. This is already good

Page.1.-.redirection.-.Figma.2023-10-17.01-40-49.mp4

I designed a modal with a loading spinner, I'm not sure if this is what you wanted. Anytime the modal pops up, the previous background blurs or darkens. Let me know the specific changes you want to implement and I'll work on it.

[Temabo]

@mehreeee Solid work! Regarding the pop-up design, I think it's a great start! To enhance the user experience, how about incorporating a timer within the pop-up? This way, users will have a clear idea of when they will be redirected to the login page after seeing the 'Your session has expired. Redirecting to login.' message. It's a subtle addition that can improve the overall usability and transparency of the process. @coderatomy

[mehreeee]

@mehreeee Solid work! Regarding the pop-up design, I think it's a great start! To enhance the user experience, how about incorporating a timer within the pop-up? This way, users will have a clear idea of when they will be redirected to the login page after seeing the 'Your session has expired. Redirecting to login.' message. It's a subtle addition that can improve the overall usability and transparency of the process. @coderatomy

Thank you @Temabo. If it wouldn't be too much work for the devs we could incorporate that. Still waiting for feedback

[mehreeee]

@mehreeee Solid work! Regarding the pop-up design, I think it's a great start! To enhance the user experience, how about incorporating a timer within the pop-up? This way, users will have a clear idea of when they will be redirected to the login page after seeing the 'Your session has expired. Redirecting to login.' message. It's a subtle addition that can improve the overall usability and transparency of the process. @coderatomy

I'm not sure I like the timer though, but let me know what you guys think.

Page.1.-.redirection.-.Figma.2023-10-17.04-03-22.mp4

[DonPresh]

@mehreeee Solid work! Regarding the pop-up design, I think it's a great start! To enhance the user experience, how about incorporating a timer within the pop-up? This way, users will have a clear idea of when they will be redirected to the login page after seeing the 'Your session has expired. Redirecting to login.' message. It's a subtle addition that can improve the overall usability and transparency of the process. @coderatomy

@Temabo Nice suggestion. I have a slightly different opinion, the timer might be a bit

@mehreeee Solid work! Regarding the pop-up design, I think it's a great start! To enhance the user experience, how about incorporating a timer within the pop-up? This way, users will have a clear idea of when they will be redirected to the login page after seeing the 'Your session has expired. Redirecting to login.' message. It's a subtle addition that can improve the overall usability and transparency of the process. @coderatomy

I'm not sure I like the timer though, but let me know what you guys think.

Page.1.-.redirection.-.Figma.2023-10-17.04-03-22.mp4

I think it looks better without the timer. For me, it feels alien having a timer there.

[mehreeee]

@mehreeee Solid work! Regarding the pop-up design, I think it's a great start! To enhance the user experience, how about incorporating a timer within the pop-up? This way, users will have a clear idea of when they will be redirected to the login page after seeing the 'Your session has expired. Redirecting to login.' message. It's a subtle addition that can improve the overall usability and transparency of the process. @coderatomy

@Temabo Nice suggestion. I have a slightly different opinion, the timer might be a bit

@mehreeee Solid work! Regarding the pop-up design, I think it's a great start! To enhance the user experience, how about incorporating a timer within the pop-up? This way, users will have a clear idea of when they will be redirected to the login page after seeing the 'Your session has expired. Redirecting to login.' message. It's a subtle addition that can improve the overall usability and transparency of the process. @coderatomy

I'm not sure I like the timer though, but let me know what you guys think.
Page.1.-.redirection.-.Figma.2023-10-17.04-03-22.mp4

I think it looks better without the timer. For me, it feels alien having a timer there.

Thank you @DonPresh. I agree. The redirection should happen almost immediately and not having to wait for a countdown.

[DonPresh]

My suggestion for this issue:

The users are not immediately carted off to the login page. They click on the "ok" button before the redirection happens.
@coderatomy @mehreeee @srish what do you think?

[maureen-oz]

@mehreeee Solid work! Regarding the pop-up design, I think it's a great start! To enhance the user experience, how about incorporating a timer within the pop-up? This way, users will have a clear idea of when they will be redirected to the login page after seeing the 'Your session has expired. Redirecting to login.' message. It's a subtle addition that can improve the overall usability and transparency of the process. @coderatomy

@Temabo Nice suggestion. I have a slightly different opinion, the timer might be a bit

@mehreeee Solid work! Regarding the pop-up design, I think it's a great start! To enhance the user experience, how about incorporating a timer within the pop-up? This way, users will have a clear idea of when they will be redirected to the login page after seeing the 'Your session has expired. Redirecting to login.' message. It's a subtle addition that can improve the overall usability and transparency of the process. @coderatomy

I'm not sure I like the timer though, but let me know what you guys think.
Page.1.-.redirection.-.Figma.2023-10-17.04-03-22.mp4

I think it looks better without the timer. For me, it feels alien having a timer there.

Totally agree

[maureen-oz]

UI-UX team to the rescue. Great job @mehreeee @DonPresh @Temabo @yokwejuste 🥳

[coderatomy]

Agreed! No countdowns. Auth redirections should be made as instant as possible.

[yokwejuste]

Agreed! No countdowns. Auth redirections should be made as instant as possible.

So what is our design here @coderatomy @srish

[srish]

@DonPresh's design here is nice: #906 (comment) :) When a dev takes it up, can you make sure to use MUI for implementing the components?

[coderatomy]

Nice work @DonPresh, can you share the figma link for this mock-up please

[DonPresh]

@coderatomy Here's the link
https://www.figma.com/file/2twyPjNSSzNEzlMO0doTCb/Outreachy?type=design&node-id=204%3A786&mode=design&t=trxYXXuxEAaEgShk-1

[yokwejuste]

@coderatomy Here's the link https://www.figma.com/file/2twyPjNSSzNEzlMO0doTCb/Outreachy?type=design&node-id=204%3A786&mode=design&t=trxYXXuxEAaEgShk-1

nice nice,

Working on this now

[yokwejuste]

Hi!

I opened a PR for this issue