Thread by @realDevHiz

Many of us have certainly come across the OAuth2 framework or using it without knowing it.

For example, when we visit Canva, we can sign in with our google account, in this case, google acts as an OAuth provider.

👇 Thread

OAuth2 provides a way to access web apps with limited access to the user's account. it grants this access without sharing the password.

it functions with 3 entities that commonly use HTTP requests to communicate.
Client App - Canva
Resource owner - User
OAuth Provider - Google

As a first step, we access the Canva website, and it provides us with these two methods of logging in. at this point we are still in Canva's website, it will redirect to the google OAuth server once we click the sign in and it will be our next step.

Once we click the google sign-in, the Client Id will be sent to the google OAuth server, and the following page will be provided asking for the user's consent.

Here, google ask for consent to use the provided accounts.

Once we select an account, it will be redirected to the Canva's website, along with the authorization code.

The HTTP interaction will be between Canva's Server and Google Oauth server. We won't be able to see(in Browser) HTTP requests from the OAuth server. Canva's server will request an access token from the OAuth Server along with the authorization code and other parameters.

An access token will be provided to Canva's server and now it can be used to communicate with the google OAuth server and Canva's website.

In this phase we are almost done with authorization, a HTTP request with a bearer token is made by Canva's server to get the google user's full name and email.

Canva's server receives, the HTTP response by google OAuth2 with user information and it will be used in Canva.

I hope this is helpful, please follow, comment, and like.
Thank you

#DotNet #OAuth #javascript #100DaysOfCode