Designing OAuth Auth Flow

This articles explores the design of an OAuth2 Auth Flow in decoupled Frontend and Backend application. Get a high level understanding of how OAuth Auth Flow works in 3 legs (Frontend, Backend and OAuth Provider), then use existing libraries or design custom experience without using any libraries. Frontend could possibly a React Application or Angular Application or any other app, Backend app could be written in NodeJS, Go or any language.

Understand the flow

1. User Authorization Request: From Client App, on a button click, open the Auth Window either in same window using window.location.assign(oauth_provider_auth_url) or in another window using window.open(oauth_provider_auth_url)
   • The oauth_provider_auth_url will generally carry the client id, scope, redirect_uri and few other parameters
   • This url can be either stored in Client Side or for security purpose this can be obtained from server.
2. User Authorises Application: The flow will now be handed to OAuth Provider (like Google, or Facebook), where user will approve application to login and grant permission for scope specified earlier.
3. Authorization Code Grant: After user confirmation, oauth provider issues an OAuth Code, and it redirects to redirect_uri specified earlier with an auth code.
4. Access Token Request: The Redirect Controller/Page, can now send this request to backend to issue you an access token using the auth code.
5. Access Token Grant: Server issues the Access Token.

Front End Concerns

1. Sign In OAuth Button
2. Redirect page in your application.
   • In Development Mode you can provide localhost:[port]/oauth-redirect-uri
   • Ngrok is alternative tool which can be used to port forward your localhost and then redirect uri can be specified [your-ngrok-site-url]/[oauth-redirect-uri].
3. Required action on SignIn - global variable update

Back End Concerns

Obtain the Acces Token from OAuth Provider and issue custom Access Token.

1. Handling the Auth Code: Backend Sends the Auth Code Sent from the Oauth Redirect Controller in Front End Application to the OAuth provider Access Token Url (with parameters like client_id, client_secret, scope, etc).
2. On success, OAuth Provider sends a payload that has access token of the OAuth Provider and maybe refresh token and other things.
3. OAuth Provider Access Token can be wrapped in your custom JWT Token so that you can use it for further request like obtaining profile information.
4. JWT Token can be sent to Client App to store in its local storage (which can be insecure). Best is to use Http Only Cookie.

PS: Check out my other article on Designing Authentication System