Passkey Auth

The Alchemy Signer allows you to authenticate and log in users with a passkey that they used previously to sign up to your application.

To add passkey auth functionality to your app, you can use the authenticate method on the Alchemy Signer as follows.

passkey-auth.ts

import { signer } from "./signer";

signer.authenticate({
  type: "passkey",
  createNew: false,
});

signer.ts

import { AlchemySigner } from "@alchemy/aa-alchemy";

export const signer = new AlchemySigner({
  client: {
    // This is created in your dashboard under `https://dashboard.alchemy.com/settings/access-keys`
    // NOTE: it is not recommended to expose your API key on the client, instead proxy requests to your backend and set the `rpcUrl`
    // here to point to your backend.
    connection: { apiKey: "alcht_<KEY>" },
    iframeConfig: {
      // you will need to render a container with this id in your DOM
      iframeContainerId: "turnkey-iframe-container",
    },
  },
});

Example

import { AlchemySigner } from "@alchemy/aa-alchemy";
import { useMutation } from "@tanstack/react-query";
import { useMemo } from "react";

export const SignupComponent = () => {
  // It is recommended you wrap this in React Context or other state management
  // For this example, we are defining the Alchemy Signer in the component
  const signer = useMemo(
    () =>
      new AlchemySigner({
        client: {
          connection: {
            jwt: "alcht_<KEY>",
          },
          iframeConfig: {
            iframeContainerId: "turnkey-iframe-container",
          },
        },
      }),
    []
  );

  // we are using react-query to handle loading states more easily,
  // feel free to use whichever state management library you prefer
  const {
    mutate: login,
    isLoading,
    data: user,
  } = useMutation({
    mutationFn: () =>
      signer.authenticate({
        type: "passkey",
        createNew: false,
      }),
  });

  return (
    <div>
      {user == null || isLoading ? (
        <button onClick={() => login()}>Log in</button>
      ) : (
        <div>
          <div>Address: {user.address}</div>
          <div>Email: {user.email}</div>
        </div>
      )}
      <div id="turnkey-iframe-container" />
    </div>
  );
};