Implementing OAuth - design patterns

Hey ya’ll, I wanted to share our design for a simple OAuth login and user credentialing workflow to hopefully describe a pattern useful to others or to have our design labelled as an anti-pattern and to improve! Here is the login flow:

  1. Client (Dash application server) is known to the server it’s trying to authenticate and authorize by having an app_id and a client_secret from previous, unimportant setup steps.

  2. User pushes a button- they are redirected in-page to the authorization page of the server we want to authenticate with.

  3. User logs into the server-side portal and is bounced-back to their Dash app with an auth_token as a part of the URL payload. e.g. redirected to https://<dash_url>/?auth_id=

  4. App server listens for any URL updates, and if the auth_id query param is present it executes the login workflow.

  5. auth_id and client_secret are used to get a bearer_token and refresh_token from the server (OAuth standard) and all user-specific secret values are stored in browser cache.

  6. User-specific data is queried from server-side routes as needed while bearer_token is valid.

  7. Client-side callback triggers page reload to update new page parameters (search bar options) from the app server in the context of user preferences.

Here are some best-practices questions:

  1. Parsing the auth_id from the URL doesn’t seem secure, is there a better way to do this?

  2. Having the application listen for URL updates, thus ALL updates to the URL (including page switching) have at least a tiny bit of overhead. How could we minimize this?

  3. Having to reload the page entirely to change some default values is resource-intensive because the figures have to be re-rendered on the server-side needlessly. Is there a better way to do this within the Dash framework?

I know this is a long post- would appreciate any assistance or ideas!