This quick start guide will walk you through how to quickly get setup with the Passport SDK, register and authenticate users, and start signing messages and transactions. You can skip to the Complete Setup, and then follow the section step-by-step where each code snippet will be explained. You can also quickly pull the completed repository here https://github.com/0xpass/passport-quickstart and follow along.
Project setup
First we'll setup a Next.js project, with tailwind, we can do this with the following command, and walk through the configuration wizard, making sure to chose the app-router, and tailwind.
npx create-next-app@latest
Setup and Dependencies
Firstly, we'll ensure we have all the requires dependencies. So we're going to install the Passport SDK @0xpass/passport to interact with Passport protocol, and viem for blockchain interactions. We'll also install some helper packages @0xpass/passport-viem to seamlessly use Passport with viem, and finally @0xpass/webauthn-signer to handle our passkey registration and authentication.
Firstly let's setup a usePassport hook, which gives us an easy way to access our Passportinstance.
import { useRef } from "react";
import { WebauthnSigner } from "@0xpass/webauthn-signer";
import { Network, Passport } from "@0xpass/passport";
export function usePassport(scopeId: string) {
const signerRef = useRef<WebauthnSigner | null>(null);
const passportRef = useRef<Passport | null>(null);
if (!signerRef.current) {
signerRef.current = new WebauthnSigner({
rpId: process.env.NEXT_PUBLIC_RP_ID!,
rpName: "0xPass",
});
}
if (!passportRef.current) {
passportRef.current = new Passport({
scopeId: scopeId,
signer: signerRef.current,
network: Network.TESTNET,
});
}
return {
passport: passportRef.current,
signer: signerRef.current,
};
}
Now in our page.tsxwe can setup our state variables for, tracking registering, and authenticating users. We'll also use our Passport and WebauthnSignerinstances, from the hook we just created. as well as our Alchemy url and a fallback provider, which we'll make use of when we want to signMessages with our WalletClient.
We use a useRef so that a new instance of WebauthnSigner and Passportaren't re-created during re-renders.
Next up we're going to setup our WalletClientwith viem, our functions to register and authenticate users, as well as sign messages.
So we set up the functions for these as follows, we setup theregister , authenticateand signMessagefunctions, as well as our createWalletClientfunction which allows us to set up client to use any viemfunctionality.
Now with all of this setup we can setup our UI too, so the overall setup looks as below. In the final part of our setup, we've created the UI layer to interact with the above functions. We have buttons to register and authenticate, which dynamically interact with the state, to show loading states, as well as authenticated states, and finally when a message is signed, the user is also able to see the signed message signature.
