How to Enable SAP Authentication for Vite-React app Using xs-security.json & mta?

[#1]

Hi,

I created a simple multitarget app vite-react application and I am able to deploy it with mta. What I want to achieve is I want to have a SAP authentication before accessing the applictaion.

I tried with some documentation  but it still doesnt work.

Here is the mta.yaml

_schema-version: "3.1"
ID: SDH_UI_VITE
version: 2.0.0

modules:
  - name: SDH_UI_VITE
    type: staticfile
    path: SDH_MN/dist
    requires:
      - name: SDH_UI_VITE-log
        parameters:
          memory: 10000m #10GB
          disk-quota: 10000m
      - name: SDH-destination
        parameters:
          content-target: true
      - name: SDH-auth
        parameters:
          service-key:
            name: test-key
      - name: SDH_MN_html_repo_host
        parameters:
          service-key:
            name: SDH_UI_html_repo_host-key
    parameters:
      content:
        instance:
          destinations:
            - Name: SDH_MA_SDH_MN_html_repo_host
              ServiceInstanceName: SDH_MN-html5-app-host-service
              ServiceKeyName: SDH_MN_html_repo_host-key
              sap.cloud.service: SDH_MA
            - Authentication: OAuth2UserTokenExchange
              Name: SDH_MA_uaa_SDH_MN
              ServiceInstanceName: SDH-auth
              ServiceKeyName: SSH_Vite_Test-key
              sap.cloud.service: SDH_MA
          existing_destinations_policy: ignore
      build-parameters:
        no-source: true
  ####### I dont think it is needed
  # - name: SDH_MN
  #   type: html5
  #   path: SDH_MN
  #   build-parameters:
  #     builder: custom
  #     commands:
  #       - npm install
  #       - npm run build
  #     supported-platforms: []
resources:
  - name: SDH_UI_VITE-log
    type: org.cloudfoundry.managed-service
    parameters:
      service: application-logs
      service-plan: lite
  - name: SDH-destination
    type: org.cloudfoundry.managed-service
    parameters:
      config:
        HTML5Runtime_enabled: true
        version: 1.0.0
      service: destination
      service-name: SDH-destination
      service-plan: lite
  - name: SDH_MN_html_repo_host
    type: org.cloudfoundry.managed-service
    parameters:
      service: html5-apps-repo
      service-name: SDH_UI-html5-app-host-service
      service-plan: app-host
  - name: SDH-auth
    type: org.cloudfoundry.existing-service #initially it is managed service -- but with current scope it is not possible to update -> this err witll occur: could not find xsapp entry for sdh_ui!t139056. https://community.sap.com/t5/technology-q-a/using-already-availble-xsuaa-service-to-another-application-giving-service/qaq-p/13682223
    parameters:
      path: ./xs-security.json
      service: xsuaa
      service-name: SDH-auth
      service-plan: application

and this is the xs-security.json

{
	"xsappname": "SDH-auth",
	"tenant-mode": "dedicated",
	"description": "Security profile of called application",
	"scopes": [
		{
			"name": "uaa.user",
			"description": "UAA"
		}
	],
	"role-templates": [
		{
			"name": "Token_Exchange",
			"description": "UAA",
			"scope-references": ["uaa.user"]
		}
	],
	"oauth2-configuration": {
		"token-validity": 3600,
		"redirect-uris": [
			"http://localhost:5000/**",
			"https://*.*.eu10.applicationstudio.cloud.sap/**",
			"https://*.*.eu10cf.applicationstudio.cloud.sap/**",
			"https://*.cfapps.*.hana.ondemand.com/**",
			"https://port5000-workspaces-ws-4w2v4.eu10.applicationstudio.cloud.sap/login/callback",
			"https://port5000-workspaces-ws-bhxv2.eu10.applicationstudio.cloud.sap/login/callback",
			"https://port5000-workspaces-ws-*.eu10.applicationstudio.cloud.sap/login/callback",
			"https://port6004-workspaces-ws-le3mi.eu10.applicationstudio.cloud.sap/login/callback",
			"https://port6004-workspaces-ws-*.eu10.applicationstudio.cloud.sap/login/callback"
		]
	}
}

Here is the repo containing the basic app: https://github.com/zenhuzaini/sap-vite-react

Any help is very much appreciated. Thanks