CODEWITHSUNDEEP
reactjstypescriptazure-keyvault
Debasis Ghosh
Debasis Ghosh

Reputation: 263

How do I retrieve Secrets from KeyVault in React application [typescript]

I want to retrieve secrets from keyvault in React application by passing clientid, clientkey and tenantid. Followed the below sample but receiving the error - "EnvironmentCredential is not supported in browser".

https://github.com/Azure/azure-sdk-for-js/blob/master/sdk/keyvault/keyvault-secrets/samples/typescript/src/helloWorld.ts

enter image description here

Application - React [TypeScript]

Browser - Chrome 86.0

Thanks.

Deb

Upvotes: 0

Views: 2916

Answers (1)

PerfectlyPanda
PerfectlyPanda

Reputation: 3511

The error is intended- the DefaultAzureCredential() is supported in Node (server-side JS) but not client-side Javascript: https://github.com/Azure/azure-sdk-for-js/issues/10645

The primary reason for this is because it's usually a serious security hole to expose your clientKey to anyone browsing your site.

If your React app is using an API, then it's best to have React call your API and then have the API talk to Key Vault. If you don't have one currently, then something like a simple Functions or Logic app can act as an API for you. (Functions in particular has a free tier if your site is low traffic).

If you understand the risks and still want to do this in the browser, you have a couple options- you can create the TokenCredential yourself to pass into the client, or you can skip the SDK and call the API directly.

Upvotes: 1

Related Questions