OAuth2 Authorization Code Grant

Let’s practically learn this OAuth2 Authorization Code Grant from below experiment,

I want to login into https://www.pinterest.com/ site. Unfortunately I haven’t registered before so i click on signup page. So, i get below page,

I can see a regular signup page seeking username, password. But notice that there is two more options. Continue with Facebook and continue with Google. So, this tells that instead of new registration i can login with my facebook or google access which I already have. Let me select Continue with Google option, It redirected me to a google sign in page

Oh.. what’s happening here… Instead of providing my details to Pinterest directly, i am allowing google to share my profile details with Pinterest. Ok. Let me click on confirm popup. Great. now i can login successfully into pinterest.

But how this was happened ? Here are the entire activities happened behind screen shown as below,

1. Sign in with google option.
2. Redirect to google sign in page
3. Provide sign in credentials
4. Request user to authorize Pinterest to use details from google.
5. Confirm user to authorize Pinterest to use details from google.
6. Redirect to Pinterest with auth code.
7. Forward auth code to client
8. Send auth code to google
9. Provide access token to client
10. Access profile details from google.
11. Send refresh token to client
12. Send refresh token to Google when the original token expires
13. Send new token to client

Cool. Now, whenever we click on Google/Facebook sign in page, then we can imagine of above flow which actually happens at the backend.