az containerapp create `
    --user-assigned $IDENTITY_ID `
    --registry-identity $IDENTITY_ID `
    --name $FRONTEND `
    --resource-group $RESOURCE_GROUP `
    --min-replicas 1 `
    --max-replicas 3 `
    --environment $ENVIRONMENT `
    --image "$ACR.azurecr.io/frontend:latest" `
    --target-port 80 `
    --ingress 'external' `
    --enable-dapr `
    --dapr-app-protocol http `
    --dapr-app-port 80 `
    --dapr-app-id $FRONTEND `
    --registry-server "$ACR.azurecr.io" `
    --query properties.configuration.ingress.fqdn

# Build Stage
FROM node:lts AS build

# Set the working directory
WORKDIR /app

# Copy package.json and package-lock.json for caching
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application source code
COPY . .

# Build the app
RUN npm run build

# Serve Stage
FROM nginx:alpine

# Copy custom Nginx configuration for React Router (optional)
COPY custom_nginx.conf /etc/nginx/conf.d/custom_nginx.conf

# Copy build files from the build stage to the Nginx web root directory
COPY --from=build /app/dist /usr/share/nginx/html

# Expose port 80
EXPOSE 80

# Start Nginx
CMD ["nginx", "-g", "daemon off;"]

az acr build --registry $ACR --image frontend:latest .

import { LogLevel, BrowserCacheLocation } from "@azure/msal-browser";

export const msalConfig = {
  auth: {
    clientId: import.meta.env.VITE_CLIENT_ID,
    authority: `https://login.microsoftonline.com/${import.meta.env.VITE_TENANT_ID}`,
    redirectUri: window.location.origin,
    postLogoutRedirectUri: window.location.origin,
    navigateToLoginRequestUrl: true,
    protocolMode: "OIDC", // Enable OIDC protocol
  },
  cache: {
    cacheLocation: BrowserCacheLocation.SessionStorage,
    storeAuthStateInCookie: false,
  },
  system: {
    allowNativeBroker: false,
    loggerOptions: {
      logLevel: LogLevel.Error,
      loggerCallback: (level, message, containsPii) => {
        if (containsPii) return;
        switch (level) {
          case LogLevel.Error:
            console.error(message);
            return;
          case LogLevel.Warning:
            console.warn(message);
            return;
        }
      }
    }
  }
};

// Auth request configurations
export const loginRequest = {
  scopes: ["openid", "profile", `api://${import.meta.env.VITE_CLIENT_ID}/access_as_user`],
  responseType: "code", // Request an authorization code
  CodeChallenge: true // Enable PKCE
};

export const apiRequest = {
  scopes: [`api://${import.meta.env.VITE_CLIENT_ID}/access_as_user`]
};

//...//...//...//
//...code available in GitRepo.../
//...//...//...//

const msalInstance = new PublicClientApplication(msalConfig);

// Initialize PKCE code verifier
const generateCodeVerifier = () => {
  const array = new Uint8Array(32);
  window.crypto.getRandomValues(array);
  const verifier = Array.from(array, dec => ('0' + dec.toString(16)).substr(-2)).join('');
  sessionStorage.setItem('pkce_verifier', verifier);
  return verifier;
};

//...//...//...//
//...code available in GitRepo.../
//...//...//...//

export default App;

export const generateCodeVerifier = () => {
    const array = new Uint8Array(32);
    window.crypto.getRandomValues(array);
    return Array.from(array, dec => ('0' + dec.toString(16)).substr(-2)).join('');
  };
  
  export const generateCodeChallenge = async (verifier) => {
    const encoder = new TextEncoder();
    const data = encoder.encode(verifier);
    const hash = await window.crypto.subtle.digest('SHA-256', data);
    return btoa(String.fromCharCode(...new Uint8Array(hash)))
      .replace(/=/g, '')
      .replace(/\+/g, '-')
      .replace(/\//g, '_');
  };

//...//...//...//
//...code available in GitRepo.../
//...//...//...//

const Login = () => {
  const { instance } = useMsal();
  const [isHovered, setIsHovered] = useState(false);

  const handleLogin = async () => {
    try {
      // Generate PKCE code verifier and challenge
      const codeVerifier = generateCodeVerifier();
      const codeChallenge = await generateCodeChallenge(codeVerifier);

      // Store code verifier for token exchange
      sessionStorage.setItem('pkce_verifier', codeVerifier);

      // Request authorization code with PKCE
      await instance.loginRedirect({
        ...loginRequest,
        codeChallenge,
        codeChallengeMethod: 'S256'
      });
    } catch (error) {
      console.error('Login failed:', error);
    }
  };
  
//...//...//...//
//...code available in GitRepo.../
//...//...//...//

//...//...//...//
//...code available in GitRepo.../
//...//...//...//

      // Get token using PKCE flow
      let tokenResponse;
      try {
        // Try silent token acquisition first
        tokenResponse = await instance.acquireTokenSilent({
          ...apiRequest,
          account: account,
          forceRefresh: false
        });
      } catch {
        // If silent acquisition fails, initiate interactive acquisition with PKCE
        const codeVerifier = sessionStorage.getItem('pkce_verifier');
        if (!codeVerifier) {
          throw new Error('PKCE verifier not found');
        }

        tokenResponse = await instance.acquireTokenPopup({
          ...apiRequest,
          codeVerifier: codeVerifier
        });
      }

      if (!tokenResponse || !tokenResponse.accessToken) {
        throw new Error('Failed to acquire token');
      }

      // const response = await fetch(`${import.meta.env.VITE_BACKEND_URL}/translate`, {
        const response = await fetch(`/api/translate`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${tokenResponse.accessToken}`,
        },
        body: JSON.stringify({ text: sourceText, sourceLang, targetLang }),
      });
      
 //...//...//...//
//...code available in GitRepo.../
//...//...//...//     

server {
    listen 80;
    server_name _;

    root /usr/share/nginx/html;

    index index.html;

    location / {
        # Redirect all requests to index.html for React Router
        try_files $uri /index.html;
    }

    location /static/ {
        # Serve static files
        expires max;
        add_header Cache-Control "public";
    }

    location /api/ {
        proxy_pass http://localhost:3500/v1.0/invoke/api/method/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

az containerapp create `
    --user-assigned $IDENTITY_ID `
    --registry-identity $IDENTITY_ID `
    --name $BACKEND `
    --resource-group $RESOURCE_GROUP `
    --min-replicas 1 `
    --max-replicas 3 `
    --environment $ENVIRONMENT `
    --image "$ACR.azurecr.io/backend:latest" `
    --target-port 3000 `
    --env-vars AZURE_KEY_VAULT_NAME=$KEY_VAULT `
               MANAGED_IDENTITY_CLIENT_ID=XXX-YYYYYYY-XXX-XXXXXX   
    --ingress 'external' `
    --registry-server "$ACR.azurecr.io" `
    --enable-dapr `
    --dapr-app-protocol http `
    --dapr-app-port 3000 `
    --dapr-app-id $BACKEND `
    --query properties.configuration.ingress.fqdn

const express = require('express');
const cors = require('cors');
const { SecretClient } = require('@azure/keyvault-secrets');
const { DefaultAzureCredential } = require('@azure/identity');
const axios = require('axios');
const authMiddleware = require('./authMiddleware');
const { updateConfig } = require('./config');
require('dotenv').config();

const app = express();
const port = process.env.PORT || 3000;

// Middleware
app.use(cors());
app.use(express.json());
app.use(authMiddleware); // Apply authMiddleware globally

// Thresholds for content moderation
const rejectThresholds = {
  Hate: 2,
  Violence: 2,
  SelfHarm: 2,
  Sexual: 2,
};

// Azure Service Variables
let translatorEndpoint;
let translatorKey;
let contentSafetyEndpoint;
let contentSafetyKey;

async function initializeAzureServices() {
  try {
    const vaultName = process.env.AZURE_KEY_VAULT_NAME;
    if (!vaultName) {
      throw new Error('Key Vault name is required');
    }

    const vaultUrl = `https://${vaultName}.vault.azure.net`;
    const credential = new DefaultAzureCredential({
      managedIdentityClientId: process.env.MANAGED_IDENTITY_CLIENT_ID,
    });

    const secretClient = new SecretClient(vaultUrl, credential);
    const secrets = await loadSecretsFromKeyVault(secretClient);

    translatorEndpoint = secrets.translatorEndpoint;
    translatorKey = secrets.translatorKey;
    contentSafetyEndpoint = secrets.contentSafetyEndpoint;
    contentSafetyKey = secrets.contentSafetyKey;
    clientID = secrets.clientID;
    tenantID = secrets.tenantID;

    console.log('Azure services initialized successfully with Key Authentication');
  } catch (error) {
    console.error('Failed to initialize Azure services:', error);
    throw error;
  }
}

async function loadSecretsFromKeyVault(secretClient) {
  try {
    const [translatorEndpoint, translatorKey, contentSafetyEndpoint, contentSafetyKey, clientID, tenantID] = await Promise.all([
      secretClient.getSecret('TranslatorEndpoint'),
      secretClient.getSecret('TranslatorKey'),
      secretClient.getSecret('ContentSafetyEndpoint'),
      secretClient.getSecret('ContentSafetyKey'),
      secretClient.getSecret('entraClientId'),
      secretClient.getSecret('entraTenantId'), 
    ]);

    const secrets = {
      translatorEndpoint: translatorEndpoint.value,
      translatorKey: translatorKey.value,
      contentSafetyEndpoint: contentSafetyEndpoint.value,
      contentSafetyKey: contentSafetyKey.value,
      clientID: clientID.value,
      tenantID: tenantID.value,
    };

    // Update the config with the secrets
    updateConfig({
      tenantID: secrets.tenantID,
      clientID: secrets.clientID
    });

    return secrets;
  } catch (error) {
    console.error('Error loading secrets from Key Vault:', error);
    throw error;
  }
}

async function analyzeContent(text) {
  try {
    const response = await axios.post(
      `${contentSafetyEndpoint.replace(/\/$/, '')}/contentsafety/text:analyze?api-version=2024-09-01`,
      {
        text,
        categories: ['Hate', 'Sexual', 'SelfHarm', 'Violence'],
        haltOnBlocklistHit: true,
        outputType: 'FourSeverityLevels',
      },
      {
        headers: {
          'Ocp-Apim-Subscription-Key': contentSafetyKey,
          'Ocp-Apim-Subscription-Region': 'swedencentral',
          'Content-Type': 'application/json',
        },
      }
    );

    const flaggedCategories = response.data?.categoriesAnalysis?.filter(
      ({ category, severity }) => rejectThresholds[category] !== undefined && severity >= rejectThresholds[category]
    ) || [];

    console.log('Content Safety API response:', response.data);
    return flaggedCategories;
  } catch (error) {
    console.error('Content analysis error:', error.response?.data || error.message);
    throw error;
  }
}

async function translateText(text, sourceLang, targetLang) {
  try {
    const response = await axios.post(
      `${translatorEndpoint.replace(/\/$/, '')}/translate?api-version=3.0&from=${sourceLang}&to=${targetLang}`,
      [{ text }],
      {
        headers: {
          'Ocp-Apim-Subscription-Key': translatorKey,
          'Ocp-Apim-Subscription-Region': 'swedencentral',
          'Content-Type': 'application/json',
        },
      }
    );

    console.log('Translation response:', response.data);
    return response.data[0].translations[0].text;
  } catch (error) {
    console.error('Translation error:', error.response?.data || error.message);
    throw error;
  }
}

// Routes
app.get('/health', (req, res) => {
  res.json({ status: 'Server is healthy' });
});

app.post('/translate', async (req, res) => {
  try {
    const { text, sourceLang, targetLang } = req.body;

    // First check: Content safety on source text
    const safetyCheck = await analyzeContent(text);
    if (safetyCheck.length > 0) {
      return res.status(400).json({
        error: 'Content Safety Warning',
        details: {
          message: '⚠️ Content flagged by Azure Content Safety',
          categories: safetyCheck,
        },
      });
    }

    // Perform translation
    const translatedText = await translateText(text, sourceLang, targetLang);

    // Second check: Content safety on translated text
    const translatedSafetyCheck = await analyzeContent(translatedText);
    if (translatedSafetyCheck.length > 0) {
      return res.status(400).json({
        error: 'Content Safety Warning',
        details: {
          message: '⚠️ Translated content flagged by Azure Content Safety',
          categories: translatedSafetyCheck,
        },
      });
    }

    res.json({ translatedText });
  } catch (error) {
    console.error('Translation or content safety error:', error);
    res.status(500).json({ error: 'Translation failed' });
  }
});

// Initialize services and start server
(async () => {
  try {
    await initializeAzureServices();
    app.listen(port, () => {
      console.log(`Server is running on port ${port}`);
    });
  } catch (error) {
    console.error('Failed to start the application:', error);
  }
})();

📝 Token received
=== Token Header ===
{
  "typ": "JWT",
  "alg": "RS256",
  "x5t": "Yxxxxxxxx",
  "kid": "Yxxxxxxx"
}
=== Token Payload ===
{
  "aud": "api://xxxxxxxxxxxx",
  "iss": "https://sts.windows.net/xxxxxxxxxxxxxx/",
  "scp": "access_as_user"
}
🔑 Retrieving signing key for kid: Yxxxxxxx
✅ Signing key retrieved successfully
=== Verification Options ===
{
  "algorithms": [
    "RS256"
  ],
  "issuer": "https://sts.windows.net/xxxxxxxxxxx/",
  "audience": "api://xxxx-xxxx-xxxx-xxxx-xxxxxxxxx"
}
✅ Token verified successfully
=== Scopes ===
Available scopes: [ 'access_as_user' ]
✅ Scope validation passed
=== Token Validation Complete ===

...//...//...//

// Initialize or update JWKS client if needed
    if (!client) {
      try {
        client = initializeJwksClient(tenantId);
      } catch (error) {
        console.error('❌ Failed to initialize JWKS client');
        console.error('Error details:', error.message);
        return res.status(500).json({ error: 'Failed to initialize authentication client' });
      }
    }
    
...//...//...//
...//...//...//

    console.log('\n=== Token Header ===');
    console.log(JSON.stringify(decodedToken.header, null, 2));
    console.log('\n=== Token Payload ===');
    console.log(JSON.stringify({
      aud: decodedToken.payload.aud,
      iss: decodedToken.payload.iss,
      scp: decodedToken.payload.scp,
      azp: decodedToken.payload.azp
    }, null, 2));

    let signingKey;
    try {
      console.log('🔑 Retrieving signing key for kid:', decodedToken.header.kid);
      const key = await util.promisify(client.getSigningKey.bind(client))(decodedToken.header.kid);
      signingKey = key.getPublicKey();
      console.log('✅ Signing key retrieved successfully');
    } catch (error) {
      console.error('❌ Failed to retrieve signing key');
      console.error('Error type:', error.name);
      console.error('Error message:', error.message);
      console.error('Error details:', error.stack);
      return res.status(500).json({ 
        error: 'Failed to validate token', 
        details: process.env.NODE_ENV === 'development' ? error.message : undefined 
      });
    }

    const verifyOptions = {
      algorithms: ['RS256'],
      issuer: decodedToken.payload.iss,
      audience: `api://${clientId}`
    };

    console.log('\n=== Verification Options ===');
    console.log(JSON.stringify(verifyOptions, null, 2));
    
    ...//...//...//