How to use token based auth with Pure JS app

[ashish207]

I am consuming an API which is secured by Tokens (JWT) and to get the token it needs client to pass clientid and client secret. And on subsequent requests client need to pass token to access API resources.

My worry is : ClientID and ClientSecrets can easily be stolen from network using some tools or browser plugins and attacker can get the tokens easily using these values.

Additional Information : here client would be web components created in VueJs and can be used independently in any client application. Suppose you are my client and you want to use this app in you application, this app would require me to pass your client id and client secret for Token generation.

Could you please suggest some solution.

My Sulution: I can create one service and deploy at the same location where my vue app is hosted. This service will be private and ll have Get method which will call Web API on vue app's behalf and return token to vue app. I can store client id and client secret at the same server component.

Problem with this solution: We are creating web components (vue app/ it can be react or any modern js framework) so that N number of clients and their N vendors easily integrate component in their app. With my solution the service which will call token API on app behalf would be extra plugin for the component to manage in every vendors application. Any change would lead to redundant work in each website.

Another partial solution i can think is: Just create a url (end point) at the host ( where vue app is hosted) give this url to token API. Token API will register this url as a call back url i.e. token would be returned to this url. In this case even if client secret and client id is compromised, middle man can not access the token as it would be returned to callback URL. This solution is partial because although middle man can not access token but for other functionalities/parts/ of vendors website middle man can misuse using client secret.

There are ways in OAuth 2.0 in which we do not need to pass client secret which is called implicit grant but we can not use this since we don't want user to redirect to Authenticate Server.

Now what I am exploring is : any industry standard to get token in modern Pure JS apps.
In Native app it's quite easy but in JS app seems to be challenging particularly if we don't want users to redirect to Auth Server. Otherwise implicit grant and call back url combination was the fit solution.