Log a user into the O11y service react app

What does this MR do and why?

Log a user into the O11y service react app

This updates the frontend to log a user into the O11y service react app. The user is logged in by passing a JWT token to the app. The token is generated by the backend and passed to the frontend.

Related MR Slicing

This MR is a slice of a feature that logs a user into the o11y service. Here are the related slices

1. Add O11yToken class (!197515 - merged)
2. Add ObservabilityPresenter (!197533 - merged)
3. Update ObservabilityController to use presenter (!197535 - merged)
4. Add observability message validator component (!199631 - merged)
5. Add observability url helpers functions (!200441 - merged)
6. Add nonce generation to o11y login frontend (!200440 - merged)
7. Add AuthManager class to handle authentication ... (!200536 - merged)
8. Log a user into the O11y service react app (!197536 - merged) <- you are here

Here's a sequence diagram outlining the login process

sequenceDiagram
    participant RC as Rails Controller
    participant OB as O11y Backend
    participant RV as Rails View
    participant VC as Vue Component
    participant RA as React App (iframe)

    RC->>OB: POST /auth/login<br/>{email, password}
    OB-->>RC: 200 OK<br/>{jwt: "eyJ0eXAi..."}
    
    RC->>RV: render view<br/>@data = tokens, encryption key...
    RV-->>RC: HTML with JWT in data attribute
    
    RC->>VC: serve page with<br/>Vue component
    RV->>VC: mount component<br/>data-jwt="eyJ0eXAi..."
    
    VC->>RA: create iframe<br/>src="app.html"
    RA-->>VC: iframe loaded<br/>ready event
    VC->>RA: postMessage<br/>{type: 'AUTH_TOKEN', jwt: 'eyJ0eXAi...'}
    RA-->>VC: postMessage<br/>{type: 'AUTH_SUCCESS'}

References

Update login process to use observability_group_o11y_setting table

Screenshots or screen recordings

Screen_Recording_2025-07-11_at_8.48.49_PM

How to set up and validate locally

1. In rails console enable the feature flag and set the group settings (Replace YOUR_EMAIL)

   group = Group.find_by_path('toolbox')
   Feature.enable(:observability_sass_features, group)
   group.create_observability_group_o11y_setting!(
      o11y_service_url: "http://localhost:8080",
      o11y_service_user_email: YOUR_EMAIL,
      o11y_service_password: "passwordmcpasswordface",
      o11y_service_post_message_encryption_key: "your-super-secret-encryption-key-here-32-chars-minimum",
   )

2. Get an instance of GitLab O11y running locally

   1. Install Docker Desktop if you haven't already.
   2. Checkout o11y and run it (replacing YOUR_EMAIL with the email you used above)

git clone git@gitlab.com:gitlab-org/embody-team/experimental-observability/gitlab_o11y.git
cd gitlab_o11y
`O11Y_EMAIL=YOUR_EMAIL O11Y_PASSWORD=passwordmcpasswordface ALLOWED_ORIGINS="http://localhost:3000" O11Y_NAME=O11y ORG_DISPLAY_NAME=GitLab docker compose -f deploy/docker/docker-compose.yaml up -d`

This should create a new user and organization in the O11y service that will be used to login.

3. Open the o11y service in your browser http://localhost:8080/ and make sure it's running - you should see a login screen - not an account creation screen
4. Navigate to http://localhost:3000/groups/toolbox/-/observability/services
5. You should be automatically logged in to o11y and not see a login screen in the page's iframe

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.