JavaScript Everywhere

Chapter 24. Mobile Application Authentication

If you’ve ever stayed with a relative, vacationed at a rental property, or rented a furnished apartment, you know what it’s like to be surrounded by things that aren’t yours. It can be hard to feel settled in these types of environments, not wanting to leave something out of place or make a mess. When I’m in these situations, no matter how kind or accommodating the host is, this lack of ownership leaves me on edge. What can I say? I’m just not comfortable unless I can put a glass down without a coaster.

Without the ability to customize or read user-specific data, our app might fill users with the same sense of discomfort. Their notes are simply mixed in with those of everyone else, not making the application truly their own. In this chapter we’ll add authentication to our application. To accomplish this, we’ll introduce an authentication routing flow, store token data using Expo’s SecureStore, create text forms in React Native, and perform authentication GraphQL mutations.

Authentication Routing Flow

Let’s begin by creating our authentication flow. When a user first accesses our application, we’ll present them with a sign-in screen. When the user signs in, we’ll store a token on the device, allowing them to bypass the sign-in screen on future application uses. We’ll also add a settings screen, where a user can click a button to log out of the application and remove the token from their device.

To accomplish this, we’ll be adding several ...