Authentication routing clears item routing on page reload

[campb303]

Authentication routing serves the application view at / and if a user is not authenticated they are rerouted to /login. Because this check occurs on every page reload, the URL gets reset on page refresh and break viewing an item by going to /<queue>/<number>. This should be addressed with subrouting as shown in react-router docs here.

[campb303]

This is likely caused by Apache attempting to load files that correspond to router locations and can be addressed by URL rewrite rules. See Serving Apps w/ Client Side Routing for details on Apache rewrite rules to address this.

# Enable the rewrite module
RewriteEngine On

# Reverse proxy all requests to the API to the API CGI script
# See mod_rewrite docs: https://httpd.apache.org/docs/current/mod/mod_rewrite.html
RewriteRule ^api/(.*)$ http://localhost:5000/api/$1 [P]

+# Defer requests that are not files to client side routing
+# See: https://create-react-app.dev/docs/deployment/#serving-apps-with-client-side-routing
+RewriteCond %{REQUEST_FILENAME} !-f
+RewriteRule ^ index.html [QSA,L]

+# Uncomment the following line to serve a maintenance message.
+#RewriteRule .* https://engineering.purdue.edu/webqueue/webqueue2/build/index-maintenance.html [P]
+#DirectoryIndex index-maintenance.html

# Diable Auth
Satisfy any

[campb303]

This was not fixed by adding the client side routing deferral described above but page reloading was fixed reloading. It may be the case that nested routing is the solution for this first issue in this thread. See: https://reactrouter.com/web/example/nesting

[campb303]

Starting to work on this.

[campb303]

Due to React's component rendering lifecycle, the state variables holding login state will render twice every time. On the first render, the state variable will be its default value, in this case false. On the second render, an attempt to refresh the access token is made and if it is successful the state variable will become true. This means that every time there is a change in auth state, the user is temporarily logged out and the login page is re-rendered causing both the login page to flash and the routing to be lost. All of this logic exists in the PrivateRoute component.

The quick fix for this is to keep a copy of the URL match that directed a user to the PrivateRoute (the referer) and on successful login redirect them to the referrer.

The long term fix for this would be to somehow memoize the login state per session or to add a check in AuthProvider's useEffect to preset the state variable for logged in.

[campb303]

Implementing the quick fix for a release now.

[campb303]

It would actually not be too much work to move the token to localstorage and load it form local storage to set a default state value that doesn't cause the login page to render everytime. For now the page is functional. This will be put on hold to get a release out.