Granting privileges to add events in Microsoft Outlook

Question

So I have a React app where I want to ask a user to grant access to their calendar for my app. I did that using Authorisation Code with PKCE flow:

• User clicks a button to allow access to calendar
• User goes to https://login.microsoftonline.com/common/oauth2/v2.0/authorize with params (including the encrypted verification code for PKCE is being passed in)
• User is redirected to Microsoft website to grant privileges for Calendars.ReadWrite and offline_access
• My backend is being triggered by Microsoft website with a code from Authorisation Code flow
• My backend triggers https://login.microsoftonline.com/common/oauth2/v2.0/token to get the access_token and refresh_token (with the unencrypted verification token for PKCE)
• Backend stores refresh_token in a database and uses access_token to add an event to user's calendar
• If I want to add an event to user's calendar a few days later, I use refresh_token to get a new access_token without prompting the user again with Microsoft login screen

I have three questions here:

1. Does this flow actually make sense for such application? Is it done correctly?
2. What is the best and most secure way to store the refresh_token in the backend?
3. I do these things with regular HTTP requests. Would it make sense to use msal React and JavaScript packages to somehow make it easier?

Answer 1

1. Yes, this is a fairly standard approach.
2. The question is much too broad and opinion-based to be answered with any precision.
3. Yes, you should use MSAL. In general avoid reimplementing security protocols as much as possible, and instead rely on reputable, actively supported libraries.