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,
});

Example

PasskeyAuth.tsx

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>
  );
};