DEV Community

Mark Kop
Mark Kop

Posted on

Fullstacking: Users + Login/Register

Before adding Users I tried to implement GraphQL's Subscription, but ended up running into a lot of trouble and decided to worry about this later as I should be launching the MVP as soons as possible. For this reason, this part of the tutorial will be a little clumsy, sorry about that.

Our goal now is to add User's Login and Register.
We shall start by duplicating all our Event's files and adjust them to Users as the idea behind it's exactly the same.

User Files (server)

No big mystery here, just copy and paste your EventType and EventModel file and change everything from Event to User.

Also, change the EventType author from String to User as follows

While we're at the server side, we can also create UserLoginWithMutation.js and UserRegisterWithMutation.js

Don't forget to add these new queries and mutations to our GraphQL Types and updating its Schema (yarn update-schema)

Make sure to split User and Event files in separated folders so the project keeps organized.

User files (app)

In the app's folder you will mimic the strategy.

Password and JWT

To encrypt and decrypt the password we'll be using bcryptjs lib and for JWT jsonwebtoken lib.
Check this commit to see how implement these few lines.

Navigation and Authentication

For navigation, we'll use react-navigation with a temporary navigator called createMaterialTopTabNavigator. It's pretty similar to react-router and the authentication stack can be implemented this way.

We'll also need to get the JWT returned from the server to make sure our user can perform requests.

Author field

We want to display the event's author name without manually inserting it. I still haven't find the correct way to do it, but managed to implement this workaround:

We'll change this any time soon

Top comments (0)