I would like to add basic auth to my web ui deployment on kubernetes that is reachable through an nginx ingress

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: {{ .Chart.Name }}-flower-nginx-ingress
  annotations:
    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/rewrite-target: /myapp-flower/$2
    nginx.ingress.kubernetes.io/auth-type: basic
    nginx.ingress.kubernetes.io/auth-secret: {{ .Chart.Name }}-flower-ui-auth
    nginx.ingress.kubernetes.io/auth-realm: "Authentication Required - myapp flower ui"
  labels:
    app: "{{ .Release.Name }}"
    component: {{ .Chart.Name }}-flower
spec:
  rules:
    - host: "{{ .Values.ingress.host }}"
      http:
        paths:
          - path: /myapp-flower(/|$)(.*)
            pathType: ImplementationSpecific
            backend:
              service:
                name: {{ .Chart.Name }}-flower-svc
                port:
                  number: 5555

However, when I access the host url, I immediately get 401 authorization required, no popup. I have double checked that the secret {{ .Chart.Name }}-flower-ui-auth exists and it was created according to the documentation https://kubernetes.github.io/ingress-nginx/examples/auth/basic/. Specifically the secret data has one key auth and the value is in the b64 format of <username>:<password>.