CODEWITHSUNDEEP
reactjsnode.jsazuresecurityazure-ad-msal
Berg
Berg

Reputation: 11

How to store ClientID and Authority in an React Application that is hosted on Azure and public?

I'm working on a React application and am in the process of configuring the msalconfig for the PublicClientApplication.I am new to Azure and Frontend Development. Moreover we are a very small team :(

My Problem: Hardcoding clientID and authority: I've read multiple posts suggesting that the clientID and authority are not secrets and can be stored directly in the application. However, I'm hesitant to hardcode these values as it seems risky.

Azure App Service Configuration: I've also read that Azure App Service has Connection Strings/Application Settings the section "Configuration". However, I'm unsure how to access or use these settings within my React application's code, as I am a Azure Newbie.

My first Keyvault Considerations: Initially, I thought about retrieving the clientId and authority via Azure Keyvault. But to access Keyvault, I'd need to provide a secret, but I want to avoid storing any such secrets in a client application where they could be exposed.

Questions: Is hardcoding the clientID and authority a safe practice? What are the security implications?

How can I access Connection String/Application Settings from the Azure App Service within my React application? Or should I even use them?

Technologies Used: React Vite Azure services

Backend is simply nodejs

import {Configuration, AccountInfo} from '@azure/msal-browser';

let MSAL_CONFIG: Configuration;

export const setupMSALConfig = async () => {
  MSAL_CONFIG = {
    auth: {
      clientId: import.meta.env.VITE_CLIENT_ID as string,
      authority: import.meta.env.VITE_AUTHORITY as string,
      redirectUri: '/',
    },
    cache: {
      cacheLocation: 'sessionStorage',
      storeAuthStateInCookie: true,
    },
    telemetry: {
      application: {
        appName: 'App',
        appVersion: '1.0.0',
      },
    },
  };
  return MSAL_CONFIG;
};

export type {AccountInfo};

export const loginRequest = {
  scopes: ['openid', 'profile', 'User.Read'],
};

I try to hardcode it / get the information from key vault. This works but has its drawbacks.

Upvotes: 0

Views: 1327

Answers (1)

Harshitha
Harshitha

Reputation: 7377

Is hardcoding the clientID and authority a safe practice? What are the security implications?

Hard coding any of the client secrets is not a secure way and is not recommended to do so.

One of the option available to store Client Secrets is to use Environment Variables.

Thanks @TechBrij for the explanation.

  • We can access the values from Environment Variables using process.env followed by the Variable name.

How can I access Connection String/Application Settings from the Azure App Service

First, we need to set the Key-Value pairs in the Environment Variable section of the deployed React App.

enter image description here

  • The variables which are set as above are available in the Environment Variables section (KUDU).

Link to KUDU - DeployedAppName.scm.azurewebsites.net

enter image description here

  • Now you can access the ClientID as
const clientid = process.env.ClientID;
  • But compared to Environment Variables using Azure Key Vault is the more safe and better way to store secrets.

But to access Keyvault, I'd need to provide a secret,

We just need to pass the KVName and Secret name. No need to store the secret value in the client Application.

Upvotes: 0

Related Questions