DEV Community

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...

Read full post

Jason C. McDonald • Jul 4 '18

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

Anthony Bouvier • Jul 5 '18

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.

anabella • Jul 5 '18

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! :)

Anthony Bouvier • Jul 8 '18

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! :)

Anton Frattaroli • Jul 5 '18

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.

anabella • Jul 5 '18

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!

Anton Frattaroli • Jul 5 '18

Thanks for the article :)

OAuth Tips for the Uninitiated

Anton Frattaroli

#oauth#authentication#explainlikeimfive#beginners

Sticky Fingers • Jul 5 '18 • 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?

anabella • Jul 5 '18

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!

Sticky Fingers • Jul 5 '18 • Edited

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

Ahmed Musallam • Aug 11 '18

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!

anabella • Aug 12 '18

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 ;)

Matt Miller • Jul 5 '18

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

anabella • Jul 5 '18

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

Matt Miller • Jul 6 '18

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!

Krishna Tej Ch • Jul 5 '18

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

Jochem Stoel • Jul 5 '18

I was too. It seems she actually drew them.

anabella • Jul 5 '18

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! :)