How do client-side JS libraries for OAuth2 maintain secure authentication?

Question

I\'m new to OAuth2 and there\'s a problem I\'ve been struggling with and despite research still can\'t grasp.

The difficulty in having a JS client for OAuth2 is that you

Answer 1

In case of JS client, Google does validate that the JS origin matches the one registered with the client id. So if someone uses someone else's client id, at most they can get a token for only the accounts they own (which is not going to be very useful).

In general, you can never know who/what client (or code) is talking to your server. You only see the data they send. So if the same packets are sent by other clients/code, there is nothing you can do and in general you shouldn't care. You should care about that you have proper credentials in the request.

Answer 2

There're flows in OAuth2 that don't require a secret (e.g. implicit flow is typically used for JS based clients, SPAs, etc). Not all providers support this flow though, so in those situations you need a server side component that negotiates that for you and then handles the interactions with your front-end/device.

In any case, you need the user to authenticate. The secret authenticates the client (your app), not the user. The return url (or callback) protects the token to be posted somewhere else (only your app).

Samples of these flows are here: https://docs.auth0.com/protocols#5

Update: There's a specific code/token exchange protocol for "public clients" that adds extra security: PKCE (how it works is here: https://auth0.com/docs/protocols#oauth2-pkce-for-public-clients)