How to use JWT authorization in React Native app with GraphQL

An introduction to JWT and how to implement JWT authorization in React Native app with GraphQL.

NEXL messenger app login

What is JWT

JWT (JSON web token) is a secure way to exchange information between two parties, which is often used in authorization. A typical scenario is, when a user log in to an App with their username and password, the server returns a JWT, and the user can hold on to the token. The next time they want to access something from the server, they simply include the token in the header of their request, and the server will know they are a logged in user. Here is a video if you want to know how it work in details.

JWT in React Native

The concept of authorization in a react native app is simple, a user lands on the app and log in with their username and password, we send the credentials to the server in a HTTP request and the server returns a JWT, then we store the JWT in AsyncStorage (similar to cache in web apps). And the user interacts with our app, we simply grab the token and add it in the header of each request so the server knows this is a logged in user without the user providing credentials each time until the JWT expires.

How… exactly?

The context

At NEXL, we are currently building a native messenger app (front-end only) which will work with existing back-end and GraphQL APIs. So the first challenge is to sort out the authentication and set up and enable GraphQL queries.

Authentication

There are a few things we want to achieve in our app:

• Log in with user name and password
• User should be able to do stuff when logged in
• Keep user logged in if possible
• Log out

And we want to be able to log in/log out/access token easily from anywhere so we will keep all the auth stuff in a context. The context exposes state isLoggedIn, login and logout function, JWT token and user email logged in to the consumer so we can access login() in <Login /> and logout() in <Account /> easily while having a central place for all the auth functionalities.

To consume auth context, we can simply do this in any component that’s wrapped inside <AuthProvider />.

const { login, email, logout, ...props } = useAuthContext();

Setting up GraphQL with JWT token

To allow GraphQL queries in our app, we need to include the JWT token in the header of GraphQL client (we use Apollo client). We have Apollo Client as a context for easy access as well. And we need to have ApolloClientContext inside AuthContext because Apollo client consumes the token from AuthContext.

How they all work together

In root App.tsx, we have AuthProvider wrapped around ApolloClientProvider then all the view components like below. And state isLoggedIn determines if auth app (login / sign up stuff) or main app (actual functions of the app) will be rendered.

<AuthProvider>
          <ApolloClientProvider>
            <ApolloClientConsumer>
              {({ messenger }) => (
                <ApolloProvider client={messenger}>
                  <AuthConsumer>
                    {({ isLoggedIn }) => (
                      {isLoggedIn ? (
                        <Home />
                        ) : (
                        <Login />
                       )}
                    )}
                  </AuthConsumer>
                </ApolloProvider>
              )}
            </ApolloClientConsumer>
          </ApolloClientProvider>
        </AuthProvider>

That’s it. Hope this helps with your project =) And leave me a message if you have any questions.