How do I log into medium?

How do I log into medium?
1) Have my browser invoke the url https://medium.com/ (GET)
User experience:User sees the basic medium page.
2) 
User action:Click on the signin link 
https://medium.com/m/signin?redirect=https%3A%2F%2Fmedium.com%2F(GET)
User experience:User is presented the options for signing in(Twitter,Google,Facebook)
3) 
User action:Click on sign in with google
User experience:Users sees the standard google sign in page that is shown on logging into gmail.

This is the format of the URL.
https://accounts.google.com/ServiceLogin
?passive=1209600
&continue=https://accounts.google.com/o/oauth2/v2/auth
 ?client_id%3D216296035834-k1k6qe060s2tp2a2jam4ljdcms00sttg.apps.googleusercontent.com%26redirect_uri
 %3Dhttps://medium.com/m/callback/google%26response_type
 %3Did_token%2Btoken%26access_type
 %3Donline%26scope
 %3Demail%2Bopenid%2Bprofile%26nonce%3Dfwg0no0dvia%26state%3Dfwg0no0dvia
 %257Chttps://medium.com/?source%253Dnav_signup%257Clogin%26from_login%3D1%26as%3D5397bced1f475788&oauth=1&sarp=1&scc=1#identifier

The following is the standard gmail url
https://accounts.google.com/ServiceLogin?service=mail&passive=true&rm=false
&continue=https://mail.google.com/mail/&ss=1&scc=1&ltmpl=default&ltmplcache=2&emr=1&osid=1#identifier

Note how the url for google signin from medium is way more elaborate than the mail url even while the user experience is the same with 
 regards to what he sees.Specifically,note the redirect_url pointing to medium.
%3Dhttps://medium.com/m/callback/google%26response_type

Also,note the reference to oauth in the URL
&oauth=1
Medium is telling Google that once you sign Cinish in,please invoke Medium so that Medium can present Medium pages to the user.

4) So the user is now at the Google sign in page.
User action:Signs in with google credentials.
User experience:He is inside the Medium webpage with access to medium posts.He is granted access into the application.
The URL that briefly shows up in the browser is as below.
https://medium.com/#state=bs7zh8qmq4xw%7Chttps://medium.com/?source%253Dnav_signup%7Clogin
&access_token=ya29.CjHQAw1iiftPW85VWphczX5tFJVw5VF8NMYIc4rpfJevfEblIBsnWvODAhtz1t8NY532
&token_type=Bearer
&expires_in=3600&
id_token=eyJhbGciOiJSUzI1NiIsImtpZCI6ImRmOGJlZmExYzdlYWYzMTE0YTE1NjFhZjc1MDUxN2ZlYWU3NTRhYTkifQ.eyJpc3MiOiJodHRwczovL2FjY291bnRzLmdvb2dsZS5jb20iLCJpYXQiOjE0ODQxMjc2MTAsImV4cCI6MTQ4NDEzMTIxMCwiYXRfaGFzaCI6IjVnaGVTc3BEYmhqcjhELTdQLUx0T3ciLCJhdWQiOiIyMTYyOTYwMzU4MzQtazFrNnFlMDYwczJ0cDJhMmphbTRsamRjbXMwMHN0dGcuYXBwcy5nb29nbGV1c2VyY29udGVudC5jb20iLCJzdWIiOiIxMDcyMDEzMTA1NzM4NDgzNDMxNTAiLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiYXpwIjoiMjE2Mjk2MDM1ODM0LWsxazZxZTA2MHMydHAyYTJqYW00bGpkY21zMDBzdHRnLmFwcHMuZ29vZ2xldXNlcmNvbnRlbnQuY29tIiwibm9uY2UiOiJiczd6aDhxbXE0eHciLCJlbWFpbCI6ImNpbmlzaEBnbWFpbC5jb20iLCJuYW1lIjoiQ2luaXNoIE5hcmF5YW5hbiIsInBpY3R1cmUiOiJodHRwczovL2xoNS5nb29nbGV1c2VyY29udGVudC5jb20vLVBpN0JUZ3V6d0VBL0FBQUFBQUFBQUFJL0FBQUFBQUFBR1pRL3pJWVA4Vkw1anlBL3M5Ni1jL3Bob3RvLmpwZyIsImdpdmVuX25hbWUiOiJDaW5pc2giLCJmYW1pbHlfbmFtZSI6Ik5hcmF5YW5hbiIsImxvY2FsZSI6ImVuLUdCIn0.cQrlUPpbw4xcgHBieKRu6SGOTYWJvaoxVP4X0PqthLqAmonYqfj7THnoAkOC0jEsZXADXPY6GZDIu1F6akagtLyhQdpnHH232mgFHMj6vej1fqILeWBINQNSQ6y2pDMSpQGWfnhY1WJoe2iX4KynqdIvPv38RJt6TVZUV_f0K2_tscdqUi84WdcKMpPdFYNDPKNHmCu-VWHBqLX1S1ceFLQuAa_s0YcnQ02gLU0vIHc1rLP85fGVzMFvt4dC6r0A68GZUAwakKECE-7nUs-F8-vfY93Jnexcd0ILKUDiYVO26y_IbhtZHb8Lp5cD7clPACa5M84gJGsD5sn2A6gIQA
&authuser=0
&session_state=432fbae29d1a21085153bb4bfcd489aa354e9cd4..5f79&prompt=none

Note the access_token and id_token parameters in the URL generated.
&access_token=ya29.CjHQAw1iiftPW85VWphczX5tFJVw5VF8NMYIc4rpfJevfEblIBsnWvODAhtz1t8NY532
id_token=eyJhbGciOiJSUzI1NiIsImtpZCI6ImRmOGJlZmExYzdlYWYzMTE0YTE1NjFhZjc1MDUxN2ZlYWU3NTRhYTkifQ.eyJpc3MiOiJodHRwczovL2FjY291bnRzLmdvb2dsZS5jb20iLCJpYXQiOjE0ODQxMjc2MTAsImV4cCI6MTQ4NDEzMTIxMCwiYXRfaGFzaCI6IjVnaGVTc3BEYmhqcjhELTdQLUx0T3ciLCJhdWQiOiIyMTYyOTYwMzU4MzQtazFrNnFlMDYwczJ0cDJhMmphbTRsamRjbXMwMHN0dGcuYXBwcy5nb29nbGV1c2VyY29udGVudC5jb20iLCJzdWIiOiIxMDcyMDEzMTA1NzM4NDgzNDMxNTAiLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiYXpwIjoiMjE2Mjk2MDM1ODM0LWsxazZxZTA2MHMydHAyYTJqYW00bGpkY21zMDBzdHRnLmFwcHMuZ29vZ2xldXNlcmNvbnRlbnQuY29tIiwibm9uY2UiOiJiczd6aDhxbXE0eHciLCJlbWFpbCI6ImNpbmlzaEBnbWFpbC5jb20iLCJuYW1lIjoiQ2luaXNoIE5hcmF5YW5hbiIsInBpY3R1cmUiOiJodHRwczovL2xoNS5nb29nbGV1c2VyY29udGVudC5jb20vLVBpN0JUZ3V6d0VBL0FBQUFBQUFBQUFJL0FBQUFBQUFBR1pRL3pJWVA4Vkw1anlBL3M5Ni1jL3Bob3RvLmpwZyIsImdpdmVuX25hbWUiOiJDaW5pc2giLCJmYW1pbHlfbmFtZSI6Ik5hcmF5YW5hbiIsImxvY2FsZSI6ImVuLUdCIn0.cQrlUPpbw4xcgHBieKRu6SGOTYWJvaoxVP4X0PqthLqAmonYqfj7THnoAkOC0jEsZXADXPY6GZDIu1F6akagtLyhQdpnHH232mgFHMj6vej1fqILeWBINQNSQ6y2pDMSpQGWfnhY1WJoe2iX4KynqdIvPv38RJt6TVZU

So,Google generated the access_token and id_token and sent those to Medium.

Now,when I publish this post on medium,my browser sends the token to Medium.Google had sent this token to Medium earlier.So Medium recognizes the token and allows the user action of publishing the post.

Client browser,Medium application and Google application are the three parties here.Clearly,the browser has no say in the intelligence of the OAuth mechanism.The intelligence of the mechanism is shared between Medium and Google.
Medium Smarts:
1) When Medium invokes Google for signin,Medium sends the redirect information back to Medium to Google so that Google knows that after authentication,the page to be presented is the Medium page.
Google Smarts:
2) Google executes on Medium’s instructions and following authentication,redirects the user to the Medium page.
3) Google generates the OAuth related tokens and sends those to Medium.
Medium Smarts:
4) Medium learns the tokens and uses the learning to validate further requests from the user as these tokens are sent across in the header for all requests from the Browser.

Browser plays a part in that it does send the OAuth tokens with every request to Medium but that was because Google set that on it’s header during authentication.Subsequent requests would continue to use the same header.That is how I understand this as clearly,the client can have no active role in this mechanism.

Like what you read? Give Learn a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.