Episode 2 of 21

The OAuth Flow

Walk through the complete OAuth authorization flow step by step — understand the redirect-based handshake between your app, the user, and google.

The OAuth Flow

Let us walk through the complete OAuth flow step by step. Understanding this flow is essential before writing any code.

The Authorization Code Flow

┌──────────┐     ┌──────────────┐     ┌──────────────────┐
│  User's  │     │  Your App    │     │  Google (OAuth    │
│  Browser │     │  (Server)    │     │   Provider)       │
└────┬─────┘     └──────┬───────┘     └────────┬──────────┘
     │                  │                      │
     │ 1. Click Login   │                      │
     │─────────────────►│                      │
     │                  │                      │
     │                  │ 2. Redirect to Google │
     │◄─────────────────│                      │
     │                  │                      │
     │ 3. Login on Google page                 │
     │────────────────────────────────────────►│
     │                  │                      │
     │ 4. Grant permission (consent screen)    │
     │────────────────────────────────────────►│
     │                  │                      │
     │ 5. Redirect back with authorization code│
     │◄────────────────────────────────────────│
     │                  │                      │
     │ 6. Send code     │                      │
     │─────────────────►│                      │
     │                  │                      │
     │                  │ 7. Exchange code for  │
     │                  │    access token       │
     │                  │─────────────────────►│
     │                  │                      │
     │                  │ 8. Receive token +    │
     │                  │    user profile       │
     │                  │◄─────────────────────│
     │                  │                      │
     │ 9. Session created, user logged in      │
     │◄─────────────────│                      │
     │                  │                      │

Step by Step

Step	What Happens
1-2	User clicks login — your app redirects them to Google with your Client ID
3-4	User logs in on Google and grants permission to share profile data
5-6	Google redirects back to your app with an authorization code in the URL
7-8	Your server exchanges the code for an access token and user profile
9	Your app creates a session and the user is logged in

What You Need from Google

Before implementing OAuth, you need to register your app with Google:

Go to the Google Developer Console
Create a new project
Enable the Google+ API (or Google People API)
Create OAuth credentials — you will get a Client ID and Client Secret
Set the Redirect URI — where Google sends the user after login

Key Takeaways

The OAuth flow is a redirect-based handshake between your app, the user, and Google
The authorization code is exchanged server-side for an access token — this is secure
You need a Client ID and Client Secret from the Google Developer Console
The Redirect URI must match exactly what you register with Google