Security concerns around embedding OAuth client_secret in frontend?

I’m building an application that allows users to interact with their GitHub account data. It is a single page application but with React and is registered with GitHub as an OAuth Application (https://developer.github.com/apps/building-oauth-apps/). Reading through the docs on the web application flow (https://developer.github.com/apps/building-oauth-apps/authorizing-oauth-apps/#web-application-flow), I see that the flow is basically:

  1. Redirect user to GitHub Oauth login page, providing the client_id and a redirect url as query parameters.
  2. After logging in, GitHub redirects user back to my app with a code value serving as a bearer token.
  3. My application makes a POST request with the bearer token, my client_id, and my client_secret to Github, getting in exchange an authentication token that my application can then use to make API calls on the user’s behalf.

This all seems totally fine and I’m able to perform the steps entirely within my frontend application, however the last step would require me to embed my client_secret in my frontend application code. This would obviously make it accessible to anyone who was interested finding it. I can’t come up with any particular reasons why this is exactly a security concern, however I struggle with the idea of embedding something labeled as a “secret” within frontend code. Given the redirect flow, Github’s services should reject any authentication attempts where the redirect URI doesn’t match the URI specified in my Oauth Application’s configuration, so I don’t think a malicious actor could do any damage with my application’s credentials.

I could stand up a simple server to handle to login flow (user POSTs bearer token to my API, my API sends bearer token and client_secret to Github), however keeping this entirely as a frontend html/js project would definitely be desirable.

So, can anyone comment on the recommended best practice around embedding the OAuth Application client_secret in a frontend application (or otherwise exposing it, such as committing it to version control)? Is there a real risk if others get it or am I just fixating in the word “secret”?

@alukachin general, you should not embed the client secret in an Authorization code flow in a client facing web app, because someone could use those the combination of ID and secret to impersonate your app. You should either set up a proxy server to handle the Authorization code flow or use another type of flow such as PKCE (but I don’t think that’s supported by the Github API).

1 Like

Thanks @kamicut!

So, it seems like the primary risk is that if someone could easily get your Client Secret (i.e. read it in your front-end application’s source code) and then could somehow intercept the Authorization Code (e.g. look through a browser’s history for redirect URLs, such as when Github redirects back to “http://…redirect_uri…/?code=abc123”), then that person would be able to easily generate an auth token for that user.

So in closing, it is not okay to embed your client_secret in a frontend application.