After doing a bit of research I found a workable solution to this trivial problem myself. The answer is to use a PROXY PAGE within my custom web application.
ArcGIS JavaScript SDK itself provides the functionality of configuring server side proxies within your web applications through the helper classes. The good part is that the functionality of Proxy pages can be harnessed not only in Esri Custom apps made using SDKs but also by various Esri web app builder plarforms as well like ArcGIS Web App Builder & ArcGIS Experience Builder.
ArcGIS Proxy will act as a Postman between your clients browsers and your web server which means that the request to the secured service shall pass via this postman i.e Esri proxy which will authenticate the service on users behalf with the help of embbeded token or credentials which will be inside your proxy file. This would ensure that the public facing web app access the secured service without challenging the user for any credentials. Proxy can also be configured in such a way that only whitelisted domains are able to access the proxy page such that anynomous access to proxy can be avoided which would ensure data integrity.
Just make sure to place your secured GIS web service URL in the proxy.config file alsong with the credentials or token which will be used by your web server to authenticate the service on users behalf. The best part is that proxy can be configured in your environement for variety of web servers like IIS, Apache, Tomcat etc. Hence, irrespective of programming language you can harness the complete benefits of Esri proxy using ArcGIS JavaScript SDK. You might be worijg with .NET, JAVA, PHP React etc and still can use the Esri proxy & harness ithe benifits it provides.
Go through the following links & sample code for detailed understanding:
Documentation: https://developers.arcgis.com/javascript/3/jshelp/ags_proxy.html
Proxy Download Link: https://github.com/Esri/resource-proxy/releases
Sample Code: Attached
