DEV Community

Cover image for Dancing with OAuth: a step by step guide

Dancing with OAuth: a step by step guide

anabella on July 04, 2018

Dancing with OAuth: a step by step lesson Most of the times I try to learn something new and put it into practice, I quickly start to fe...
Collapse
 
codemouse92 profile image
Jason C. McDonald

tangOAuth sounds like a stellar name for a library or API. Just sayin'.

Collapse
 
thebouv profile image
Anthony Bouvier

I'd like to see this same simple explanation of OAuth when it is app-to-app. There's not a ton of difference really, but go trying to search for a simple explanation on doing OAuth when there is no "user" there for initiating and accepting steps. I've always wanted a great way to help new devs with that -- because they always get hung up on all tutorials focusing on user instead of app-to-app.

Collapse
 
anabella profile image
anabella

Hi Anthony!

I'm a newbie myself, so I've never heard about app-to-app OAuth flows and I can't really think of how it could work.

Could you provide a simple example or use case for something like that?

Thank you in advance! :)

Collapse
 
thebouv profile image
Anthony Bouvier

Funny, I've almost never had the need to build out a user-initiated OAuth flow. :)

The way I'd normally use app-to-app is having some server side code that needs to talk to an API like pulling down tweets from Twitter, inventory from some ecommerce API, etc. Your app has to be able to work through OAuth without the user accepting anything -- there is no user to click the button!

In the OAuth2 spec the grant type of client_credentials is what does this.

Seems simple, but a wonderful walkthrough like what you made for user auth is something I've always wanted to be able to hand off to my team when this sort of thing comes up. Often the docs for APIs we talk to just never go over client_credential flow instead of user auth flow (LOTS of them lack this documentation); so a junior member might get stuck trying to figure it out for quite a while.

It's not complicated -- if anything it is simpler than user auth. But once you get into expiring keys, re-authing, etc it could get interesting.

I really enjoyed your article. Hope to see more from you! :)

Collapse
 
antonfrattaroli profile image
Anton Frattaroli

An issue I've come across working with people who aren't experts is educating about why tokens need to be short-lived, why we need to use refresh tokens, and that they need to modify their processes for locking down/terminating user accounts because authentication and authorization is now decoupled.

Collapse
 
anabella profile image
anabella

Hi Anton! I am definitely not an expert and would love if you could expand a bit on short lived tokens and the need for terminating accounts.

Thank you for reading!

Collapse
 
antonfrattaroli profile image
Collapse
 
peteerbruno profile image
Sticky Fingers • Edited

Great article!
I have a question: How does this "dance" differ when the user is logging to THNA via the third party site (having previously signed up via that same site)
Does THNA store the oAuth token?

Collapse
 
anabella profile image
anabella

Thank you!

So, I'm not really an expert about this subject. I just wrote this based on my process of understanding how this flow works, and kept more complex things like this (or like the extra state string parameter) out of it for the sake of simplicity.

It is an interesting question, and from what I've been reading and seeing, after the first time the user logs into THNA using their Typeform account, THNA will create a profile for them and give them a cookie to know if they're authenticated in THNA. This cookie can there store an encrypted version of all the information THNA needs. So if THNA detects that cookie they know they don't need to make you authenticate again. In the case of my test oauth integration app with PassportJS, the decoded cookie looks like this ibb.co/jRbUhJ . In some implementations these auth tokens have an expiration period, so if they try to use it, Typeform will ask THNA to use a refreshToken to create a new one. I haven't explored this further, but just know it exists.

But what if I logout of THNA? then I'll have to "Log in with Typeform" again. So, actually, before THNA created a user for me on their site, they checked if they already knew me. They did this by storing some information from the provider, like my Typeform account ID (if it I consented to show them my profile). And this time, they do know me! So when THNA does the dance again, they'll recognise me, and won't create a new account, but instead show me my THNA profile using the new token they got from Typeform (remember I lost the cookie when I logged out of THNA). And since the scopes and the client (application) ID are the same, Typeform won't prompt me for consent and just provide a new one. Now THNA will create a new cookie with all the information so I can remain logged in again.

I hope this clears it up a little bit for you. If you have doubts I strongly recommend The Net Ninja's tutorial on OAuth and PassportJS. It was a turning point in my understanding of all this.

Thank you again for reading!

Collapse
 
peteerbruno profile image
Sticky Fingers • Edited

Great, thanks! I'll check that playlist
Please keep writing posts!

Collapse
 
ahmedmusallam profile image
Ahmed Musallam

This is awesome! Thank you for the simple explanation!! I understood OAuth before, sort of, but this put it in a simple context and made it a lot easier to understand and explain to others! Great post!

Collapse
 
anabella profile image
anabella

Thank you! :D

There's definitely more depth to it, but I thought this is all you need to know to really understand what's going on. There might be a sequel with an in-depth dive someday ;)

Collapse
 
chkrishnatej profile image
Krishna Tej Ch

Informative post to get started on OAuth. And curious about how you created note drawings.

Collapse
 
jochemstoel profile image
Jochem Stoel

I was too. It seems she actually drew them.

Collapse
 
anabella profile image
anabella

Hi! Thank you for reading! I did actually draw them with colored pens and paper. It really helps me to organize information and specially flows or multi step processes. Though doing it digitally (in illustrator for example) would be a possibility I just don't finde the same connection between my understanding and the process of building the diagram. It's the same for less draw, more texty notes for me. There's a much stronger cognitive connection with something I wrote by hand, than with something I typed or clicked into existence. Hope you liked them! :)

Thread Thread
 
rajeshr2 profile image
Rajesh Ravella

Good efforts and useful tips for the rest

Collapse
 
matt123miller profile image
Matt Miller

I've recently been learning the OAuth journey for a few platforms and this helped solidify everything I've learned :)

Collapse
 
anabella profile image
anabella

Wow that's awesome! This was the result of me trying to figure out the OAuth flow in my company. If you want to implement something using OAuth and Node I can recommend the PassportJS tutorial by The Net Ninja, which was perfect for me as a starting point. Happy integrating!!! :D

Collapse
 
matt123miller profile image
Matt Miller

We're adding oauth sign in to our Laravel app and performing actions on behalf of those users. But I've used PassportJS and it's great!

Collapse
 
jochemstoel profile image
Jochem Stoel

Thanks!

Collapse
 
axd7832 profile image
Andrew Diana

Great Read! This is a great start for someone who is looking to implement OAuth in their application. Keep up the great work!

Collapse
 
tucq88 profile image
Tu Chu

The graph describes how OAuth works between THNA and Typeform is amazing!! It's the best explaination about OAuth I've ever seen. Keep it up!!!

Collapse
 
yogesnsamy profile image
Yogeswari Narayasamy

You're a great teacher! Thank you for sharing. I especially like your hand drawn illustrations! :)

Collapse
 
anabella profile image
anabella

Yayy thank you 💕

Collapse
 
pranav93 profile image
Pranav

Pretty awesome and easy to understand post. :D

Collapse
 
anabella profile image
anabella

Wow! Thank you! :D