user session

[aquino-luane]

What is this PR about

Consumes user information like username from mock api and stores result in redux store. The new username is shown in the top right menu:

How to setup the mock API

We are using Mockoon for API mock
Here is the file you need to set the mock API:

Link to drive: https://drive.google.com/drive/folders/1ASWqP-JZXjmFqD_akaFnZ5IdqY4hKGRQ

To import the route to Mockoon, you copy the contents of the json file, then in Mockoon you select from the menu Routes>Add routes from clipboard
https://mockoon.com/docs/latest/mockoon-data-files/environment-clipboard-copy/#create-a-new-route-from-clipboards-data

[hissy]

Thank you. This PR helps me think about how we can treat user sessions.
Let's choose JWT to get the user name.

I've updated scratch-api.json and added token endpoint.

https://drive.google.com/file/d/1MXE6VUL1b22RWAef1OG6t3UwbIchOA62/view?usp=drive_link

It returns a token. You can decode it by using jwt-decode library.
https://www.npmjs.com/package/jwt-decode

Please store token itself also. We'll use it for every other API routes to authenticate.

[hissy]

@aquino-luane Thank you, it looks fine to me. What happens if the API doesn't return a token? If there's no valid user session, the API will return a 401 response.

[aquino-luane]

@aquino-luane Thank you, it looks fine to me. What happens if the API doesn't return a token? If there's no valid user session, the API will return a 401 response.

Hi @hissy I will check what happens now, but do you already know what is the expected behavior? should I retry or just make another request to the token API to get a new token?

Are there other cases when there will be interaction with token API? I can see these two:

1. login
   After the user enter username and password, and if is everything ok, then shows the Scratch app. The frontend make request to token API and keep it in store to use in other requests like autosave.

The only error I can see is server error like 500. In this case I think we should discuss the design part of what to show to user

2. Autosave
   User make changes to project then the frontend makes an API request to the autosave API with project files and token in the payload. 
If token is invalid, then we make another request to get a new token. Then we try again the request to autosave API.

But if token is not returned then I think we also should discuss what to show to user. Maybe show a message in the menu bar:

[hissy]

@aquino-luane

Currently, we're working on POC. I just want to know if you can show an error when the API can't return the token now.

I asked @biplobice to create a document detailing the backend APIs. After he completes it, we'll be able to discuss more specific cases.
https://www.notion.so/Write-Design-Doc-for-Concrete-Package-125e6be67ce580209ca5c31fd3b96b59?pvs=4

[aquino-luane]

@hissy I committed code changes to show an error (see image below) when token is not returned, could you check please?

[aquino-luane]

I will add code to do the refresh part, so I will be editing this PR. Will request your code review again when it is done 🙇‍♀️
@hissy @biplobice