App Security Part I -Identity Federation with Google OAuth in React App
Identity management and authentication is central to any application that serves content based on whether the audience is member of the service or a casual visitor. Using identity management businesses can offer access to differentiated services and content. While identity management forms the underpinning of the in-depth, zero trust security, it is also subject to privacy laws, confidentiality and non disclosure clauses. Failing to comply with those clauses can lead to low reputation, not to mention fines and legal battles. Users are also wary of creating and using separate account for each service offered on the vast internet landscape. This can lead to password proliferation, setting same password for accessing multiple services. Something that is fraught with great risk, for both the consumer and owner of the service.
This is where federated identity through social media platforms such as Google and Facebook can come in handy. There are also other platforms such as Github that provide similar service. The advantage with such a platform is that businesses can onboard the audiences in a flash and help grow quickly. The second and equally important feature is the availability of these identity platforms, that is nearly 0% downtime [Ironically, I am writing this on a day when Google services experienced outage across several parts of the world]. Besides, the service provider does not have to worry about regulations, password rotation, data security and advanced features such as adaptive authentication, multi-factor authentication to name a few.
With the context out of the way, I will now go on explain what this write up attempts to depict. This installment of this series, will take us through integration of a react with social medial identity provider. In this specific case the provider would be Google. So here we have a react application that shows different views to users based on the whether he has been signed in or not by the google identity platform. The current implementation employs vanilla state management and not many bells and whistles, in order to strictly stick to the main objective. The second edition will try to bring in refinements in state management using frameworks such as redux.
Here’s the component layout of the react app.
While the bulk of the components are standard react components, the key component is the Auth component and its integration with google identity platform.
Before getting started, it is required to create an app identity on google platform for your app and generating api keys. using this key the app connects to the google identity platform every time a user signs in and handles the nitty gritty of the communication. The set up of this documented on https://console.developers.google.com/. Essentially we are required to create a oauth client id on the developers console and use it in the react app for the purposes of integration.
There’s a couple of thins to do in the react app to facilitate the integration with google identity as shown below. The complete source code can be referenced on here.
Google apis also provide client side javascript libraries known ‘GAPI Auth2’ and referenced as a script above.
Following is the code to wire up the GAPI with our react app. The apis and methods used here can be referenced from here;
when the app is started using ‘npm start’ this is what we get to see.
when we click on the sign in button, we see the authentication magic happening under the hood.
Post successful login, the following view is rendered. As we can see the featured content is unlocked.
The app is deployed on ‘vercel’ and can be accessed using the URL : https://social-auth-v2.vercel.app/ . That was in brief a quick tour of react app integration with google identity platform using Oauth. Hope you liked it. However, there are some improvements we can do to this app. Especially with state management. There are some frameworks exclusively for the same. We will explore the same in the next instalment[Part II] of this series.
