Improvements to Authentication, BASE URL, supporting multiple environments, and pool query.

[nadr0]

Milestone for issue tracking: https://github.com/KittyCAD/modeling-app/milestone/18

---

Bodies of work

Environments

 "dev" environment is dev.zoo.dev
 "prod" environment is "zoo.dev"
 "prod-us" environment is "zoogov.dev"

Environment variables

I want to support these environment variables

# development
VITE_KC_API_BASE_URL=https://api.dev.zoo.dev
VITE_KC_SITE_BASE_URL=https://dev.zoo.dev
VITE_KC_CONNECTION_TIMEOUT_MS=5000
VITE_KC_API_WS_MODELING_URL=wss://api.dev.zoo.dev/ws/modeling/commands
VITE_KC_POOL=1234

what the dog doing

^ the following values except for VITE_KC_CONNECTION_TIMEOUT_MS will need to be cached on DISK.

• Should we cache POOL or always input it?

GUI

• Logos
  

  • Display dev logo upper left
  • Display prod logo upper left
  • Display prod-us logo upper left

• Status Bar

  • Display dev chip
  • Display nothing in prod (N/A)
  • Display prod-us chip

• Pool (only present if pool is present)

  • Display dev chip chip pool number
  • Display prod chip pool number
  • Display prod-us chip chip pool number

• Sign out
  

  • Display dev Sign out of developement
  • Display prod Sign out
  • Display prod-us Sign out of Production US

• Sign in
  

• Display domain input field

• Pool
  

• Display pool input for specific engine

Disable GUI

• Allow user to press share url but then show a 400/500 modal

URL base domain clean up

urls like https://zoo.dev/blog are floating around the codebase and https://zoo.dev/account

We have VITE_KC_BASE_URL, VITE_KC_SITE_BASE_URL, and VITE_KC_API_WS_MODELING_URL as starting points. I want to make sure these are used in all the locations.

• Update all urls to use @src/env SITE_BASE_URL, implement a helper function?
  • [Chore] All urls are using the site base url #7675
• Update all urls to use @src/env API_BASE_URL, implement a helper function?
  • [Chore] All api urls are now using the helper function  #7672
• Update all urls to use @src/env WS_MODELING_URL, implement a helper function?
  • [Chore] Use the helper function for the websocket url #7677
• delete process.env.BASE_URL ??= viteEnv.VITE_KC_API_BASE_URL
  • [Chore] Removing old confusing BASE_URL environment variable. #7678

Web

• Disable the sign in selection option while in web. Users go to the app.<> url to use that environment. They will not select this within the sign in workflow while in web.
• Make sure web localhost works
• Make sure deployed web works

Sign in to each environment at the same time

Desktop

• you should have a cached /envs/<subdomain>.json e.g /envs/dev.zoo.dev.json
• you should have a cached environment.txt to say what was the last selected environment

Web

• You should be able to login to app.dev.zoo.dev and the application work while app.zoo.dev is opened
• You should be able to login to app.zoo.dev and the application work while app.dev.zoo.dev is opened

window.localStorage for token should be purged

• remove the window.localStorage requirement for the token, we already write it to disk. Always read it during application boot. This removes the secret stored in the browser/electron.
  • We would need to support multiple paths for dev/prod/prod-us so instead of supporting the insecure method we should delete this method

Live swapping of environment

Development

• You should be able to live swap your environment (without logging out or going to the sign in page)
  • While signed into environment XYZ you should be able to swap to another environment assuming that /envs/dev.zoo.dev.json is present and valid
  • otherwise we would redirect them to the sign in flow

GUI

• What GUI can we put in the user profile to swap the environment to trigger this process?

Engine caching

• cache engine pool in the domain file on disk e.g. /envs/dev.zoo.dev.json

PRs

Any PRs opened from this body of work

• [Bug fix]: Do not store token in window! #7671

[franknoirot]

I've got some designs in Figma here ready for your feedback. Here are some thoughts:

1. For the sign-in options let me know if you think having form controls in a popover like this is unwise. Since we're using React I figure I don't need an explicit Submit or Set button for these values, and it will be clear to users that the values are being changed because the label will update
2. For the status bar I know we agreed that if the user is signed into the Production environment the status bar item wouldn't appear, but I think that it should appear if the user is signed into something other than Production or if the user has more than one environment signed in. So it would show if the user is signed into Production but they have Development or Production US Regulated info saved on their disk
3. For the status bar popover I was borrowing more inspiration from the user menu popover than the network health indicator one: I think I like that more muted look as a pattern going forward, what do you think?
4. In the header of that popover, I'm not sure if it's clear enough that the "Development" text is a button, lmk

[nadr0]

I reviewed each panel and the designs look great.

I am trying to think if the development button will be enough. I think it should be okay? Maybe we could have the environment value be text then show a pencil for edit?

[franknoirot]

Yeah that's a good call I think; I've updated the components to show that

[nadr0]

First implementation has been merged! #7714
Going to close this discussion since the initial body of work was completed.

Maybe there will be a round two!