GraphQL Authentication with React Native & Apollo [Part 2/2]

GraphQL authentication with React Native & Apollo  #GraphQL #ReactNative #Apollo

  • We’ll use gql to write our graphql query and the graphql higher order component to tap into the Apollo client.We know that our mutation looks something like this (from working with it directly in Launchpad in part 1).
  • Now we need to to be able to pass variables from our user to the mutation.Finally, we want to make this mutation available to the Register component via this.props so that the component agnostic from the Apollo bindings.Now to use it we’ll go to the end of our handleSubmit function…
  • Click “Log Out”, refresh the app, and you’ll see it no longer brings you to profile.Login with Email and PasswordLogging in with email and password is just like sign up, we’re just calling a different mutation.
  • I’ll let the code do the talking.Now to call the login function available on this.props, save the JWT and change screens (on success) or show an error.Showing User InformationThe final thing we’ll do, to demonstrate that things are actually working and it’s not just a big facade, is show the…
  • The server is expecting the JWT to be coming in the authorization header and uses that to find the current user.To pass this token along with the request we’ll use setContext from the apollo-link-context which is another apollo link we’ll use.

This is the second and final part of a series where I cover how to setup authentication with React Native, GraphQL, and MongoDB. Below is part 1 where we setup the server. In this part we’ll be…

Now let’s configure the ApolloClient (note that these instructions are for Apollo v2).We’ll be using a handful of packages throughout this tutorial. When you import than Snack will automatically install them (if you’re not using Snack then you need to install them from NPM).To setup the Apollo client we can useapollo-client-preset. At the top of your app.js file add import { ApolloClient, HttpLink, InMemoryCache } from ‘apollo-client-preset’;Then create a new ApolloClient instance that points at the GraphQL endpoint.To make this available to our app we need to use ApolloProvider, pass it the new client, and wrap our app with it.We should be connected to the backend! Now to interact with it.Registering UsersIf you take a look in Register.js you’ll see that I’ve got some simple logic in place to capture input values, check them, etc. The basics. Now, when a user presses submit, we want to:Attempt to log them in via the signup mutationIf successful, save the jwt to AsyncStorageSwitch the view the user seesTo accomplish #1 we need to make the Register component aware of the mutation. We’ll use gql to write our graphql query and the graphql higher order component to tap into the Apollo client.We know that our mutation looks something like this (from working with it directly in Launchpad in part 1).Now we need to to be able to pass variables from our user to the mutation.Finally, we want to make this mutation available to the Register component via this.props so that the component agnostic from…

GraphQL Authentication with React Native & Apollo [Part 2/2]