Passkey Signup
The Alchemy Signer allows you to sign up users to your application using a passkey on their device.
To add passkey signup functionality to your app, you can use the authenticate
method on the Alchemy Signer as follows.
ts
import { signer } from "./signer";
signer.authenticate({
type: "passkey",
createNew: true,
username: "PASSKEY_NAME",
});
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
tsx
import { AlchemySigner } from "@alchemy/aa-alchemy";
import { useMutation } from "@tanstack/react-query";
import { useMemo } from "react";
export const PasskeySignupComponent = () => {
// 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 whatever state management library you prefer
const {
mutate: signup,
isLoading,
data: user,
} = useMutation({
mutationFn: () =>
signer.authenticate({
type: "passkey",
createNew: true,
username: "PASSKEY_NAME",
}),
});
return (
<div>
{user == null || isLoading ? (
<button onClick={() => signup()}>Sign up</button>
) : (
<div>
<div>Address: {user.address}</div>
<div>Email: {user.email}</div>
</div>
)}
<div id="turnkey-iframe-container" />
</div>
);
};