Sign in with Aptos

The Sign in with Aptos (SIWA) (opens in a new tab) standard introduces a secure and user-friendly way for users to authenticate to off-chain resources with their Aptos accounts. Petra Web leverages this standard to share resources with the users and to improve the user experience of authentication.

Reading Emails

Applications can request the user's email by requesting the aptosconnect.app.email resource through SIWA (opens in a new tab).

Requirements

The following requirements must be met for Petra Web to provide the email:

The resource must be requested in the resources array in the AptosSignInInput object.
The resource must be aptosconnect.app.email.
There must only be one instance of the aptosconnect.app.email resource in the resources array.

Implementation Guide

This guide will walk you through the steps to read the user's email using the Aptos React Wallet Adapter. This guide assumes that you have already setup the wallet adapter in your application. If not, please refer to this page (opens in a new tab)

The @aptos-labs/wallet-adapter-react supports SIWA in versions >=4.1.0. Please ensure you are using the latest version of the wallet adapter to leverage the latest features.

1. Construct `AptosSignInInput` with the reserved resource

import type { AptosSignInInput } from '@aptos-labs/wallet-adapter-react';
 
function SignInButton() {
  const input = {
    nonce: '...',
    resources: ['aptosconnect.app.email'],
  } satisfies AptosSignInInput;
 
  return <button>Sign in with Aptos</button>;
}

2. Use the `signIn` method from `useWallet` hook

import type { AptosSignInInput } from '@aptos-labs/wallet-adapter-react';
import { useWallet } from '@aptos-labs/wallet-adapter-react';
 
function SignInButton() {
  const { signIn } = useWallet();
 
  const input = {
    nonce: '...',
    resources: ['aptosconnect.app.email'],
  } satisfies AptosSignInInput;
 
  const handleSignIn = async () => {
    const result = await signIn({ walletName: 'Continue with Google', input });
 
    // ...
  };
 
  return <button onClick={handleSignIn}>Sign in with Aptos</button>;
}

The result of the signIn method is a AptosSignInOutput. The object will contain a resource with the user's email if requirements are met.

{
    account: AccountInfo;
    input: {
        // ...
        resources: [
            'aptosconnect.app.email:example@gmail.com'
        ]
        // ...
    },
    plainText: string;
    signingMessage: Uint8Array;
    signature: Signature;
    type: 'single_key';
};

3. Retrieve the Email

To retrieve the email, you can interate through the input.resources attribute from the AptosSignInOutput and look for the aptosconnect.app.email key. The email will be placed in the following format: aptosconnect.app.email:<email>.

import type { AptosSignInInput } from '@aptos-labs/wallet-adapter-react';
import { useWallet } from '@aptos-labs/wallet-adapter-react';
 
function SignInButton() {
  const { signIn } = useWallet();
 
  const input = {
    nonce: '...',
    resources: ['aptosconnect.app.email'],
  } satisfies AptosSignInInput;
 
  const handleSignIn = async () => {
    const result = await signIn({ walletName: 'Continue with Google', input });
 
    const email = result.input.resources
      .find((resource) => resource.startsWith('aptosconnect.app.email'))
      ?.split(':')
      ?.at(1);
 
    console.log(email);
  };
 
  return <button onClick={handleSignIn}>Sign in with Aptos</button>;
}

Conclusion

Congratulations! You have now read the user's email using the Aptos React Wallet Adapter and SIWA (opens in a new tab).

Telegram Introduction