🔐 What Is OAuth2 and Why It Matters – A Developer's Perspective

Have you ever logged into a third-party app using Google or GitHub and wondered how that actually works? That magical flow that lets you skip creating a new password and instantly access an app? That’s OAuth2 in action.

In this post, I’ll walk you through:

• What OAuth2 is
• Why it came to be
• What problems it solves
• A full-stack OAuth2 demo using Spring Boot and React

---

The Problem Before OAuth

Before OAuth, if an app needed access to your account on another platform (like Google or Facebook), you had to give them your actual password. 😬

Imagine using a third-party calendar app that asks for your Gmail password just to read your events. You're not just giving access to your calendar—you’re handing over the keys to your entire Google account.

There was no way to:

• Limit what the third-party app could access
• Revoke access easily
• Authenticate without sharing credentials

---

Enter OAuth2: Delegated Authorization

OAuth2 fixes all of that. It allows an application to access a user’s data without ever seeing their password.

It’s all about delegated authorization:

“Hey Google, this app just wants permission to read my calendar—nothing else.”

With OAuth2, the user:

1. Gets redirected to the identity provider (like Google or GitHub)
2. Logs in and grants access
3. The app receives a token to act on behalf of the user within a limited scope

---

OAuth2 vs. Authentication

It’s important to know:

• OAuth2 is about authorization, not authentication.
• But when used with identity providers like Google or GitHub, we often get basic profile info (name, email, picture) as part of the flow.

This hybrid use case is what powers modern SSO (Single Sign-On) experiences.

---

My OAuth2 Learning Project

To understand OAuth2 better, I built a full-stack app using:

Backend – Spring Boot

• Google Cloud Console & GitHub Developer OAuth setup
• client_id and client_secret configuration
• /user-info endpoint to return authenticated user details
• CORS config for cross-origin React frontend

Frontend – React

• Two login buttons: Google & GitHub
• Redirect to /oauth2/authorization/{provider}
• Axios request to /user-info after successful login
• Dashboard displaying name, email, and profile picture

---

Here's What It Looks Like

GitHub OAuth + concent View

OAuth Consent Page

Dashboard with Profile Info

---

How It Works (Simplified)

1. User clicks Login with Google
2. Redirect to http://localhost:8080/oauth2/authorization/google
3. User logs into Google and grants consent
4. Backend redirects to http://localhost:5173/dashboard
5. Frontend fetches user data via /user-info
6. React displays name, email, and avatar

---

What I Learned

• OAuth2 is powerful and secure when used correctly
• Spring Security makes integrations seamless
• CORS and cookies need special attention
• Tokens are the backbone of delegated access
• Security is a core part of development—not an afterthought

---

Want to See the Code?

I’ve open-sourced this project so you can explore the full implementation:

👉 Check it out on GitHub:

github.com/sanMakesApps/oauth2-login-demo

Whether you're building a full-stack app or just curious about what happens when you click “Login with Google,” OAuth2 is essential knowledge for modern web devs.

Thanks for reading! Feel free to reach out with questions or ideas 🙌