Setting up the OAuth flow

1. Remove all mentions of @aptos-labs/wallet-adapter-react and insert the code logic below within the WalletButtons component.
   • You can also remove WalletProvider from the root layout.
2. Prepare the URL params of the login URL.
   • Set the redirect_uri and client_id to your configured values with the IdP.
   • Set the nonce to the nonce of the EphemeralKeyPair from the previous step.
3. Construct the login URL for the user to authenticate with the IdP.
   • Make sure the openid scope is set. Other scopes such as email and profile can be set based on your app’s needs.
   WalletButtons/index.tsx

   
   

   const redirectUrl = new URL("https://accounts.google.com/o/oauth2/v2/auth");

   const searchParams = new URLSearchParams({

   /**

   * Replace with your own client ID

   */

   client_id: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID,

   /**

   * The redirect_uri must be registered in the Google Developer Console. This callback page

   * parses the id_token from the URL fragment and combines it with the ephemeral key pair to

   * derive the keyless account.

   *

   * window.location.origin == http://localhost:3000

   */

   redirect_uri: `${window.location.origin}/callback`,

   /**

   * This uses the OpenID Connect implicit flow to return an id_token. This is recommended

   * for SPAs (single-page applications) as it does not require a backend server.

   */

   response_type: "id_token",

   scope: "openid email profile",

   nonce: ephemeralKeyPair.nonce,

   });

   redirectUrl.search = searchParams.toString();

   
   
4. When the user clicks the login button, redirect the user to the redirectUrl that you just created.
   WalletButtons/index.tsx

   
   

   <a href={redirectUrl.toString()}>

   <button>Sign in with Google</button>

   </a>