[Done] Re-authentication needed (token expired)

[davelsio]

Summary

This discussion is related to the Network request failed error in the context of SPA-codegen#86.

Here we can provide ideas about the desired behavior of the Zendro application when the authentication token has expired.

Description

When the user signs into the application, the server issues a token that will be used for access control and sending the correct headers in every request. When the token expires, all requests to the server will fail and the error above is displayed.

Proposed Behaviors (non-exclusive with one another)

Redirect the user to the /login page.

When the token expires, if the user navigates to a new page, reloads, or otherwise sends a request, the application is redirected to the /login page. After login, the user is returned to the appropriate location (previous page in history).

+ Seamless navigation without user intervention (other than login).
- Potential loss of data if the user is trying to submit.

Inform the user a new sign-in is required

When the token expires and the user attempts a non-navigation action that would trigger an error, the user is prompted to sign in again, but not redirected automatically.

+ Data is not lost without warning.
- To sign in again, the user needs to leave the page and lose the current data/work.

Login form embedded within the page

Move the login form to a popover menu (or alternatively a modal) that is displayed when the user interacts with the appropriate toolbar button. When the token expires and an action that would trigger an error is attempted (e.g. navigation, submit, refresh table/form, etc.), the user is requested to sign in again.

+ Non-destructive login.

[asishallab]

Thank you @Davelsan for opening this discussion and providing possible solutions.

I'd like to cast my vote for the third solution, the

Login form embedded within the page

if and only if it can be implemented with a reasonable amount of work.

If solution one,

Redirect the user to the /login page

is much easier and faster to implement, than please choose that one.

Bear in mind that in the near future we will have to look at OAuth and possible changes might follow from that anyway.

[davelsio]

Status

The behaviors in the OP have been implemented as follows:

• The application toolbar has been moved to an application-wide layout. Ttheoretically, this layout is also optional, but in the current implementation it is wrapping the models-layout.
• When the user is not logged in or the session has expired, the login button renders a modal containing the login form.
• When the session has expired, navigation is available but the current model view is hidden.
• Internal state (i.e. unsaved work) is preserved while the session is expired, with limitations (see below).

Limitations / Pending

Because form data is populated from the server, revalidating identity (i.e. issuing a new token) will cause the client to re-fetch, potentially losing already filled fields.

A possible solution to this might involve changing the form inputs from controlled to uncontrolled. This is how the form for creating a new record is already implemented. However, it might bring a different host of issues to solve, like allowing the user to reload the data from the server. We may manipulate the DOM directly for this specific use case, but it might be an anti-pattern in React.

References

• feat: modal login #67
• fix: expired-revalidated #68
• feat: layout tweaks #69