Creating Users & Wallets

Creating a New User and Wallet

Setting up a new User and Wallet in Capsule involves the following steps:

• User Creation

• Email Verification

• Key creation for session authentication

• Wallet Creation

• Sending a backup share to the user's email (or storing it in a reliable and user-accessible location outside the app)

• (Optional) Setup & enable two-factor authentication

Here are reference code snippets to help you accomplish these steps.

You will need to call capsule.init() after instantiating the Mobile SDK. This is due to differences in how mobile and browser storage work.

For testing convenience, emails under the domain test.usecapsule.com will accept any verification code. This feature is not designed for production use.

Web Modal

// With the Modal, User and Wallet Creation are handled automatically!
import Capsule, {
  Environment,
  CapsuleModal,
} from '@usecapsule/react-sdk';

const capsule = new Capsule(
  Environment.BETA,
  YOUR_API_KEY
);

const [isOpen, setIsOpen] = useState(false)

// React Component
<CapsuleModal capsule={capsule} onClose={() => {setIsOpen(false)}} />

Web

import Capsule, { Environment } from '@usecapsule/web-sdk';

const capsule = new Capsule(
  Environment.BETA,
  YOUR_API_KEY
);
// User Creation
// collect email from user and put in `email` variable
await capsule.createUser(email);
// collect verification code from user and put in `verificationCode` variable, then direct user to `passkeyUrl`
const passkeyUrl = await capsule.verifyEmail(verificationCode);
// wait for user to setup passkey
const recovery = await capsule.waitForPasskeyAndCreateWallet();
// finally display `recovery` to user for them to store (you can also store this value)

// Check if 2FA has already been setup
const { isSetup } = await capsule.check2FAStatus()
// Setup 2FA if `isSetup` is false
const { uri } = await capsule.setup2FA()
// create a QR code with `uri` as the value and direct the user to to scan with a 2FA app
// Enable 2FA by collecting a code from the users preferred 2FA application
await capsule.enable2FA(twoFactorVerificationCode)

// User Login
// collect email from user and put in `email` variable, then direct user to `passkeyUrl`
const passkeyUrl = await capsule.initiateUserLogin(email);
// wait for user to authenticate with passkey
await capsule.waitForLoginAndSetup();

React Native

import { CapsuleMobile, Environment } from '@usecapsule/react-native-wallet';
const capsule = new CapsuleMobile(
  Environment.BETA,
  YOUR_API_KEY
);
// User Creation

const biometricsId = await capsule.verifyEmailBiometricsId(verificationCode);
await capsule.registerPasskey(email, biometricsId);

// Check if 2FA has already been setup
const { isSetup } = await capsule.check2FAStatus()
// Setup 2FA if `isSetup` is false
const { uri } = await capsule.setup2FA()
// create a QR code with `uri` as the value and direct the user to to scan with a 2FA app
// Enable 2FA by collecting a code from the users preferred 2FA application
await capsule.enable2FA(twoFactorVerificationCode)

// User Login
await capsule.login()

Flutter

import 'package:capsule/capsule.dart';

...

class MyAppState extends State<MyApp> {
  late Capsule _capsule;

...

  @override
  void initState() {
    ...
    _capsule = Capsule(
        environment: Environment.beta,
        apiKey: YOUR_API_KEY,
    )
      ..init();
    ...
    super.initState();
  }

...

Future<void> signUp(String email) async {
  final userExists = await _capsule.checkIfUserExists(email);
  await _capsule.createUser(email);
  final biometricsId = await _capsule.verifyEmail(verificationCode);
  await _capsule.generatePasskey(email, biometricsId);
  final wallet = (await _capsule.createWallet(
      skipDistribute: false,
    )).wallet;
  ...
}

...
}

Congrats! Your user and wallet is now set up and ready to use.

NOTE: The storage settings in mobile can be overridden to accommodate different data management setups, per developer preferences. See this section if this is of interest.

However, this flexibility also comes with a high level of responsibility and an increased complexity of integration. If you're unsure about any aspect of this functionality, we strongly recommend you contact us directly for further discussion and assistance.