Prerequisites

Application registration

To integrate Indigo IAM authentication into a SPA (Single Page Application), the application needs a client registered with the target Indigo IAM instance (for example, https://iam-1.staging.devx.skao.int/). Follow the SKAO client onboarding process via the IT Support Service Desk.

For this registration you will need:

  • Your application name.

  • All the redirect URL’s expected for this application. This is where Indigo IAM redirects the user back after authentication. If possible, include a local host and port for development, e.g.

http://localhost:8100/
https://sdhp.stfc.skao.int/dp-naledi/dashboard/
https://sdhp.stfc.skao.int/integration-ska-sdp-dataproduct-dashboard/dashboard/
https://k8s.stfc.skao.int/staging-ska-sdp-dataproduct-dashboard/dashboard/
https://sdhp.stfc.skao.int/ci-dev-ska-sdp-dataproduct-dashboard/dashboard/

  • Indigo IAM uses the OAuth 2.0 authorization-code flow with PKCE for SPAs; no client secret is required for browser-based applications.

  • You will be supplied with a client_id. Store it in the HashiCorp Vault for deployment, and a local .env for development.

Note

Existing applications still using Entra ID follow the same registration process but request a Microsoft Entra ID app registration (SPA type). The resulting client_id / tenant_id plug into the deprecated MSENTRA_* props on AuthProvider.

Integration of the auth provider into the host

Wrap the code that requires authentication in the AuthProvider supplied by this library:

<AuthProvider
    authority={AUTH_AUTHORITY}      /* e.g. https://iam-1.staging.devx.skao.int/ */
    clientId={AUTH_CLIENT_ID}
    redirectUri={AUTH_REDIRECT_URI}
 >
      Code that requires authentication here
 </AuthProvider>

When authority points at a non-Microsoft host, MSAL is automatically configured in protocolMode: 'OIDC'. For Entra ID, pass the Microsoft authority URL (https://login.microsoftonline.com/<tenant-id>/v2.0) — MSAL runs in standard AAD mode.

Integration of the environment variables

Your application will need the following environment variables. Create them in your .env file (empty strings are fine for placeholders) and wire them through to AuthProvider. When deployed via helm, the values come from the vault. When testing locally, a local .env file may be used — do not commit real secrets.

REACT_APP_AUTH_AUTHORITY=https://iam-1.staging.devx.skao.int/
REACT_APP_AUTH_CLIENT_ID=
REACT_APP_AUTH_REDIRECT_URI=

The naming convention prefixes custom React env variables with REACT_APP_*.

Integration into the host chart

In your host application templates, add the annotations for the vault:

annotations:
{{ if ((.Values.ui.vault).useVault) }}
    vault.hashicorp.com/agent-inject: "true"
    vault.hashicorp.com/agent-inject-status: "update"
    vault.hashicorp.com/agent-inject-secret-config: "{{ .Values.ui.vault.pathToSecretVault }}"
    vault.hashicorp.com/agent-inject-template-config: |
        {{`{{- with secret `}}"{{ .Values.ui.vault.pathToSecretVault }}"{{` -}}`}}
        {{`{{- range $k, $v := .Data.data }}`}}
        {{`export {{ $k }}={{ $v }}`}}
        {{`{{- end }}`}}
        {{`{{- end }}`}}
    vault.hashicorp.com/role: "kube-role"
{{ end }}

As well as the environment variables:

env:
  - name: REACT_APP_AUTH_REDIRECT_URI
    value: "{{ .Values.ingress.hostname }}{{ include "ska-login-page.ui.ingress.path" . }}/"
  - name: REACT_APP_AUTH_AUTHORITY
    value: "{{ .Values.ui.auth.authority }}"
  - name: REACT_APP_AUTH_CLIENT_ID
    value: "{{ .Values.ui.vault.client_id }}"

values.yaml for the Indigo staging instance:

ui:
  auth:
    authority: https://iam-1.staging.devx.skao.int/

Lastly, ensure the vault-injected secrets are sourced into your pod environment (for a front-end application, typically via nginx_env_config.sh):

source /vault/secrets/config