ICP starter project with Motoko, Next.js and React Native

This boilerplate is designed to easily build React Native applications connected to ICP Backend Canisters and enables authentication with Internet Identity

Features

• Build React Native applications connected to ICP Backend Canisters
• Authenticate users using Internet Identity
• Internet Identity Middleware to delegate Internet Identity authentications to native applications

Stack

• Ares - Frontend ICP Connector and Identity Manager
• Motoko - Programming language to build dApps in ICP
• React - Javascript library to build web applications
• React Native - Javascript framework to build mobile applications
• Tailwind - CSS framework

How to use for local development

Initial setup

npm install

Start a local ICP replica

dfx start --clean --background

Create all canisters

dfx canister create --all

Build test canister declaration files

dfx generate test

Start a tunnel

npm run tunnel:start

Results will be displayed as follows:

> [email protected] tunnel:start
> npx tsx ./scripts/tunnel/src/index.ts

https://breezy-bats-watch.loca.lt

Set Internet Identity Middleware

Clone the .env-example file and rename it to .env:

cp frontend/internet-identity-middleware/.env-example frontend/internet-identity-middleware/.env

Obtain your Internet Identity Canister ID:

dfx canister id internet-identity

Replace .env values:

# Replace YOUR_LOCALTUNNEL_URL with the URL obtained by the command npm run tunnel:start
# for example, https://abcdefgjhij.localtunnel.me
# Replace YOUR_INTERNET_IDENTITY_CANISTER_ID with the value from above step
REACT_APP_INTERNET_IDENTITY_URL=YOUR_LOCALTUNNEL_URL?canisterId=YOUR_INTERNET_IDENTITY_CANISTER_ID

Set Mobileapp

Clone the .env-example file and name it .env:

cp frontend/mobileapp/.env-example frontend/mobileapp/.env

Obtain your Internet Identity Middleware Canister ID:

dfx canister id internet-identity-middleware

Replace .env values:

# Replace with your APP_LINK if needed
EXPO_PUBLIC_APP_LINK='exp://192.168.0.125:8081'

# Replace YOUR_LOCALTUNNEL_URL with your localtunnel URL
# for example, https://abcdefgjhij.localtunnel.me
EXPO_PUBLIC_IC_HOST_URL='YOUR_LOCALTUNNEL_URL'

# Replace YOUR_LOCALTUNNEL_URL with your localtunnel URL
# and also replace YOUR_MIDDLEWARE_CANISTER_ID with your middleware canister ID
EXPO_PUBLIC_INTERNET_IDENTITY_MIDDLEWARE_URL='YOUR_LOCALTUNNEL_URL?canisterId=YOUR_MIDDLEWARE_CANISTER_ID'

Deploy all canisters and start the mobile app

Deploy all canisters

dfx deploy

Start mobile app in developer mode

cd frontend/mobileapp
npm run dev