Building auth modals with React Native and AWS Amplify
Of all the powerful features AWS Amplify puts at your fingertips, Auth is probably my favorite. There’s nothing quite as satisfying as adding production-ready authentication to an app in just a matter of minutes.
Depending on your needs, you may be able to wrap your app in the Authenticator HOC, use the built-in Amplify components, and call it a day. But what if you don’t want your entire app to be behind a login? What if you want to require your users to log in to access certain features, but still let them use the app without authenticating?
In this guide, I’ll show you how to implement authentication modals that encourage users to sign in or sign up while still letting them use the app without signing in. I’m going to assume that you’re at least familiar with setting up an AWS Amplify project with React Native and installing Amplify libraries. Familiarity with the Auth library and its default components will be helpful, but not required.
I’ve used components from the UI Kitten library here to speed development and give the app a more polished look.
This is what the app looks like:
When the app first loads, and the user is not signed in, then they’ll be presented with a sign in modal. From there they have the option to visit a separate signup screen or to dismiss the modal. If they are already signed in, they’ll go straight to the content screen.
This is a common pattern with “freemium” apps that give the user access to limited features without signing in. Let’s see the code behind it.
Our main component — App.tsx
Here is the source code for our main App.tsx component:
This component is pretty straightforward. The most interesting thing is probably the onStateChange prop of our Authenticator component. It lets us react to user authentication events like signIn. This is what we do in our useEffect hook to decide when to automatically open the sign in modal.
The auth state might seem a little confusing at first signIn means the user is actually signed out. When the user is signed in, the value is signedIn . In this app, these values let us know which content we should render — the premium version or the free version.
The Sign In modal
As for the modals themselves, let’s have a look at SignInModal
The most significant part of this component is our authSignIn function, which is responsible for calling Auth.signIn from the Amplify library and authenticating our user. If the user is successful, we hide the modal and our Authenticator ‘s onStateChange handler will be called with the new auth state — namely signedIn . We catch any errors and display them in a UI Card .
The other modals
The other two modals, SignUpModal and ConfirmSignupModal are very similar to SignInModal . They pass the user-submitted information to AWS via the Auth module. Here are links to Gists with their code:
Conclusion
I hope this post has demonstrated the flexibility we have with Amplify’s Authenticator component for React Native, beyond just using the default HOC and built-in components, and I hope it inspires you to build your own auth modals or similar auth flows!
Questions, comments, and corrections are welcome on Twitter @useRNRocket. Be sure to follow React Native Rocket on Medium and Twitter and more full stack React Native guides.
