Demystifying OAuth Flows: A Beginner's Guide to Secure Authentication!

Dhruv ParwaniDhruv Parwani
8 min read

Hey there, fellow tech explorer! If you're diving into the world of how applications work, you've probably heard terms like "authentication" and "authorization" floating around. Today, we're going to explore the exciting world of OAuth flows – a set of rules that allow applications to get limited access to your user data without ever touching your passwords. Think of it as a super-secure valet service for your digital information!

Why is this important? Because almost every app you use, from social media to online banking, relies on secure authorization. Understanding these flows will give you a solid foundation in how applications interact with user data securely.

Let's break down some common OAuth flows, making them simple and understandable.

The Grandaddy: Authorization Code Flow

This is often considered the most secure and widely used flow, especially for web applications. Imagine you want to log into an app using your Google account. Here's how it generally works, step-by-step:

  1. You start the Login: You click something like "Login with Google" on your favorite app (let's call it "MyCoolApp").

  2. MyCoolApp Asks Google for Permission: MyCoolApp sends you to Google's login page. It's essentially saying, "Hey Google, this user wants to use me, can they give me permission?"

  3. Google Asks You to Log In: If you're not already logged in to Google, Google will pop up a screen asking for your username and password.

  4. You Log In (to Google): You safely type your Google username and password directly into Google's site. MyCoolApp never sees this!

  5. Google Asks for Your OK: Google then asks you, "Do you allow MyCoolApp to access your profile information?" This is your chance to say yes or no.

  6. You Say "Yes!": You click "Allow" or "Accept."

  7. Google Sends a Secret Note: Google sends a temporary, one-time "Authorization Code" back to MyCoolApp. Think of this code like a secret sticky note that only MyCoolApp and Google understand.

  8. MyCoolApp Swaps the Note for a "Golden Ticket": MyCoolApp immediately sends this secret note (the Authorization Code) back to Google's server, along with its secret ID (that Google recognizes).

  9. Google Gives MyCoolApp the Golden Ticket (Access Token): If everything checks out, Google gives MyCoolApp a "Golden Ticket" called an "Access Token." This ticket is what MyCoolApp will use to access your data.

  10. MyCoolApp Uses the Golden Ticket: Now, MyCoolApp uses this Golden Ticket to ask Google's servers (where your data lives) for the information it needs, like your profile picture or email address.

  11. Google checks the Ticket and Shares: Google's servers check the Golden Ticket. If it's valid, they give MyCoolApp the data it asked for.

  12. MyCoolApp Shows You Your Stuff: Finally, MyCoolApp displays your information or lets you use features based on that data.

Think of it like this: You permit a trusted friend (Google) to give a temporary pass (Authorization Code) to a new acquaintance (MyCoolApp). The acquaintance then uses that pass to get a proper ID card (Access Token) from your friend, which they then use to access your stuff (Google's servers).

Enhancing Security: Proof Key for Code Exchange (PKCE)

While the Authorization Code flow is great, what if someone sneaks a peek at that "secret note" (authorization code) while it's being sent? PKCE (pronounced "pixy") adds an extra layer of security, especially for apps on your phone or single-page websites.

It works very similarly to the Authorization Code flow, but with a clever security handshake:

  1. Your App Makes a Secret Word: When you open the app, it secretly creates a random, unique "secret word" (called a code_verifier). It also creates a "scrambled" version of this secret word (called a code_challenge).

  2. App Sends the Scrambled Word with the Request: When your app asks Google for permission, it also sends this. code_challenge.

  3. Google Remembers the Scrambled Word: Google stores this code_challenge.

  4. App Sends the Original Secret Word to Get the Golden Ticket: When your app gets the "secret note" (Authorization Code) back from Google, it sends it back to Google to get the "Golden Ticket" (Access Token). BUT, this time it also sends the original, unscrambled "secret word" (code_verifier).

  5. Google Checks the Secret Word: Google takes the code_verifier it just received, scrambles it the same way, and compares it to the code_challenge one it remembered from step 3. If they match, Google knows it's the real app that started the process and gives it the Golden Ticket.

This ensures that only the app that originally asked for permission can complete the process and get the Access Token, even if someone tries to steal the "secret note."

The Simpler (but Less Secure) One: Implicit Grant Flow

This flow was mostly used for simple web apps that run entirely in your browser (Single-Page Applications or SPAs). However, because it's a bit less secure (like leaving your "Golden Ticket" in plain sight for a moment), it's generally not recommended anymore in favor of the Authorization Code Flow with PKCE.

Here's the basic idea:

  1. You go to a Web App: You open a web app in your browser.

  2. App Redirects to Authorization Server: The app sends your browser to the Authorization Server (e.g., Facebook).

  3. You Log In and Say "OK": You log in to Facebook and grant permission to the app.

  4. Authorization Server Puts the Token in the URL: Instead of giving the app a "secret note," the Authorization Server immediately sends you back to the app, but it puts the "Golden Ticket" (Access Token) directly in the web address (URL) of your browser! It looks like #access_token=... at the end of the URL.

  5. App Grabs the Token from the URL: The web app's code running in your browser quickly grabs this "Golden Ticket" from the URL.

The main problem is that because the "Golden Ticket" appears in the URL, it could be seen by others or stored in your browser's history, making it less secure.

For App-to-App Communication: Client Credentials Flow

What if an app needs to do something without a human user directly involved? For example, a system that automatically updates stock prices or sends out daily reports. This is where the Client Credentials Flow comes in handy.

  1. MyService Needs to Do Something: Imagine a background service (let's call it "MyService") that needs to access a specific resource (like a database of product prices).

  2. MyService asks for a Token with its ID: MyService directly sends its own unique ID and secret password to the Authorization Server. It's like MyService showing its employee badge.

  3. Authorization Server Checks the Badge: The Authorization Server verifies if MyService's ID and password are correct.

  4. Access Token Given Directly: If valid, the Authorization Server grants an Access Token directly to MyService.

  5. MyService Uses the Token: MyService then uses this Access Token to talk to the "Resource Server" (where the product prices are stored).

  6. Resource Server Validates and Shares: The Resource Server checks the token. If it's valid, it gives MyService the product prices.

This flow is perfect for when one computer system needs to talk to another system, without a user needing to be logged in.

For Devices with Tricky Keyboards: Device Code Flow

Ever tried to log into Netflix on a smart TV or a gaming console? Typing long email addresses and passwords with a remote control is a pain! The Device Code Flow makes this much easier.

  1. You open the App on your TV: You launch the Netflix app on your smart TV.

  2. TV Asks for Special Codes: The TV asks Netflix's Authorization Server for two special codes: a device_code (for the TV) and a user_code (for you).

  3. TV Shows You Instructions: Your TV displays something like: "Go to netflix.com/activate On your phone or computer, enter the code ABCD-1234."

  4. You go to the URL on Your Phone/Computer: On your phone or laptop, you open the website mentioned and type in the user_code (ABCD-1234).

  5. You Log In and Say "OK": You log in to your Netflix account on your phone and then permit your TV to access it.

  6. Your TV Keeps Asking, "Am I Ready Yet?": Meanwhile, your TV is continuously checking with Netflix's Authorization Server, asking, "Is my code ABCD-1234 authorized yet?"

  7. Netflix Tells Your TV, "Yes!": Once you've approved it on your phone, Netflix's server finally tells your TV, "Yes, you're authorized!"

  8. TV Gets the Golden Ticket: Your TV then uses the device_code one it received earlier to get its own Access Token.

  9. Access Granted: Now, your TV has the Golden Ticket and can access your Netflix shows!

This flow makes logging in on devices without easy keyboards much simpler.

Wrapping Up

These OAuth flows may seem overwhelming at first, but each one is a smart way to ensure apps can access your information safely and securely, without ever needing your password. As you continue to learn and build, you'll see these concepts popping up everywhere!

Remember these simple points:

  • Don't share your passwords directly with apps. OAuth helps apps get access without your password.

  • Access Tokens are like temporary "Golden Tickets" that grant specific permissions for a limited time.

  • Different situations call for different flows. There's a flow for web apps, phone apps, background services, and even smart TVs!

Keep exploring, keep learning, and soon you'll be an OAuth pro!

11
Subscribe to my newsletter

Read articles from Dhruv Parwani directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Dhruv Parwani
Dhruv Parwani