Fullstack login and logout

Let's implement login with use of the GraphQL and Scaphold's schema.


1) First of all we need to implement our graphQL authorization request. There is exist an src/utils/api.js file with our requests. So here is our method:
graphql apollo tutorial


2) And change loginAsync method (use graphLogin instead). After success request we write token, name and id into localstorage. After close app and open again app will know user and you don't should authorizate again:
graphql apollo tutorial


3) Prepare our authorization after page reload - checkIflAlreadyLogin and logout clearStorageAndLogout methods:
graphql apollo tutorial


4) Upgrade login/logout action handler and store:
graphql apollo tutorial


5) Add a middleware which includes a header for each request to scaphold's server:
graphql apollo tutorial


6) Attach logout and checking method and logout component to our src/layouts/CoreLayout/CoreLayout.js (see component implementation below):
graphql apollo tutorial


7) Add new Logout component to Header and send him :
graphql apollo tutorial


8) Logout component src/components/Header/LogoutJSX.js:
graphql apollo tutorial

TODO: Describe what to do on the scaphold for login logout flow (create users/ allow authorizate permissions etc.)


The commit from the above sub-chapter:
https://github.com/ReactPoland/reactjs-redux-tutorial/commit/graph-chapter-7

Registration functionality

We will implement simple registration mechanism

TODO coding

Securing the DashboardItems on the backend

Currently, any user of our app can create the same list of dashboardItems. We will implement the security feature on the backend so the behaviour of our application is as following:

  • 1) We will secure on the backend, that each user will have his own DashboardItemListOrder
  • 2) After each user has his own DashboardItemListOrder, we will make sure that the list does exists (so we will make a mechanism to create it, in case if it doesn't exist)
  • 3) After we are done, with the order class from the ScapHold. Then we will make sure that only authenticated users who has created it's own DashboardItem can fetch them from the backend. This will make sure, that for example an User1 doesn't have access to the User2's dashboardItems.
  • 4) We will try to hack the mechanism, so you will learn that you will get the Permissions error while trying to fetch not your own (logged user) dashboard items.

TODO coding

React Poland 2017