Part 4 — Implementing authentication and integrating with Apollo Client

Thanks for checking-in to part four of my blog series Getting Started with GraphQL and React Native. This will be the last post in this series. I’m going to be walking through how you can implement authentication with GraphQL, and integrate the sign-up and login functionality in a React Native application.

Server-Side

First of all, we need to create a User data model user in datamodel.graphql, the User type has an id, name, password and an array of dogs.

Run the following command to deploy the new schema changes:

$ prisma deploy

You should see a similar result to the following:

When we have User model now we can add a type for represents a user with token, I named it AuthPayload:

We now need to create an AuthPayload type. This represents the data payload that will be returned upon successfully signing-up or logging-in.

Remember to run prisma deploy after making a change to datamodel.graphql.

For authentication, we will use a JSON Web Token. Add the following NPM libraries:

$ yarn add jsonwebtoken bcryptjs

Now we need to create the mutations for signing-up and logging-in. I will create a new file for it, because there is quite a lot of code and it is better to keep mutations in a separate file. Add a file called Mutations.js in the src directory.

The file contains three function: do (created in the previous tutorial), login and signUp. The login and sign-up functions are resolvers for handling, you guessed it, logging-in and signing-up mutations. We’re using bcrypt to hash and compare passwords, while the jwt library is used to sign a JWT. Update the index.js file with a reference to Mutations.js:

Please note this tutorial won’t go into detail about checking the JSON Web Token on subsequent requests to the GraphQL Server. Ideally, you’ll want to verify the token and make a decision based on the validity of the token. This can be done using authentication middleware for your GraphQL Server, e.g. Passport.js

To use your custom mutations, graphql-yoga recommends Heroku, so we’ll go with that. You can find step-by-step instructions on how to do this here.

Remember to commit all of your changes because Heroku will deploy everything on the current branch.

Visit the playground after deploying to Heroku:

Playground available for Heroku

When you click Schema on the right, you should see your custom mutations listed. Okay, next let’s add authentication logic to the React Native application.

Client-Side

I’ve refactored App.js and created new files called DogsScreen.js and LoginScreen.js. The LoginScreen.js file contains form inputs and handlers for logging-in and signing-up.

App.js

The DogsScreen.js file is detailed explained in more detail here.

DogsScreen

And now, the most important part, LoginScreen.js. As you can see, I have a new instance of ApolloClient with my Heroku URL. I also added the mutations for signUp and login, which have similar arguments to their server-side equivalents. The rest is very similar to DogsScreen. I’ve added some state to demonstrate a successful sign-up and login.

If you’re not sure how we’ve set up the mutations, you can refer back to the previous tutorial here.

Here is the completed application:

Thanks everyone for the journey over this past month. I hope you’ve enjoyed reading the posts as much as I’ve enjoyed writing them. Stay tuned for our next tutorial. We are preparing something very interesting. If you like our tutorials, please check our blog for other stories. Otherwise, if you’re keen on Prisma, GraphQL or React Native, check-out some of these tutorials below:

Tutorials for Prisma, GraphQL and React Native

Part 1 - Setting up a GraphQL Server with Prisma

Part 2 - Setting up Apollo Client in a React Native app

Part 3 — Mutating data in a React Native app with Apollo client

Source Code

brains-and-beards/graphql-server

https://github.com/brains-and-beards/react-native-graphql-app

References

prisma/graphql-yoga

Cloud Application Platform | Heroku