feat: [REL-10443] Developer Toolbar authentication

[cspath1]

Description

To unlock the door to developing powerful, meaningful features to the Developer Toolbar, we need a way to allow users to authenticate with LaunchDarkly so the toolbar can access information that requires authentication. Think of features like:

• Being able to see the different variations for a feature flag so a user can select other variations (in SDK mode)
• Being able to see why a flag evaluated the way it did
• Setting a different context to test the evaluation of flags based for that context

This sets up the foundation and helps unlock that door.

What does this PR do?

Implements an authentication mechanism in tandem with the MoMI repository changes here. This sets up the following, but does not add any inherent new feature that provides value to developers:

• Authentication via a pop up
• Persistent iframe to MoMI server that, once authenticated via pop up, can serve as a proxy to make API calls against LaunchDarkly's API.
• A new setting to "opt-in" to new features. This is disabled by default so we can hide the auth implementation, as we have yet to develop a feature with it that provides value to the developer. This will ultimately be a short-lived approach, as we would like to soon add LaunchDarkly to the developer toolbar so we can add feature flags as needed and de-risk changes like this.

Testing
To test this effectively, you first need to follow the setup/testing instructions in the MoMI pull request linked above. Once that is up and running:

• Update AuthenticationModal.tsx so the getIframeUrl method will point to your local MoMI server (hosted via ngrok)
• run pnpm dev
• Navigate to the settings page and enable the "opt-in to new features" toggle
• This will cause a new button to appear in the header to authenticate the toolbar
• Click it, and an auth pop-up should open against the LD Staging environment
• Step through the auth flow, and after completing it, you should be successfully authenticated!
• Once authenticated, you can click a flag list item, and it should console.log "dummy data" to the console. This info is coming from the MoMI iframe instance, and is a simple PoC for iframe-to-toolbar communication.

Type of Change

• ✨ New feature (non-breaking change that adds functionality)

---

Screenshots/Videos

Authentication.Process.Walkthrough.for.MOMI.Integration.mp4

---

Related Jira issue: REL-10443: Update the Developer Toolbar to use the MoMI repo for authentication

[pranjal-jately-ld]

Ace work @cspath1 🙌 The way you've structured the code for auth in the toolbar makes it very easy to follow and understand! ✨ I've left a couple of comments/suggestions.

One thing I am struggling with is testing this branch with the momi branch. I've tried a lot to debug why it might be the case, however I don't see a login/person icon in the toolbar and I'm not sure why that's the case.

[pranjal-jately-ld]

Ace work @cspath1 🙌 The way you've structured the code for auth in the toolbar makes it very easy to follow and understand! ✨ I've left a couple of comments/suggestions.

One thing I am struggling with is testing this branch with the momi branch. I've tried a lot to debug why it might be the case, however I don't see a login/person icon in the toolbar and I'm not sure why that's the case.

Thanks for helping me getting this sorted @cspath1 🙌

This looks ace and I think we can proceed with releasing this to users. I've got some more thoughts/improvements we can make but none are blockers:

• The login success popup closes too soon - before I can finish reading the text on the popup it closes. Maybe we should have a timer to warn people that it'll close it 5,4,3...
• An indicator that shows that users are logged in?
• You've already mention\ed this one but allowing users to logout.