Course Overview

What is NFC? An Introduction to NFC Tags, Cards, and Readers

Introduction

Tag Counter Game App

Set up a React Native NFC iOS and Android App

An Introduction to the React Native NFC Module Library

How to Build an iOS NFC Tag Scanner App With React Native

How to Build an Android NFC Tag Scanner App With React Native

App1 Conclusion

Tag-Counter Game App

Tap-And-Go App

How to Code an NDEF Message With the NFC Tools App

A Deep Dive Into NDEF and NdefRecord to Share Data via NFC

Tap-And-Go Project Setup With React Native and NFC Manager

How to Read NFC Tags and Write NDEF Data With NfcManager

How to Build a Website NFC Tag And Use Deep Linking With NFC

App2 Conclusion

Tap-And-Go  App

NFC Pokemon App

The User Flow of an NFC Tag Reader and Writer App

Intro to Type 2 NFC Tags: Read and Write NFC Tags With React

How to Sign and Verify NFC Data With React Native and elliptic

How to Add Memory Protection to NFC Tags For Copy Protection

App3 Conclusion

NfcPokemon  App

react

react-native

react-native-elements

react-native-nfc-manager

react-native-paper

## What we will cover in this course

First, I will provide an overview of NFC technology, so you can understand basic concepts and terms. After that, we will build three apps throughout this course.

### App 1: Tag Counter

![image](https://user-images.githubusercontent.com/10307875/148626752-38646752-bb16-4db2-8324-9fc19efdef04.png)

App 1 is a game app to count how much time a user needs to scan five NFC tags. You will learn:
- how to properly set up an NFC project 
- how to trigger NFC scanning
- the difference from iOS and Android regarding NFC feature

### App 2: Tap-and-Go

![image](https://user-images.githubusercontent.com/10307875/148627270-2dc43df8-8d5c-479d-8dd6-041b236d7009.png)

App 2 is about NFC Data Exchange Format (NDEF), which is the standard NFC data format supported by both iOS and Android. NDEF can be used for almost any NFC tag. We will build an NDEF reader-writer app, and you will learn:
- how to write specific NDEF URI into NFC tags 
- how to read NDEF URI and trigger corresponding actions, for example, opening an URL, making a phone call, or sending a message. 
- how to use deep linking with NFC tags.

### App 3: NFC Pokemon

![image](https://user-images.githubusercontent.com/10307875/148627203-562e742d-973e-406c-8e9e-a871ccdaf6d9.png)

App 3 dives into low-level NFC programming, which directly manipulates the NFC tag’s internal memory and uses proprietary NFC commands. 
The app we'll build is called "NFC Pokemon," which is a digital identity management platform. It can seal a specific Pokemon, for example, a Pikachu, into an NFC tag. 

When building this app, you will learn:
- how to use low-leve tag command to directly manipulate NFC tag's internal memory
- how to create digital signatures in React Native
- how to use proprietary password protection command for NXP NTAG 213 / 215

NFC technology is everywhere in our daily life, from transportation, access control, to payment system. However, understanding NFC is still a hard topic because of its wide technology landspace. 

So in this course, We will guide you from the simplest case like using common NDEF format, all the way to a complex digital identity management app which leverages some unique NFC features.

The newline Guide to NFCs with React Native

How to integrate NFC feature into your React Native app

How to handle the differences between Android and iOS regarding NFC feature

Understand NDEF and use it across iOS and Android

Understand low-level NFC programming and communicate with NFC tags directly

How to use asymmetric cryptography library with React Native

How to use password protection commands from NTAG 21x NFC tags

Hello! In this lesson, we will focus on how to create and verify the digital signatures to represent our NFC Pokemon.

Let's first take a look at this diagram. 

As you can see in the diagram, Alice wants to receive messages from Bob, and she wants the message to be private.

It will be easy if Alice and Bob can simply share a common key for both encryption and decryption. But that means Bob can be trusted. What can we do if this is not the case?

To handle this case, we can use asymmetric cryptography.

In the current diagram (left-hand side), Alice produces a key pair: private key and public key.

Alice keeps the private key and gives the public key to Bob or anyone who wants to send messages to her. Bob can now encrypt his message to Alice with this public key, and only Alice, who has the private key, can decrypt the message.

Besides encryption and decryption, there is another major use-case for asymmetric cryptography. Let's take a look at the diagram at the right side.

This time, Alice wants to send out a "public" message. By public, we mean that the message is not encrypted, and anyone can see and understand it. However, she wants people to be able to "verify" that this message is indeed sent by her.

So, Alice uses her private key to "sign" this message and deliver the message together with this "signature." Now, if there's anyone who wants to verify whether the message is created by Alice, they can use the public key to achieve that.

That's exactly what we'd like to do in the rest of this lesson. We want our NFC Pokemon tags to be verified by anyone, but only we, the author of this app, can create or modify any NFC Pokemon tags.

To create the signature, we will use two pieces of information. The first one is the Pokemon data encapsulated in the NFC tag. The second one is the NFC UID. Recall from previous lessons that the UID for a NFC tag is a unique hardware identifier, which is normally fixed during the NFC tag manufacturing process.

By putting the UID into our signature, we can prevent the issue of people creating fake tags by simply cloning the whole tag content. Because every NFC tag has a different UID, this kind of fraudulent tag won't pass our signature verification.

Set up our cryptography library for React Native

For the cryptography library, we'd like to use the well-known 

However, we notice one thing: this package is NOT a React Native-specific library. "What's the difference?" you might ask. Well, the NodeJS built-in APIs, such as buffer, events, process, stream, and so on, are not available on the React Native Platform by default. So, we need to fix this issue in order to use the 

, which can help us deal with this situation. As the name suggests, the 

 helps us to bring NodeJS API into our React Native world.

 is actually a dev dependency, so you should pass the 

Once the installation is complete, add the following two commands into your NPM scripts: "nodeify" and "postinstall".

 about the NodeJS API you'd like to add, so it can install them automatically for you and perform required modifications to make these APIs available on the React Native platform.

The "postinstall" command will instruct NPM to run "nodeify" automatically after NPM-install, so we don't need to run it manually every time.

---
title: How to Sign and Verify NFC Data With React Native and elliptic
isPublicLesson: false
privateVideoUrl: https://fullstack.wistia.com/medias/tu0bhey0sb
---

Hello! In this lesson, we will focus on how to create and verify the digital signatures to represent our NFC Pokemon.

We will:

-   Do a quick review of the asymmetric cryptography
-   Set up our cryptography library for React Native

    -   we will use the popular "elliptic" npm package
    -   however, because the elliptic package is a normal NodeJS library rather than a React Native specific one, we will have some extra work to do
-   Implement the signature creation and verification process

Let's get started!

## Quick review of asymmetric cryptography

Let's first take a look at this diagram. 

![image](https://user-images.githubusercontent.com/10307875/148349416-dac23a21-f34a-49c4-a64e-1e7a839f895e.png)

As you can see in the diagram, Alice wants to receive messages from Bob, and she wants the message to be private.

It will be easy if Alice and Bob can simply share a common key for both encryption and decryption. But that means Bob can be trusted. What can we do if this is not the case?

To handle this case, we can use asymmetric cryptography.

In the current diagram (left-hand side), Alice produces a key pair: private key and public key.

![image](https://user-images.githubusercontent.com/10307875/148349757-c1ca6514-587d-4f7d-8278-1b873d1dee75.png)

Alice keeps the private key and gives the public key to Bob or anyone who wants to send messages to her. Bob can now encrypt his message to Alice with this public key, and only Alice, who has the private key, can decrypt the message.

Besides encryption and decryption, there is another major use-case for asymmetric cryptography. Let's take a look at the diagram at the right side.

This time, Alice wants to send out a "public" message. By public, we mean that the message is not encrypted, and anyone can see and understand it. However, she wants people to be able to "verify" that this message is indeed sent by her.

So, Alice uses her private key to "sign" this message and deliver the message together with this "signature." Now, if there's anyone who wants to verify whether the message is created by Alice, they can use the public key to achieve that.

That's exactly what we'd like to do in the rest of this lesson. We want our NFC Pokemon tags to be verified by anyone, but only we, the author of this app, can create or modify any NFC Pokemon tags.

To create the signature, we will use two pieces of information. The first one is the Pokemon data encapsulated in the NFC tag. The second one is the NFC UID. Recall from previous lessons that the UID for a NFC tag is a unique hardware identifier, which is normally fixed during the NFC tag manufacturing process.

By putting the UID into our signature, we can prevent the issue of people creating fake tags by simply cloning the whole tag content. Because every NFC tag has a different UID, this kind of fraudulent tag won't pass our signature verification.

## Set up our cryptography library for React Native

For the cryptography library, we'd like to use the well-known `elliptic` npm package.

However, we notice one thing: this package is NOT a React Native-specific library. "What's the difference?" you might ask. Well, the NodeJS built-in APIs, such as buffer, events, process, stream, and so on, are not available on the React Native Platform by default. So, we need to fix this issue in order to use the `elliptic` package.

There's another npm package called `rn-nodeify`, which can help us deal with this situation. As the name suggests, the `rn-nodeify` helps us to bring NodeJS API into our React Native world.

![image](https://user-images.githubusercontent.com/10307875/148349877-4a5d470f-b26f-496d-ae9f-421657287371.png)

Let's set up our project now.

First, install both `rn-nodeify` as well as `elliptic`. The `rn-nodeify` is actually a dev dependency, so you should pass the `-D` flag when you install it.

Once the installation is complete, add the following two commands into your NPM scripts: "nodeify" and "postinstall".

The "nodeify" command will instruct `rn-nodeify` about the NodeJS API you'd like to add, so it can install them automatically for you and perform required modifications to make these APIs available on the React Native platform.

The "postinstall" command will instruct NPM to run "nodeify" automatically after NPM-install, so we don't need to run it manually every time.

Next, we can do "npm run nodeify" to invoke "nodeify" script for the very first time.

After that, we can see our project has been modified. As you can see, `rn-nodeify` installs several required package for us automatically. Besides that, it also creates a `shim.js` for us to help us polyfill several required global symbols, such as "process" or "Buffer."

The last step is to include the generated `shim.js` file into our `index.js`.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

The newline Guide to NFCs with React Native

Module 1: Introduction

Introduction:

Start Here

Lesson 1: (5:40)

Course Overview

Lesson 2: (10:37)

What is NFC? An Introduction to NFC Tags, Cards, and Readers

Module 2: Tag-Counter Game App

Lesson 1: (1:41)

Tag Counter Game App

Lesson 2: (11:10)

Set up a React Native NFC iOS and Android App

Lesson 3: (7:42)

An Introduction to the React Native NFC Module Library

Lesson 4: (10:03)

How to Build an iOS NFC Tag Scanner App With React Native

Lesson 5: (16:36)

How to Build an Android NFC Tag Scanner App With React Native

Lesson 6: (3:14)

App1 Conclusion

Module 3: Tap-And-Go App

Lesson 1: (1:40)

Tap-And-Go App

Lesson 2: (7:10)

How to Code an NDEF Message With the NFC Tools App

Lesson 3: (9:30)

A Deep Dive Into NDEF and NdefRecord to Share Data via NFC

Lesson 4: (11:46)

Tap-And-Go Project Setup With React Native and NFC Manager

Lesson 5: (18:19)

How to Read NFC Tags and Write NDEF Data With NfcManager

Lesson 6: (12:28)

How to Build a Website NFC Tag And Use Deep Linking With NFC

Lesson 7: (3:57)

App2 Conclusion

Module 4: NfcPokemon App

Lesson 1: (2:12)

NFC Pokemon App

Lesson 2: (6:51)

The User Flow of an NFC Tag Reader and Writer App

Lesson 3: (17:20)

Intro to Type 2 NFC Tags: Read and Write NFC Tags With React

Lesson 4: (17:29)

How to Sign and Verify NFC Data With React Native and elliptic

Lesson 5: (14:48)

How to Add Memory Protection to NFC Tags For Copy Protection

Lesson 6: (4:30)

App3 Conclusion

How to Sign and Verify NFC Data With React Native and elliptic