OAuth Flow Diagram

Good Resources to learn OAuth and Authentication:

1. https://www.udemy.com/course/oauth-2-simplified/
2. https://darutk.medium.com
3. https://www.youtube.com/watch?v=dyZmsz6usWk&list=PLP_rkG1reBjrCKy2Pb1bvjJKbKfantijk&index=4 (Learn OAuth Practical Implementation)
4. https://auth0.com/blog/create-a-simple-and-secure-node-express-app/ (Blog: Practical Implementation)
5. https://www.youtube.com/watch?v=F-sFp_AvHc8 (User Authentication using Passport.js)

Reference Diagram:

1. https://developer.orange.com/tech_guide/3-legged-oauth2-0-flow-step-by-step/

Below is generic OAuth flow diagram. OpenID connect is not in the flow, but can easily be integrated in the flow.

data enclosed in {} are placeholders, means, these needs to be replaced with the respective details.

Important Points (Key points to note)

• 1st Phase: The first phase is to communicate with authorization server endpoint to get the authorization code. (Generally implemented on application frontend).
• 2nd Phase: The application frontend then send this code to application backend. The backend sever uses the client secret and the authorization code to exchange authorization code with authorization token by communicating with authorization token endpoint.
• 3rd Phase: Once the authorization token is received, the backend server uses the authorization token to fetch data from the API (which uses OAuth for authorization), now we are authorized to get data from this API. We get the data and then send the data to frontend to display the data.

Detailed Flow Diagram

OAuth Flow