search

icefoganalytics / travel-authorization

0 stars 0 forks source link

Rebuild Front-End Authorization Pipeline #196

Closed klondikemarlen closed 3 months ago

klondikemarlen commented 3 months ago

Fixes https://github.com/icefoganalytics/travel-authorization/issues/195

Relates to:

Context

Is your feature request related to a problem? Please describe. The current front-end authorization pipeline is very hard to debug. The auth0 integration is several versions out of date, and the code is spread across multiple files.

Describe the solution you'd like I want to upgrade the Auth0 integration to the latest version. I want to rebuild the front-end authorization pipeline so it looks like the one in use in the Internal Data Portal project.

Describe alternatives you've considered Keep trying to debug the current system.

Additional context Files that use authorization that I've found so far:

Patterns that will need replacing:

Implementation

Now authorization occurs in these places only:

  1. web/src/App.vue - via useAuth0 from web/src/plugins/auth0-plugin.js and useCurrentUser from web/src/use/use-current-user.js
  2. web/src/plugins/auth0-plugin.js - on app load
  3. web/src/router.js - via web/src/utils/auth-guard.js
  4. web/src/api/http-client.js via web/src/plugins/auth0-plugin.js

Rework auth0 plugin with code from https://github.com/auth0/auth0-vue/blob/efe1d39a0244fd072a527df97f87ab355501851d/src/plugin.ts Add authGuard from https://github.com/auth0/auth0-vue/blob/efe1d39a0244fd072a527df97f87ab355501851d/src/guard.ts#L16

Front-end routing is now "Secure by Default"(tm). To disable security on a route set meta: { requiresAuth: false }

Screenshots

Screencast from 2024-06-13 16-44-56.webm

Testing Instructions

  1. Run the test suite via dev test (or dev test_api)
  2. Boot the app via dev up
  3. Log in to the app at http://localhost:8080
  4. Check that you are redirected to the Auth0 login page.
  5. After you log in, check that you are redirected to the /dashboard route.
  6. Log out via the top right kebab menu option.
  7. Check that you are redirected to the /sign-in route and that the page loader message makes sense.
  8. Click the "Sign In" button.
  9. Check that you are redirected to the Auth0 login page.
  10. After you log in, check that the page loader messages make sense.
  11. Check that you are redirected to the /dashboard route.
  12. Go to the "My Travel Requests" page via the top drop down nav and copy the URL.
  13. Sign out from the kebab menu again.
  14. This time paste the http://localhost:8080/my-travel-requests url into the URL bar to simulate direct navigation.
  15. Check that you get a nice loader.
  16. Check that you are redirected to the Auth0 login page.
  17. After you log in, check that the page loader messages make sense.
  18. Check that you are eventually redirected to http://localhost:8080/my-travel-requests