ENH: Add API Keys Page

[zdomke]

Description

Adds multiple components/services to allow users to create/manage API Keys using the frontend. Namely an API Keys route/page is added that users will be able to access when isAdminMode === true. Disabling admin mode will hide the API Keys page and the route will no longer be accessible. This security should make it easier to add user auth in the future. All data is accessed through the new apiKeyService which manages HTTP requests to the backend.

Additionally, the frontend will make use of an API Key itself. It is added to the vite.config.ts as a header for all API proxy requests and websockets. The API Key needs to be added to a .env.local file, an example file is provided. If the API Key is missing, then vite will exit early.

Lastly, an error banner is added in case the API Key being used doesn't have access. It looks very similar to the LiveDataWarningBanner that shows up if the heartbeat is missing. To add the API Key banner I needed to add an API Key context that watches for 401/403 HTTP errors. This is setup in the TanStack QueryClient configuration.

Motivation

Closes #59

Where Has This Been Documented?

Documentation added to https://slaclab.github.io/react-squirrel/user-guide/api-keys/ (accessible via mkdocs serve on this branch)

Screenshots

API Keys Page

Key Creation Dialog

Key Token Screen

Pre-merge checklist

• Code works interactively
• Code follows the style guide
• Code contains descriptive docstrings
• New/changed functions and methods are covered in the test suite where possible
• Test suite passes locally
• Test suite passes on GitHub Actions

[zdomke]

Note that to test this, you will have to use the corresponding backend branch/PR: slaclab/react-squirrel-backend#31

[zdomke]

A note on the endpoints in apiKeyService, I included getApiKeyCount, but I have a need for it in this PR. I can remove it in the name of not keeping unused code, or leave it since we may use it in the future. I'll leave that up to the reader. ¯\_(ツ)_/¯

[zdomke]

Also, a note to future reviewers:
I wasn't sure if I should add a second step for deactivating keys. Maybe a toggle button next to the "Create Key" button that hide/shows the deactivation button on each row.
Think about it 🤔

[shilorigins]

I'm able to view the API keys page, but creating a key failed with a 500 error, and now that slaclab/react-frontend-backend#29 and slaclab/react-frontend-backend#31 are merged in I'm getting 500 errors when viewing all pages.

After running alembic upgrade head, the errors I'm getting are like

File "/app/app/dependencies.py", line 57, in get_api_key
squirrel-api      |     raise APIException(
squirrel-api      |           ^^^^^^^^^^^^^
squirrel-api      | TypeError: APIException.__init__() got an unexpected keyword argument 'code'

[zdomke]

I'm able to view the API keys page, but creating a key failed with a 500 error, and now that slaclab/react-frontend-backend#29 and slaclab/react-frontend-backend#31 are merged in I'm getting 500 errors when viewing all pages.

After running alembic upgrade head, the errors I'm getting are like

File "/app/app/dependencies.py", line 57, in get_api_key
squirrel-api      |     raise APIException(
squirrel-api      |           ^^^^^^^^^^^^^
squirrel-api      | TypeError: APIException.__init__() got an unexpected keyword argument 'code'

I think I merged in my PR slaclab/react-squirrel-backend#31 too quickly and introduced a bug. It should have been resolved in slaclab/react-squirrel-backend#53.

Please test it again with this backend change and let me know if the issue is still there.

[shilorigins]

Works great using key generation from #48, thanks!