Oauth2 authentication flow difference between browser web app, SPA web app, and mobile/desktop application

The basic oauth2 flow is similar between browser app, Single page app, and mobile/desktop, where user need to input username and password to get authorization code from id provider, and then using the authorization code to exchange to access token and refresh token. Finally the access token can be used to retrieve the data from resource holder. 

For all oAuth2 flow types, the username and password, and authorization code are not stored in anywhere, and they will be discarded immediately after their usage. So they do not cause any difference between different Oauth flow types.

However, client secret (obtained during oauth app registration), access token and refresh tokens (obtained during oauth authentication) are sensitive data, and need to be securely stored in somewhere. The issue is some client types (like browser) cannot securely store the confidential data as other types (like web server or native app), this difference leads to the various Oauth2 authentication types, which are specific to Web App (Client requests proxy through web server to Web API), Single Page App (client directly request to WebAPI without web server), and Mobile/Desktop native app.  

Browser Web App (using web server as proxy to WebAPI)

As browser is considered not secure for storing confidential data, so it cannot be used to store the client secret, access token and refresh token. As  a result, once the user input the username and password, and get the authorization code, the browser will redirect the url to the web server app, and the web server will use the authorization code as well as the securely stored client secret to request the access token and refresh token, once the web server gets the access token, it will request the resource using the access token, and then send the resource data back to browser client. The client secret, access token and refresh tokens are securely stored on web server, and are never exposed to browser. The diagram is shown as below

Single Page App

There is a special case for SPA (Single Page App) browser app, like angular or react web app, as SPA app directly access the WebAPI server without proxy thorough web server as middle tier, so it cannot securely store the client secret, access token and refresh token. 

First, as SPA cannot securely store the client secret on client, the best way to do is not using secret at all, which is why oAuth Implicit authentication flow should be used for SPA app.

In this case, many applications choose to store the token in memory to reduce the risk of leaking token. However, a better approach is using implicit grand in this situation, so browser only gets the access token without refresh token, this approach is described at 

https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-oauth2-implicit-grant-flow with the below diagram.

Mobile/Native App

For mobile/desktop applications, the compiled installation are not regarded as secure, so it cannot be used to store client secret, that is why client secret should not be used for mobile/native app. However, mobile app are considering secure for storing runtime confidential data, because they can protect the sensitive data by password, finger print, or other device security methods, so the native app can store the access token and refresh token on client side, and there is no need to store them on server side. The diagram is shown as below: