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. I found GitHub provides REST API 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, 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 for JavaScript web apps
The process involved creating an OAuth 2.0 Client ID, which acted as the key to unlocking the authentication flow. Taras 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. 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.
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.
Top comments (0)