App Security Part II -Identity Federation with Google OAuth in React Redux App
In Part I, we went over the details of GAPI integration with React app. While it looks good, it is obvious that as an app grows it will need a better ways to handle application state. In version 1, our app state is all over the place. We need a centralized store to manage state. In order to do so we would be using the redux framework. Apart from that we will also look at ways to enable viewing of the redux store and its real time state. Finally we will look at how we can deploy this app on a hosting platform.
First up a quick note on redux. redux is a generic functionality to store application state. It can then be integrated with react apps using ‘react-redux’ modules. Redux employs the concept of an ‘action creator’ generating a specific action, which is then intercepted by a specific ‘reducer’ and store the payload associated with the action in the ‘store’. Applied to our ‘authentication’ use case, here is how it would look like diagrammatically.
So now any component can connect to the redux ‘store’, to access the ‘authentication’ state.
The source code for the completed app is available here;
We did a fair bit of refactoring to bring in redux into the mix and the key details are available in the file ‘Header.js’ which doubles up as a header and auth component now. Following is the reference to the same. The code for the actions and reducer can be referenced on github.
It goes beyond doubt that redux makes state management a breeze, even the user experience looks enriched. There are also some redux dev tools that allow us a peek into the store by wiring up some instrumentation code. Using this instrumentation, we can get a holistic view of the state and the history and do a time travel. The instrumentation is done in the indes.js file like below. More details on integration can be found here.
Deployment
There are several options to deploy our app on a hosting platform. One such option is ‘vercel’. It is fairly simple to set up and make quick progress. In a nutshell, here are the broad steps.
- register on vercel.com
- install the vercel cli [npm install -g vercel]
- from the source directory execute [vercel login, and vercel one after the other]
After the steps above the app is deployed on vercel and we get a unique url to access the app. Post deploying my app, it can be accessed on ‘https://social-auth-v2.vercel.app/’. If the redux dev tool extension is installed, it becomes visible near the url bar that has an icon that resembles the solar system. If clicked, it will show a the redux store, state info and its transitions.
With this we have come to the completion on this series. Hope you enjoyed going through this. In the next article I will share details about another weapon we ought to have in the security arsenal.
