I am opening this issue as a result of the discussion in issue #6.
The redux-auth-wrapper package provides a higher order component to enforce authentication and authorization prior to components being loaded and the willMount and didMount methods being executed. Using this library allows for a common way to ensure a user is authenticated before accessing secure routes, and if not to redirect the user to a login page.
The benefit of using this library over a simpler check is the fact that it supports asynchronous loading of the authenticated user data. This solves the issue that was discussed in the previously mentioned issue above.
Essentially, the higher order component provided by the redux-auth-wrapper has a property, authenticatingSelector, which can be used to force it to wait until the user info is loaded using whatever asynchronous method is needed.
What is really needed to have a complete integration with that library is to be able to different between the following states:
1 - The user is not authenticated at all
2 - The user has authenticated but the authentication data has not been loaded yet (page was refreshed)
3 - The user is authenticated and the authentication data has been successfully loaded (page was not refreshed)
Right now it is impossible to tell the difference between sate 1 and state 2 so a redirect to the login page/process is always required whenever a user refreshes the page. This isn't really needed if we are able to load the user data from session storage, we just need the ability to wait for that to happen.
I am proposing, and will be opening up a PR for the following changes to allow us to differentiate between the different states:
1 - Adding a new property to the oidc state in the reducer called isLoadingUser which will default to true.
2 - On the following events, set the isLoadingUser to false, since they signify that the loading should have completed, either successfully or unsuccessfully: USER_EXPIRED, SILENT_RENEW_ERROR, USER_FOUND
With these changes, the redux-auth-wrapper package can be configured to look at the isLoadingUser state property and make the decision whether to redirect or not once that property is set to false, meaning the loaded should have completed one way or the other.
In addition to the PR the following repo provides an example of the use case:
https://github.com/jbellmore31g/redux-oidc-example
In this repo, the main route (/) is a protected route and requires the user to be logged in. If the user is has not authenticated yet they will be redirected to the /login route, which will also contain the route to redirect to after successful authentication. If the page is refresh you will notice there is no redirect to the /login route, it will simply wait for the user to be loaded and then USER_FOUND action to be dispatched. Once that has happened it will load the home component successfully.
I look forward to your thoughts on this, the tests should all be passing but will be curious if I overlooked anything. The one additional feature that is not in this PR but might be a good idea would be to have the IsLoadingUser set back to true whenever a silent renew starts. At the moment I only saw the action for whenever it fails, not for when it begins or is successful. Those would both be needed to support that use case I would think.
Thanks again!