Implementation details on handling unauthenticated user actions

[Sekhmet]

I feel like we could use redux middleware for this, that will pass data about required permissions per action in metadata (so whether user needs to be logged in or not) and if user doesn't have required permissions we could trigger global modal with payload that we could use to handle this action later after signing in.

We could add meta.authAction = true to action to notify our middleware that this action should be handled.

Middleware could behave like this.

For authenticated user:

1. Action is dispatched.
2. Middleware checks if action requires authentication and if user is authenticated.
3. Action continues normally.

For unauthenticated user:

1. Action is dispatched.
2. Middleware checks if action requires authentication and if user is authenticated.
3. Middleware opens modal with payload based on action dispatched.
4. Modal can cancel action or redirect user to SteemConnect (with redirect URL with parameters based on action) depending on user's choice.
5. User logs in on SteemConnect and get's redirected back to Busy.
6. We retrieve action from URL.
7. Continue action execution.

We could use this to handle different action permissions requirements (instead of authenticated/unauthenticated we could have actions that require none, posting, active, master or memo permissions). If user logged in with key that has insufficient permissions to perform such action we could request upgrading access.

What do you think?

[bonustrack]

Related issues: https://github.com/busyorg/busy/issues/315 https://github.com/busyorg/busy/issues/469

[jm90m]

I like this idea of adding it in the middleware, but I went through the entire codebase and checked where a user would need to perform an action that requires authentication. There are only a few places that would require a user authentication, I think adding a middleware overcomplicates things in our stores, when we already passing in steemAPI and steemConnectAPI into the middlewares.

I guess its all personal preference but I added a login modal here to all components that require it -https://github.com/busyorg/busy/pull/1227

And since we use React V16 and up, we can return multiple elements in a component without wrapping them (https://pawelgrzybek.com/return-multiple-elements-from-a-component-with-react-16/)

Like see how I did it here for the FollowButton in the PR - https://github.com/busyorg/busy/blob/05944c75af66de3deec46ec46054adbc53d2ae55/src/client/widgets/FollowButton.js#L92