React Native for IC Apps
• 6 minutes readIntroduction
This tutorial will walk you through the process of building a React Native app for the Internet Computer using Expo and Internet Identity. It has been a while coming, due to the fact that @dfinity/agent
has been using webassembly
modules for verifying BLS signatures, but we now have a solution that works with React Native.
Then, you can install the dependencies in your project:
Getting Started
Prerequisites
- Node.js (version 18 or higher)
- Xcode (for iOS development)
- Android Studio (for Android development)
- (recommended) Apple Developer Account (for iOS development)
Expo Quickstart
First, you can run the following command to create your app. I’ll be naming the project ic-expo
, but you can name it whatever you want.
Then, cd
into the project. At this point, if you are set up with your preferred development environment, you can run expo run ios
or expo run android
to start the app in the simulator. If you are not set up, you can follow the instructions in the Expo documentation to get set up.
Installing Dependencies
Next, we need to install the dependencies for our app. We will be using @dfinity/agent
to interact with the Internet Computer, and there are several other necessary dependencies we’ll also need to install.
Setting up Internet Identity
We will be using Internet Identity to authenticate users. To pull this off, we need to host a website that will process the requests from our app and return a delegation.
I recommend simply dropping the ii_integration website into your project in src/ii_integration
. This is a simple website that will handle the requests from our app and return a delegation. Add a dfx.json
file to the root of your project for the ii_integration
site, as well as configs for a whoami
canister and internet-identity
// dfx.json
How it works
The ii_integration
site uses @dfinity/auth-client
to integrate with Internet Identity. When the page is loaded, it looks for a redirect_uri
and a pubkey
in the URL parameters. If it finds these, it will authenticate with Internet Identity and then generate a deep link that will return the delegation to the app. The app will then use this delegation to authenticate calls to the Internet Computer.
The key tricks here are:
1. Create the auth-client with a base key from the public key
The IncompleteEd25519KeyIdentity class is a workaround, since the auth-client expects a full keypair. We can get around this by creating an identity with the public key, and then passing it to the auth-client. In the future I’ll change the support in the library so the setup is simpler.
// Represent the public key as an identity
;
;
2. Generate a deep link to return the delegation to the app
Once the user has authenticated, we can get the delegation from the auth-client and then generate a deep link that will return the delegation to the app. In this case, the identity is abstracted inside of the the ii-login-button
web component, but the logic is very similar with @dfinity/auth-client
.
onSuccess:;
Setting up the app
The app itself will have a very simple structure, so I’ll gloss over that a little bit. The App renders a LoggedIn
view and a LoggedOut
view, and the LoggedIn
view will render the WhoAmI
component to display the user’s principal, while the LoggedOut
view will render the Pressable
component to allow the user to log in.
The more important logic is contained in the useAuth
hook, which will handle the authentication logic. It will generate the url to redirect to the ii_integration
site, and then it will handle the deep link when the delegation is returned.
// src/app/hooks/useAuth.js
;
;
;
;
;
;
;
TODO: clean up the canister link for .env
based network configs
Setting up the agent
Finally, once the delegation identity is ready, we need to pass a couple extra options while setting up the HttpAgent. We need to pass the identity
and the host
to the agent, like normal, but we will also need to provide fetchOptions
, a blsVerify
function, and callOptions
. This will look like this:
;
Conclusion
That’s it! You should now have a working React Native app that can authenticate with Internet Identity and make calls to the Internet Computer. You can find the full source code for this tutorial athttps://github.com/krpeacock/ic-expo-mvp.