Client-side authentication without server when using Github OAuth

Question

I am trying to write a small app that uses the Github API and is hosted on github.io

I'm following the web application flow documentation which can be summarized as:

1. App webpage redirects user to github.com with the client id parameter and a redirect url parameter that links the user back the app webpage
2. Once the user authenticated on the github end, they are redirected to the app webpage with a temporary code parameter that can be used to get the access token which unlocks the API
3. The POST request to obtain the access token from the temporary code requires submitting both the client id and the client secret

If the application is client side only (except the static page host), how should I handle the client secret? It can't be embedded within the application or the user can find it. Is it imperative that a server be used to mediate the authentication process?

Answer 1

As you've noticed, to retrieve the access_token you'll have to request the API with your Client Secret. You just can't hide deep in your frontend code your Client Secret as it shall remain secret. This means that the retrieval of the access_token shall happen in your backend.

One thing you can do though is to use an open-source OAuth Manager codenamed Pizzly. You host it on a Heroku or Digital Ocean instance, and let it handle the OAuth-dance.

In your frontend, here's how you would connect a user to GitHub and retrieve an access_token:

const App = () => {

  // Initialize Pizzly
  const pizzly = new Pizzly({ host: PIZZLY_HOSTNAME, publishableKey: PIZZLY_PUBLISHABLE_KEY })

  // Use the GitHub API
  const github = pizzly.integration('github')

  // The connect method lets us authenticate a user
  // to our GitHub OAuth application
  const connect = () => {
    github
      .connect()
      .then(({ authId, payload }) => {
        console.log(authId, payload.accessToken)
      })
      .catch(console.error)
  }

  // ...
};

export default App;

To make a request to the GitHub API, you can then use payload.accessToken or continue using Pizzly. Here's a full guide on how to use Pizzly with GitHub (in React).

This way, your API credentials remain hidden from your users. But your frontend code is clean.