Securing authentication secrets in Azure Key Vault

When configuring custom authentication providers, you may want to store connection secrets in Azure Key Vault. This article demonstrates how to use a managed identity to grant Azure Static Web Apps access to Key Vault for custom authentication secrets.

Security secrets require the following items to be in place.

  • Create a system-assigned identity in the Static Web Apps instance.
  • Grant access a Key Vault secret access to the identity.
  • Reference the Key Vault secret from the Static Web Apps application settings.

This article demonstrates how to set up each of these items in production for bring your own functions applications.

Key Vault integration is not available for:

Note

Using managed identity is only available in the Azure Static Web Apps Standard plan.

Prerequisites

Create identity

  1. Open your Static Web Apps site in the Azure portal.

  2. Under Settings menu, select Identity.

  3. Select the System assigned tab.

  4. Under the Status label, select the On button.

  5. Select the Save button.

    Add system-assigned identity

  6. When the confirmation dialog appears, select the Yes button.

    Confirm identity assignment.

You can now add an access policy to allow your static web app to read Key Vault secrets.

Add a Key Vault access policy

  1. Open your Key Vault resource in the Azure portal.

  2. Under the Settings menu, select Access policies.

  3. Select the link, Add Access Policy.

  4. From the Secret permissions drop down, select Get.

  5. Next to the Select principal label, select the None selected link.

  6. In search box, search for your Static Web Apps application name.

  7. Select list item that matches your application name.

  8. Select the Select button.

  9. Select the Add button.

  10. Select the Save button.

    Save Key Vault access policy

The access policy is now saved to Key Vault. Next, access the secret's URI to use when associating your static web app to the Key Vault resource.

  1. Under the Settings menu, select Secrets.

  2. Select your desired secret from the list.

  3. Select your desired secret version from the list.

  4. Select the copy button at end of Secret Identifier text box to copy the secret URI value to the clipboard.

  5. Paste this value into a text editor for later use.

Add application setting

  1. Open your Static Web Apps site in the Azure portal.

  2. Under the Settings menu, select Configuration.

  3. Under the Application settings section, select the Add button.

  4. Enter a name in the text box for the Name field.

  5. Determine the secret value in text box for the Value field.

    The secret value is a composite of a few different values. The following template shows how the final string is built.

    @Microsoft.KeyVault(SecretUri=<YOUR-KEY-VAULT-SECRET-URI>)
    

    Use the following steps to build the full secret value.

  6. Copy the template from above and paste it into a text editor.

  7. Replace <YOUR-KEY-VAULT-SECRET-URI> with the Key Vault URI value you set aside earlier.

  8. Copy the new full string value.

  9. Paste the value into the text box for the Value field.

  10. Select the OK button.

  11. Select the Save button at the top of the Application settings toolbar.

    Save application settings

Now when your custom authentication configuration references your newly created application setting, the value is extracted from Azure Key Vault using your static web app's identity.

Next Steps