Exploring OAuth 2.0: Enabling Google Authentication in a Pure Browser-Based Web App (1)
Tags: opensource, webdev, programming, react
Published: 2024-02-03 02:58:25

In the realm of web development, user authentication is a critical aspect, and leveraging OAuth 2.0 for secure, seamless authentication has become a common practice. Recently, I delved into the world of OAuth 2.0 with the specific goal of enabling users to authenticate with Google in a pure browser-based web app, devoid of any server-side code.


**Insights from GitHub Authentication**
First, I tried to learn the GitHub authentication in our project [ChatCraft](https://github.com/tarasglek/chatcraft.org). I found GitHub provides [REST API](https://docs.github.com/en/rest/users/users?apiVersion=2022-11-28#get-the-authenticated-user) to get public and private information about authenticated users.

**The Quest for Google Authentication**
Then, I searched the document for Google Authentication and found the [web](https://developers.google.com/identity/sign-in/web/sign-in#sign_out_a_user), I tried to understand the way to figure it our, but I found it was for an web app which contained the backend.
So I tried to find the suitable way to use adapting Google OAuth for a client-side application. 
Finally, I found the [document](https://developers.google.com/identity/protocols/oauth2/web-server) for JavaScript web apps 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ghlaxnxh41osl1yv68ou.png)


The process involved creating an OAuth 2.0 Client ID, which acted as the key to unlocking the authentication flow. [Taras](https://github.com/tarasglek) helped me to set one for the ChatCraft. 

**Step 1: Redirect to Google's OAuth 2.0 server**
Redirecting to Google's OAuth 2.0 server was a pivotal moment. The dance between my application and Google's authentication server took shape. I found I need set the query string redirect_uri to generate a URL to request access from Google's OAuth 2.0 endpoint, which is set in [Credentials page](https://console.cloud.google.com/apis/credentials). So it can only test in product environment, can test in my local and testing environment which makes it hard for me to write and test code.
Luckily, I found a good way to solve it. I created a credential for testing and add `redirect_uri: "http://localhost:5173"` in my request. So I can correctly redirct to google from my local.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/73zspicg75g5cjvthfns.png)


**Step 2: Google prompts user for consent**
In this step, the user decides whether to grant your application the requested access. At this stage, Google displays a consent window that shows the name of your application and the Google API services that it is requesting permission to access with the user's authorization credentials and a summary of the scopes of access to be granted. The user can then consent to grant access to one or more scopes requested by your application or refuse the request. I think I will add some check for this step.

**Step 3: Handle the OAuth 2.0 server response**
According to google document, the OAuth 2.0 server sends a response to the redirect_uri specified in your access token request which is difference from the API return. I think I still need time to figure it out.

**Plan**
My exploration into OAuth is an ongoing adventure. While I've laid the foundation for Google authentication, there is much more to discover – from handling access tokens securely to optimizing the user experience. The journey continues as I navigate the evolving landscape of web development and authentication mechanisms.