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.
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
- 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.
- 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.
Authorization Code Grant: After user confirmation, oauth provider issues an OAuth Code, and it redirects to
redirect_urispecified earlier with an auth code.
- Access Token Request: The Redirect Controller/Page, can now send this request to backend to issue you an access token using the auth code.
- Access Token Grant: Server issues the Access Token.
- Sign In OAuth Button
- 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].
- Required action on SignIn - global variable update
Obtain the Acces Token from OAuth Provider and issue custom Access Token.
- 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).
- On success, OAuth Provider sends a payload that has access token of the OAuth Provider and maybe refresh token and other things.
- 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.
- 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