Passwordless Authentication in React Native Using Facebook Account Kit (Part 3)

Consuming secure resources from React Native

In this article we will integrate the basic example that we began in Part 1 with the services that we created in Part 2 of this series.

You can find the complete code for this example on the Github repository. You can also see the code we wrote for Part 1.

Introduction

If you followed the previous steps correctly, you’re almost done. We’re left with making a few modifications on the code we wrote initially in order to register a user on our database and identify him/her upon request.

Integrating the services in our example app

In our React Native application we will implement the following changes:

1. Assign the value http://localhost:3000 to the constant API_URL, where our server will be listening. On Android replace the localhost by your local IP address.
2. Configure the initial state of our application, with the fields jwt andmeset to null.
3. Create a method getJWT to request a JWT from the server based on the code that we obtained from Account Kit, using the fetch method for the request and storing the result in thejwt field.
4. Modify the render of the component to display the JWT we obtained, hide the Login button and enable the Get Profile and Exit buttons when the value of the jwt has been assigned.
5. Create a method handleGetMePress to retrieve a user profile by sending the JWT we previously obtained as a request header. The result will be stored on the state as me.
6. And finally, modify the render method in order to display the phone number we received on the previous step.

The resulting code will be:

Done! You should be able to run the example and see the following result on your app:

Authentication flow and profile request

If you liked this series of posts don’t hesitate to comment and share. If you have doubts or ran into trouble on any of the steps, please comment below, we are glad to provide help to any member of the global React Native community.

Passwordless Authentication Using Facebook Account Kit

• Part 1: Integrating React Native Facebook Account Kit
• Part 2: Accessing secure resources with JSON Web Tokens

If you’re looking for React Native experts, don’t hesitate to contact us! Write to us from our web or send us an e-mail at newbiz@underscope.io.