How to securely authenticate a React client through OAuth if everything is client?

Question

I am trying to use OAuth with a React (frontend) and Meteor (server) project. The service I'm trying to use OAuth is not one of the popular widespread (i.e.Google, Facebook), so I'm having trouble figuring out how to do this.

Meteor maintains a secure settings.json server file that stores your api keys and application secrets, which I would presumably use to authenticate the client. I just don’t understand how.

I found this package https://www.npmjs.com/package/react-oauth-flow , and the OAuth request submission component looks like this:

<OauthSender authorizeUrl="https://www.dropbox.com/oauth2/authorize" clientId={process.env.CLIENT_ID} redirectUri="https://www.yourapp.com/auth/dropbox" state={{ from: '/settings' }} render={({ url }) => <a href={url}>Connect to Dropbox</a>} /> 

Now I don’t understand how {process.env.CLIENT_ID} can be safely stored / retrieved since the entire application is accessible to the client? Therefore, I could not use something like Meteor.settings.CLIENT_ID because the application client identifier is not available for the responsive application.

The same goes for the OauthReceiver component:

 <OauthReceiver tokenUrl="https://api.dropbox.com/oauth2/token" clientId={process.env.CLIENT_ID} clientSecret={process.env.CLIENT_SECRET} redirectUri="https://www.yourapp.com/auth/dropbox" onAuthSuccess={this.handleSuccess} onAuthError={this.handleError} render={({ processing, state, error }) => ( <div> {processing && <p>Authorizing now...</p>} {error && ( <p className="error">An error occured: {error.message}</p> )} </div> )} /> 

How is {process.env.CLIENT_SECRET} retrieved? Again, you cannot use Meteor.settings.CLIENT_SECRET, since it is available only for the server, and the component is rendered on the client side.

I feel that this is a problem of conceptual understanding on my part, and if someone could explain it to me, I would be very grateful.

Answer 1

process.env.CLIENT_SECRET refers to the environment variable passed to your application from the command line at runtime. If you are using the Create React application, the documentation on how to implement this is here .

If you are not using CRA, then you will pass the environment variables to your webpack build command, either from your package.json or from the command line. The syntax will look like this:

{ // the rest of your package.json scripts: { "dev": "webpack --env.API_URL=http://localhost:8000 --config webpack.config.dev.js", "build": "webpack --env.API_URL=https://www.myapi.com --config webpack.config.build.js" } }

Using this syntax, you can pass your client secret / etc as environment variables into your React application. However, they will then be available to the client and will not be as secure as the proper authentication code stream for OAuth2.0.

If you already have a server part (what you have), pay attention to the implementation of this stream to increase security.