Move auth config to server side

Project/oAuthConfig.js

@@ -1,19 +1,25 @@
 const authConfig = {
-    auth: {
-        clientId: 'ENTER_CLIENT_ID',
-        authority: 'https://login.microsoftonline.com/ENTER_TENANT_ID'
+    configuration: {
+        auth: {
+            clientId: 'ENTER_CLIENT_ID',
+            authority: 'https://login.microsoftonline.com/common'
+        }
+    },
+    scopes: {
+        m365Login: [
+            "https://auth.msft.communication.azure.com/.default"
+        ],
+        popUpLogin: [
+            "https://auth.msft.communication.azure.com/Teams.ManageCalls",
+            "https://auth.msft.communication.azure.com/Teams.ManageChats"
+        ]
     }
 };
- // Add here scopes for id token to be used at MS Identity Platform endpoints.
-const authScopes = {
-    popUpLogin: [],
-    m365Login: []
-};
 
 const entraCredentialConfig = {
     tenantId: 'ENTER_TENANT_ID',
     clientId: 'ENTER_CLIENT_ID',
     resourceEndpoint: 'ACS_RESOURCE_ENDPOINT' // e.g., 'https://contoso.unitedstates.communication.azure.com/'
 };
 
-module.exports = {authConfig, authScopes, entraCredentialConfig }
+module.exports = { authConfig, entraCredentialConfig }

Project/src/Utils/Utils.js

@@ -7,7 +7,6 @@ import {
 } from '@azure/communication-common';
 import { InteractiveBrowserCredential } from '@azure/identity';
 import { PublicClientApplication } from "@azure/msal-browser";
-import { authConfig, authScopes } from "../../oAuthConfig"
 import axios from 'axios';
 
 export const utils = {
@@ -64,8 +63,40 @@ export const utils = {
         throw new Error('Failed to get ACS User Acccess token for the given OneSignal Registration Token');
     },
     teamsPopupLogin: async () => {
-        const oAuthObj = new PublicClientApplication(authConfig);
-        const popupLoginRespoonse = await oAuthObj.loginPopup({scopes: authScopes.popUpLogin});
+        /* 
+        Ideally authConfig could be stored in a config file or environment variable:
+            const authConfig = {
+                configuration: {
+                    auth: {
+                        clientId: 'ENTER_CLIENT_ID',
+                        authority: 'https://login.microsoftonline.com/common'
+                    }
+                },
+                scopes: {
+                    m365Login: [
+                        "https://auth.msft.communication.azure.com/.default"
+                    ],
+                    popUpLogin: [
+                        "https://auth.msft.communication.azure.com/Teams.ManageCalls",
+                        "https://auth.msft.communication.azure.com/Teams.ManageChats"
+                    ]
+                }
+            };
+        */
+        const fetchAuthConfig = async () => {
+            const response = await axios({
+                url: 'authConfig',
+                method: 'GET'
+            });
+            if (response.status !== 200) {
+                throw new Error('Failed to get auth configs');
+            }
+            return response.data;
+        }
+        const authConfig = await fetchAuthConfig();
+
+        const oAuthObj = new PublicClientApplication(authConfig.configuration);
+        const popupLoginResponse = await oAuthObj.loginPopup({scopes: authConfig.scopes.popUpLogin});
         const response = await axios({
             url: 'teamsPopupLogin',
             method: 'POST',
@@ -74,8 +105,8 @@ export const utils = {
                 'Content-type': 'application/json'
             },
             data: JSON.stringify({
-                aadToken: popupLoginRespoonse.accessToken,
-                userObjectId: popupLoginRespoonse.uniqueId
+                aadToken: popupLoginResponse.accessToken,
+                userObjectId: popupLoginResponse.uniqueId
             })
         });
         if (response.status === 200) {

Project/webpack.config.js

@@ -7,8 +7,8 @@ const axios = require("axios");
 const bodyParser = require('body-parser');
 const msal = require('@azure/msal-node');
 
-const {authConfig, authScopes, entraCredentialConfig} = require('./oAuthConfig');
-const clientId = authConfig.auth.clientId;
+const {authConfig, entraCredentialConfig} = require('./oAuthConfig');
+const clientId = authConfig.configuration.auth.clientId;
 
 
 if(!config || !config.connectionString || config.connectionString.indexOf('endpoint=') === -1)
@@ -216,11 +216,7 @@ module.exports = {
             devServer.app.get('/entraConfig', async (req, res) => {
                 try {
                     res.setHeader('Content-Type', 'application/json');
-                    res.status(200).json({
-                        tenantId: entraCredentialConfig.tenantId,
-                        clientId: entraCredentialConfig.clientId,
-                        resourceEndpoint: entraCredentialConfig.resourceEndpoint
-                    });
+                    res.status(200).json(entraCredentialConfig);
                 } catch (e) {
                     console.error(e);
                     res.sendStatus(400);
@@ -231,8 +227,8 @@ module.exports = {
                     const email = req.body.email;
                     const password = req.body.password;
 
-                    const pca = new msal.PublicClientApplication(authConfig);
-                    let tokenRequest = {scopes: authScopes.m365Login}
+                    const pca = new msal.PublicClientApplication(authConfig.configuration);
+                    let tokenRequest = {scopes: authConfig.scopes.m365Login}
 
                     tokenRequest.username = email;
                     tokenRequest.password = password;
@@ -249,6 +245,15 @@ module.exports = {
                     res.sendStatus(400);
                 }
             });
+            devServer.app.get('/authConfig', async (req, res) => {
+                try {
+                    res.setHeader('Content-Type', 'application/json');
+                    res.status(200).json(authConfig);
+                } catch (e) {
+                    console.error(e);
+                    res.sendStatus(400);
+                }
+            });
             devServer.app.post('/createRoom', async (req, res) => {
                 try {
                     let participants = [];