Sign in with Aptos

The Sign in with Aptos (SIWA) standard introduces a secure and user-friendly way for users to authenticate to off-chain resources with their Aptos accounts. Aptos Connect 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 .

Requirements

The following requirements must be met for Aptos Connect 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

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 .