A library and template for easily using Internet Identity from Expo Web/iOS/Android

Developers
1

I have created a library and template project that enables easy use of Internet Identity from Expo Web/iOS/Android.

Thanks to GitHub - krpeacock/ic-expo-mvp: MVP example of Expo making an IC mainnet call

This library and template also support connecting to Local Canisters from Expo Go.

Implementation Guide

You can implement Internet Identity authentication with these simple steps:

  1. Set up Authentication Provider: Configure the provider in your app entry file
// Set up IIIntegrationProvider in app/_layout.tsx
import { useIIIntegration, IIIntegrationProvider } from 'expo-ii-integration';

const auth = useIIIntegration({
  localIPAddress: LOCAL_IP_ADDRESS,
  dfxNetwork: ENV_VARS.DFX_NETWORK,
  iiIntegrationCanisterId: ENV_VARS.CANISTER_ID_II_INTEGRATION,
  iiCanisterId: ENV_VARS.CANISTER_ID_INTERNET_IDENTITY,
});

return <IIIntegrationProvider value={auth}>...</IIIntegrationProvider>;
  1. Implement Login Functionality: Add login feature with just a few lines
// Use login function in components/LogIn.tsx
import { useIIIntegrationContext } from 'expo-ii-integration';

const { login } = useIIIntegrationContext();

await login();
  1. Implement Logout Functionality: Add logout feature just as easily
// Use logout function in components/LogOut.tsx
import { useIIIntegrationContext } from 'expo-ii-integration';

const { logout } = useIIIntegrationContext();

await logout();
  1. Backend Integration: Call backend Canister using authenticated identity
// Call backend Canister in components/WhoAmI.tsx
import { useIIIntegrationContext } from 'expo-ii-integration';
import { createBackend } from '@/backend';

const { identity } = useIIIntegrationContext();

const backend = createBackend(identity);
await backend.whoami();
4 Likes
2

Few security suggestions:

  • Don’t use a redirect_uri query param, instead always redirect to the same hardcoded URI. This could be a build variable for example.

    A query param could be used by a malicious dapp to authenticate with II using your domain and redirect back to the malicious app.

  • Make sure to not directly delegate to any incoming public key. Instead have II delegate to a random public key (default AuthClient behavior) and then extend this delegation to the incoming key.

    Not sure if this is done correctly or not in your implementation, wasn’t able to see this detail at first glance in your code.

See more details regarding security best practices with II in mobile integrations here: Security best practices: Identity and access management | Internet Computer

2 Likes
3

Thanks for your advice.

We reimplemented it based on Integrating Internet Identity on mobile devices.

Security Considerations