I am building an online editor with React and NextJS. I want to add some extra functionality to make a connection with a third party (Strava). By adding this feature, the users should be able to see his activities.
The connection with the 3rd party works as follow:
- User clicks a button to open a link of Strava. Its a prompt to ask the user permission.
- After the user gave permission, Strava redirects back to the editor with a Search parameter like this: www.example.com?code=abcdefg
- The code should get this authentication code, call another api of strava with it to get an access and refresh token
- The application should store the access and refresh token in a way that it can be read (and set) in other components.
Since I am still a beginner in React/NextJs, I have troubles with step 3 and 4.
My question: What should be the best way to get this authentication code and save the access/refresh token?
I have seen some possibilities with Middleware or useContext, but I do not know what a are the (dis)advantages of these methods. Maybe there is a another/better way to do it?
Could you give some advice/pointers?