DEV Community: Onwuka David

Passkey Login & Smart Wallet Creation on Solana with React Native and LazorKit — No More Seed Phrases!

Onwuka David — Wed, 07 Jan 2026 14:23:01 +0000

Time to complete: 15-20 minutes

A significant percentage of crypto users have permanently lost access to their wallets due to forgotten seed phrases. But what if seed phrases weren’t required at all?

In this tutorial, you’ll learn how to build a passwordless Solana wallet using LazorKit’s passkey integration using biometric authentication like Face ID and Touch ID. The result is Web2-level UX with Web3-grade security—no extensions, no seed phrases.

By the end, you’ll understand how passkeys work and have a fully functional smart wallet connection flow running on Solana.

Who this tutorial is for

Developers familiar with React Native
Anyone curious about replacing seed phrases with passkeys
Builders exploring gasless Solana UX with LazorKit

What are Passkeys?

Passkeys are a modern authentication standard (WebAuthn) that replaces passwords and seed phrases with biometric authentication.

Forget long seed phrases and confusing backups. With passkeys, users access their wallets using FaceID, TouchID, or Windows Hello, dramatically improving the user experience of crypto applications while maintaining strong security guarantees.

Before we dive in properly, let's look at how passkey wallets compare to traditional wallets:

Authentication

Traditional Wallet: 12–24 word seed phrase
Passkey Wallet: A quick tap with your fingerprint or face

Storage

Traditional Wallet: Seed phrase must be written down and stored securely
Passkey Wallet: Cryptographic keys are stored in the device’s Secure Enclave

Security

Traditional Wallet: Seed phrases can be lost, stolen, or copied
Passkey Wallet: Access is bound to a cryptographic key protected by device-level biometrics or system authentication.

Device Sync

Traditional Wallet: Same seed phrase must be manually imported on every device
Passkey Wallet: Securely synced across devices via iCloud or Google

Setup Time

Traditional Wallet: 5+ minutes of setup and memorization
Passkey Wallet: Ready in under 30 seconds

In short: Passkeys make wallet onboarding fast, secure, and intuitive — bringing Web2-level UX to Web3 applications without compromising on security.

Having covered why passkeys offer a better alternative to traditional wallets, we’ll now move on to the implementation and integrate passkey authentication step by step.

Prerequisites

Before starting this tutorial, ensure you have:

Completed the Installation Guide
LazorKitProvider wrapping your app
Polyfills configured correctly
Deep linking scheme configured in app.json

Go to lazorkit's doc to get all these done.

Having met these prerequisites, we can now safely begin integration.

Step 1: Setup the Provider

First, ensure your root layout has the LazorKitProvider:

// app/_layout.tsx
import "../polyfills"; // ⚠️ MUST be first!

import { LazorKitProvider } from "@lazorkit/wallet-mobile-adapter";
import { Stack } from "expo-router";
import * as WebBrowser from "expo-web-browser";

// Required for completing the auth session
WebBrowser.maybeCompleteAuthSession();

const LAZORKIT_CONFIG = {
  rpcUrl: "https://api.devnet.solana.com",
  portalUrl: "https://portal.lazor.sh",
  configPaymaster: {
    paymasterUrl: "https://kora.devnet.lazorkit.com",
  },
};

export default function RootLayout() {
  return (
    <LazorKitProvider
      rpcUrl={LAZORKIT_CONFIG.rpcUrl}
      portalUrl={LAZORKIT_CONFIG.portalUrl}
      configPaymaster={LAZORKIT_CONFIG.configPaymaster}
      isDebug={true}
    >
      <Stack>
        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
      </Stack>
    </LazorKitProvider>
  );
}

Listing 1-1: Root layout configuration with LazorKitProvider

This code sets up the foundation for passkey authentication in React Native. Let's break it down, line by line:

import "../polyfills"; // ⚠️ MUST be first!

The polyfills import must come before anything else. Solana's web3.js library expects Node.js APIs like Buffer and crypto that don't exist in React Native. Our polyfill file provides these implementations.

import * as WebBrowser from "expo-web-browser";
WebBrowser.maybeCompleteAuthSession();

When users authenticate with their passkey, they're redirected to LazorKit's portal in a web browser. After authentication, the browser redirects back to your app via deep link. maybeCompleteAuthSession() handles this return—it closes the browser and resumes your app with the authentication result.

const LAZORKIT_CONFIG = {
  rpcUrl: "https://api.devnet.solana.com",
  portalUrl: "https://portal.lazor.sh",
  configPaymaster: {
    paymasterUrl: "https://kora.devnet.lazorkit.com",
  },
};

The configuration object specifies three essential endpoints:

rpcUrl: Where to send Solana RPC requests (we use Devnet for testing)
portalUrl: LazorKit's authentication portal
paymasterUrl: The service that sponsors gas fees for gasless transactions

isDebug={true}

The isDebug flag enables verbose logging during development. You'll see authentication flow details and transaction information in the console. Set this to false in production.

Why `maybeCompleteAuthSession()`?

When the user returns from the LazorKit portal (browser), Expo needs to know the auth session is complete. This function handles that cleanup.

Step 2: Create the Connection Screen

Create a new screen for wallet connection:

// app/(tabs)/index.tsx
import { useWallet } from "@lazorkit/wallet-mobile-adapter";
import { useState } from "react";
import {
  ActivityIndicator,
  Alert,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from "react-native";

export default function WalletScreen() {
  const {
    connect, // Function to initiate connection
    disconnect, // Function to disconnect
    isConnected, // Boolean: is wallet connected?
    smartWalletPubkey, // PublicKey of the smart wallet
    isConnecting, // Boolean: is connection in progress?
  } = useWallet();

  const [isLoading, setIsLoading] = useState(false);

  // We'll implement these next...
  const handleConnect = async () => {
    /* ... */
  };
  const handleDisconnect = async () => {
    /* ... */
  };

  return <View style={styles.container}>{/* UI will go here */}</View>;
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#0a0a0a",
    padding: 20,
  },
});

Listing 1-2: Basic wallet screen structure with useWallet hook

This code creates the foundation for wallet connection. Let's examine the key parts:

const { connect, disconnect, isConnected, smartWalletPubkey, isConnecting } =
  useWallet();

The useWallet hook provides everything needed for wallet management:

connect: Opens the authentication flow in the browser
disconnect: Clears the wallet session
isConnected: Whether we have an active wallet session
smartWalletPubkey: A Solana PublicKey object representing your wallet address
isConnecting: True while the browser flow is in progress

const [isLoading, setIsLoading] = useState(false);

We maintain our own loading state in addition to isConnecting. This gives us finer control—isConnecting covers the browser flow, while isLoading can cover post-connection setup like fetching balances.

The `useWallet` Hook Returns

Property	Type	Description
`connect`	`function`	Initiates passkey authentication
`disconnect`	`function`	Clears the wallet session
`isConnected`	`boolean`	Whether a wallet is connected
`smartWalletPubkey`	`PublicKey \	null`
`isConnecting`	`boolean`	Loading state during connection
`signMessage`	`function`	Signs arbitrary messages
`signAndSendTransaction`	`function`	Signs and broadcasts transactions

Step 3: Implement Connect Function

Now implement the connection logic:

import { getRedirectUrl } from "@/utils/redirect-url";

const handleConnect = async () => {
  // Prevent multiple connection attempts
  if (isConnecting || isLoading) return;

  try {
    setIsLoading(true);

    await connect({
      // redirectUrl tells LazorKit where to return after auth
      // This MUST match your app's URL scheme
      redirectUrl: getRedirectUrl(),

      // Called when authentication succeeds
      onSuccess: (wallet) => {
        console.log("✅ Connected successfully!");
        console.log("Smart Wallet:", wallet.smartWallet);
        console.log("Credential ID:", wallet.credentialId);
        console.log("Platform:", wallet.platform);
        setIsLoading(false);
      },

      // Called when authentication fails
      onFail: (error) => {
        console.error("❌ Connection failed:", error);
        Alert.alert(
          "Connection Failed",
          error?.message || "Unable to connect wallet"
        );
        setIsLoading(false);
      },
    });
  } catch (error: any) {
    console.error("Error during connect:", error);
    Alert.alert("Error", error?.message || "Failed to connect");
    setIsLoading(false);
  }
};

Listing 1-3: The handleConnect function with callbacks

This function orchestrates the entire connection flow. Let's examine each part:

if (isConnecting || isLoading) return;

Guard against double-taps. If authentication is already in progress, we ignore additional presses. This prevents confusing race conditions.

await connect({
  redirectUrl: getRedirectUrl(),
  // ...
});

The redirectUrl is crucial for mobile apps. After the user authenticates in the browser, this URL tells the browser how to return to your app. It must match the URL scheme configured in your app.json (e.g., passpay://).

onSuccess: (wallet) => {
  console.log("Smart Wallet:", wallet.smartWallet);
  console.log("Credential ID:", wallet.credentialId);
  console.log("Platform:", wallet.platform);
  setIsLoading(false);
},

The onSuccess callback receives a WalletInfo object with the wallet's details. The smartWallet address is what you'll use for receiving funds and displaying to users. The same passkey always produces the same wallet address.

onFail: (error) => {
  Alert.alert("Connection Failed", error?.message || "Unable to connect wallet");
  setIsLoading(false);
},

The onFail callback handles authentication failures—user cancelled, network issues, or browser problems. We show a native alert for immediate feedback.

The `connect` Options

interface ConnectOptions {
  // REQUIRED: Deep link URL to return to your app
  redirectUrl: string;

  // OPTIONAL: Called with wallet info on success
  onSuccess?: (wallet: WalletInfo) => void;

  // OPTIONAL: Called with error on failure
  onFail?: (error: Error) => void;
}

The `WalletInfo` Object

When connection succeeds, you receive:

interface WalletInfo {
  // Unique WebAuthn credential ID (Base64)
  credentialId: string;

  // Raw public key bytes of the passkey
  passkeyPubkey: number[];

  // YOUR SOLANA WALLET ADDRESS (Base58)
  // Use this to receive funds and display to users
  smartWallet: string;

  // Internal PDA for device management
  walletDevice: string;

  // Origin platform ('android' | 'ios')
  platform: string;
}

Step 4: Display Wallet Information

Show the connected wallet state:

return (
  <View style={styles.container}>
    <Text style={styles.title}>PassPay Wallet</Text>

    {isConnected && smartWalletPubkey ? (
      // ✅ CONNECTED STATE
      <View style={styles.walletCard}>
        <Text style={styles.label}>Your Wallet Address</Text>
        <Text style={styles.address} numberOfLines={1} ellipsizeMode="middle">
          {smartWalletPubkey.toBase58()}
        </Text>
        <Text style={styles.successBadge}>✓ Connected with Passkey</Text>

        <TouchableOpacity
          style={styles.disconnectButton}
          onPress={handleDisconnect}
        >
          <Text style={styles.disconnectText}>Disconnect</Text>
        </TouchableOpacity>
      </View>
    ) : (
      // ❌ NOT CONNECTED STATE
      <View style={styles.connectContainer}>
        <Text style={styles.description}>
          Create or connect your wallet using biometric authentication (FaceID,
          TouchID, or fingerprint)
        </Text>

        <TouchableOpacity
          style={[
            styles.connectButton,
            (isConnecting || isLoading) && styles.buttonDisabled,
          ]}
          onPress={handleConnect}
          disabled={isConnecting || isLoading}
        >
          {isConnecting || isLoading ? (
            <ActivityIndicator color="white" />
          ) : (
            <Text style={styles.connectButtonText}>
              Connect with Passkey 🔐
            </Text>
          )}
        </TouchableOpacity>
      </View>
    )}
  </View>
);

Display Address Helpers

Create a utility to truncate long addresses:

// utils/helpers.ts
export function truncateAddress(
  address: string,
  startChars: number = 4,
  endChars: number = 4
): string {
  if (!address) return "";
  if (address.length <= startChars + endChars) return address;
  return `${address.slice(0, startChars)}...${address.slice(-endChars)}`;
}

// Usage:
// truncateAddress("4UjfJZ8K1234567890abcdefghijklmnopqrstuvwxyz")
// Returns: "4Ujf...wxyz"

Step 5: Handle Disconnect

Implement the disconnect function:

const handleDisconnect = async () => {
  try {
    await disconnect({
      onSuccess: () => {
        console.log("👋 Disconnected successfully");
      },
      onFail: (error) => {
        console.error("Disconnect failed:", error);
        Alert.alert("Error", "Failed to disconnect");
      },
    });
  } catch (error: any) {
    console.error("Error during disconnect:", error);
    Alert.alert("Error", error?.message || "Failed to disconnect");
  }
};

What Disconnect Does

Clears the local wallet session
Resets isConnected to false
Resets smartWalletPubkey to null
Does NOT delete the passkey (user can reconnect later)

Complete Code Example

Here's the full implementation from PassPay:

// app/(tabs)/index.tsx
import { useWallet } from "@lazorkit/wallet-mobile-adapter";
import { useState } from "react";
import {
  ActivityIndicator,
  Alert,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from "react-native";
import { getRedirectUrl } from "@/utils/redirect-url";

export default function HomeScreen() {
  const { connect, isConnected, smartWalletPubkey, disconnect, isConnecting } =
    useWallet();
  const [isLoading, setIsLoading] = useState(false);

  const handleConnect = async () => {
    if (isConnecting || isLoading) return;

    try {
      setIsLoading(true);
      await connect({
        redirectUrl: getRedirectUrl(),
        onSuccess: (wallet) => {
          console.log("Connected:", wallet.smartWallet);
          setIsLoading(false);
        },
        onFail: (error) => {
          console.error("Connection failed:", error);
          Alert.alert("Connection Failed", error?.message || "Unknown error");
          setIsLoading(false);
        },
      });
    } catch (error: any) {
      console.error("Error connecting:", error);
      Alert.alert("Error", error?.message || "Failed to connect");
      setIsLoading(false);
    }
  };

  const handleDisconnect = async () => {
    try {
      await disconnect({
        onSuccess: () => console.log("Disconnected"),
        onFail: (error) => {
          console.error("Disconnect failed:", error);
          Alert.alert("Error", "Failed to disconnect");
        },
      });
    } catch (error: any) {
      Alert.alert("Error", error?.message || "Failed to disconnect");
    }
  };

  return (
    <ScrollView style={styles.container}>
      <View style={styles.content}>
        <Text style={styles.title}>PassPay</Text>
        <Text style={styles.subtitle}>Passkey-Powered Solana Wallet</Text>

        {isConnected && smartWalletPubkey ? (
          <View style={styles.walletContainer}>
            <View style={styles.walletCard}>
              <Text style={styles.label}>Wallet Address</Text>
              <Text
                style={styles.address}
                numberOfLines={1}
                ellipsizeMode="middle"
              >
                {smartWalletPubkey.toBase58()}
              </Text>
              <Text style={styles.successText}>✓ Connected with Passkey</Text>
            </View>

            <TouchableOpacity
              style={styles.disconnectButton}
              onPress={handleDisconnect}
            >
              <Text style={styles.disconnectText}>Disconnect</Text>
            </TouchableOpacity>
          </View>
        ) : (
          <View style={styles.connectContainer}>
            <Text style={styles.description}>
              Create or connect your wallet using biometric authentication
            </Text>

            <TouchableOpacity
              style={[
                styles.connectButton,
                (isConnecting || isLoading) && styles.buttonDisabled,
              ]}
              onPress={handleConnect}
              disabled={isConnecting || isLoading}
            >
              {isConnecting || isLoading ? (
                <ActivityIndicator color="white" />
              ) : (
                <Text style={styles.connectButtonText}>
                  Connect with Passkey 🔐
                </Text>
              )}
            </TouchableOpacity>
          </View>
        )}
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#0a0a0a",
  },
  content: {
    padding: 20,
    paddingTop: 60,
  },
  title: {
    fontSize: 32,
    fontWeight: "bold",
    color: "#fff",
    textAlign: "center",
  },
  subtitle: {
    fontSize: 16,
    color: "#888",
    textAlign: "center",
    marginTop: 8,
    marginBottom: 32,
  },
  walletContainer: {
    gap: 16,
  },
  walletCard: {
    backgroundColor: "#1a1a1a",
    borderRadius: 16,
    padding: 20,
    borderWidth: 1,
    borderColor: "#333",
  },
  label: {
    fontSize: 12,
    color: "#888",
    marginBottom: 8,
    textTransform: "uppercase",
  },
  address: {
    fontSize: 14,
    color: "#fff",
    fontFamily: "monospace",
  },
  successText: {
    color: "#14F195",
    marginTop: 12,
    fontSize: 14,
  },
  connectContainer: {
    alignItems: "center",
    gap: 24,
  },
  description: {
    fontSize: 16,
    color: "#888",
    textAlign: "center",
    lineHeight: 24,
  },
  connectButton: {
    backgroundColor: "#9945FF",
    paddingVertical: 16,
    paddingHorizontal: 32,
    borderRadius: 12,
    width: "100%",
    alignItems: "center",
  },
  buttonDisabled: {
    opacity: 0.6,
  },
  connectButtonText: {
    color: "#fff",
    fontSize: 18,
    fontWeight: "600",
  },
  disconnectButton: {
    backgroundColor: "transparent",
    borderWidth: 1,
    borderColor: "#ff4444",
    paddingVertical: 12,
    borderRadius: 12,
    alignItems: "center",
  },
  disconnectText: {
    color: "#ff4444",
    fontSize: 16,
    fontWeight: "500",
  },
});

How It Works Under the Hood

1. Passkey Creation (First Time User)

User taps "Connect"
    ↓
Browser opens LazorKit Portal
    ↓
Portal calls navigator.credentials.create()
    ↓
Device shows biometric prompt
    ↓
Secure Enclave generates keypair
    ↓
Public key sent to LazorKit
    ↓
Smart Wallet PDA created on-chain
    ↓
Redirect back to app with wallet info

2. Passkey Authentication (Returning User)

User taps "Connect"
    ↓
Browser opens LazorKit Portal
    ↓
Portal calls navigator.credentials.get()
    ↓
Device shows biometric prompt
    ↓
Secure Enclave signs challenge
    ↓
Signature verified
    ↓
Redirect back to app with wallet info

This flow demonstrates how LazorKit bridges Web2 authentication and Web3 ownership—allowing developers to ship secure, non-custodial wallets without exposing users to seed phrases or browser extensions.

⚠️ Note: While passkeys remove the need for seed phrases, users should understand device recovery and platform sync implications (iCloud / Google Password Manager).

Next Steps

Explore More LazorKit examples...

This tutorial covered passkey wallet authentication—the foundation of LazorKit integration. But there's much more you can build. If you’d like to go deeper, I’ve put together PassPay, a reference repository that demonstrates LazorKit integrations across both Web (Next.js) and Mobile (React Native) with real, production-style examples. Some of these examples are:

Gasless Transactions - Send SOL without paying fees
On-Chain Memos - Write permanent blockchain messages
Native SOL Staking - Multi-instruction transactions with passkeys
Subscription Payments - Recurring payment flows
Session Management - Keep users logged in across sessions

📚 View the complete documentation: PassPay on GitHub includes 11 step-by-step tutorials for both Web (Next.js) and Mobile (React Native) with full working code.

Passkey Login & Smart Wallet Creation on Solana with Next.js and LazorKit — No More Seed Phrases!

Onwuka David — Tue, 06 Jan 2026 17:45:41 +0000

Time to complete: 15-20 minutes

A significant percentage of crypto users have permanently lost access to their wallets due to forgotten seed phrases. But what if seed phrases weren’t required at all?

By the end, you’ll understand how passkeys work and have a fully functional smart wallet connection flow running on Solana.

Who this tutorial is for

Developers familiar with React / Next.js
Anyone curious about replacing seed phrases with passkeys
Builders exploring gasless Solana UX with LazorKit

What are Passkeys?

Passkeys are a modern authentication standard (WebAuthn) that replaces passwords and seed phrases with biometric authentication.

Before we dive in properly, let's look at how passkey wallets compare to traditional wallets:

Authentication

Traditional Wallet: 12–24 word seed phrase
Passkey Wallet: A quick tap with your fingerprint or face

Storage

Traditional Wallet: Seed phrase must be written down and stored securely
Passkey Wallet: Cryptographic keys are stored in the device’s Secure Enclave

Security

Traditional Wallet: Seed phrases can be lost, stolen, or copied
Passkey Wallet: Access is bound to a cryptographic key protected by device-level biometrics or system authentication.

Device Sync

Traditional Wallet: Same seed phrase must be manually imported on every device
Passkey Wallet: Securely synced across devices via iCloud or Google

Setup Time

Traditional Wallet: 5+ minutes of setup and memorization
Passkey Wallet: Ready in under 30 seconds

In short: Passkeys make wallet onboarding fast, secure, and intuitive — bringing Web2-level UX to Web3 applications without compromising on security.

Having covered why passkeys offer a better alternative to traditional wallets, we’ll now move on to the implementation and integrate passkey authentication step by step.

Prerequisites

Before starting this tutorial, ensure you have:

Completed the Installation guide for your nextjs environment
A modern browser
Running HTTPS on localhost(WebAuthn requirement)

Having met these prerequisites, we can now safely begin integration.

Step 1: Setup the Provider

First, ensure your root layout has the LazorkitProvider:

// app/providers.tsx
"use client";
import React, { useEffect } from "react";
import { LazorkitProvider } from "@lazorkit/wallet";
import { Buffer } from "buffer";
import { Toaster } from "react-hot-toast";

const LAZORKIT_CONFIG = {
  rpcUrl: "https://api.devnet.solana.com",
  portalUrl: "https://portal.lazor.sh",
  paymasterConfig: {
    paymasterUrl: "https://kora.devnet.lazorkit.com",
  },
};

export function AppProviders({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    // Buffer polyfill for browser
    if (typeof window !== "undefined" && !window.Buffer) {
      window.Buffer = Buffer;
    }
  }, []);

  return (
    <LazorkitProvider
      rpcUrl={LAZORKIT_CONFIG.rpcUrl}
      portalUrl={LAZORKIT_CONFIG.portalUrl}
      paymasterConfig={LAZORKIT_CONFIG.paymasterConfig}
    >
      {children}
      <Toaster position="top-right" />
    </LazorkitProvider>
  );
}

Listing 1-1: Setting up the LazorkitProvider with configuration

This code sets up the foundation for passkey authentication. Let's break it down line by line:

The "use client" directive at the top tells Next.js this is a client component. This is necessary because LazorKit uses browser APIs like WebAuthn that don't exist on the server. Next are the imports. One is of particular concern here:

import { LazorkitProvider } from "@lazorkit/wallet";

We import LazorkitProvider, which is a React context provider that makes wallet functionality available throughout your app. Any component that needs wallet access must be wrapped by this provider.

const LAZORKIT_CONFIG = {
  rpcUrl: "https://api.devnet.solana.com",
  portalUrl: "https://portal.lazor.sh",
  paymasterConfig: {
    paymasterUrl: "https://kora.devnet.lazorkit.com",
  },
};

The configuration object contains three essential URLs:

rpcUrl: The Solana RPC endpoint for blockchain communication (we use Devnet for testing in this case)
portalUrl: LazorKit's authentication portal where passkey ceremonies happen
paymasterUrl: The service that sponsors gas fees for gasless transactions.

Moving on to the next line, we have:

useEffect(() => {
  if (typeof window !== "undefined" && !window.Buffer) {
    window.Buffer = Buffer;
  }
}, []);

This useEffect hook adds a Buffer polyfill to the browser's window object. Solana's web3.js library expects Node.js's Buffer class, which browsers don't have natively. In other words, we need to add this buffer class. We then check for window first to avoid errors during server-side rendering. Moving on, we need to have our app with the AppProviders as Listing 1-2 illustrates.

Wrap Your App

In your layout.tsx, do this:

// app/layout.tsx
import { AppProviders } from "./providers";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <AppProviders>{children}</AppProviders>
      </body>
    </html>
  );
}

Listing 1-2: Wrapping your application with AppProviders

This is the root layout that wraps your entire Next.js application. The key line is:

<AppProviders>{children}</AppProviders>

By wrapping {children} with AppProviders, every page and component in your app gains access to the wallet context via the useWallet hook. Without this wrapper, calling useWallet() would throw an error.

You can find more information about this setup on the lazorkit's docs

Step 2: Create the Login Page

Now we create a login page for wallet connection:

// app/(auth)/login/page.tsx
"use client";
import { useWallet } from "@lazorkit/wallet";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import toast from "react-hot-toast";

export default function LoginPage() {
  const router = useRouter();
  const {
    connect, // Function to initiate connection
    isConnected, // Boolean: is wallet connected?
    isConnecting, // Boolean: is connection in progress?
    wallet, // Wallet info (smartWallet address)
  } = useWallet();

  const [error, setError] = useState<string | null>(null);

  // Redirect to dashboard if already connected
  useEffect(() => {
    if (isConnected && wallet?.smartWallet) {
      router.push("/transfer");   // transfer is a page I decided to use here. Be at liberty to use any of your choosing
    }
  }, [isConnected, wallet, router]);

  // We'll implement this next...
  const handleConnect = async () => {
    /* ... */
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-[#0a0a0a]">
      <div className="max-w-md w-full p-8">
        <h1 className="text-3xl font-bold text-white text-center mb-8">
          Welcome to PassPay
        </h1>

        {/* Connection button will go here */}
      </div>
    </div>
  );
}

Listing 1-3: Basic login page structure with useWallet hook

This code creates the foundation for our login page. Let's examine the key parts:

const { connect, isConnected, isConnecting, wallet } = useWallet();

The useWallet hook is the primary interface to LazorKit. We destructure four essential properties:

connect: An async function that triggers the passkey authentication flow
isConnected: A boolean that tells us if a wallet session exists
isConnecting: A boolean that's true during the authentication process
wallet: An object containing the connected wallet's smartWallet address

Let's observe the next line, shall we?

useEffect(() => {
  if (isConnected && wallet?.smartWallet) {
    router.push("/transfer");
  }
}, [isConnected, wallet, router]);

This effect runs whenever connection state changes. If the user is already connected (perhaps from a previous session stored in the browser), we automatically redirect them to the main app. The optional chaining (wallet?.smartWallet) safely handles cases where wallet might be null.

The `useWallet` Hook Returns

Property	Type	Description
`connect`	`function`	Initiates passkey authentication
`disconnect`	`function`	Clears the wallet session
`isConnected`	`boolean`	Whether a wallet is connected
`wallet`	`{ smartWallet: string }`	Wallet address info
`smartWalletPubkey`	`PublicKey \	null`
`isConnecting`	`boolean`	Loading state during connection
`signAndSendTransaction`	`function`	Signs and broadcasts transactions

Step 3: Implement Connect Function

Now, it is time to add the connection logic:

const handleConnect = async () => {
  setError(null);

  try {
    // Connect with paymaster mode for gasless transactions
    const info = await connect({ feeMode: "paymaster" });

    if (info?.credentialId) {
      // Optionally store credential for later use
      console.log("Credential ID:", info.credentialId);
    }

    toast.success("Wallet connected! 🎉");
    router.push("/transfer");
  } catch (e: unknown) {
    const err = e as Error;
    const msg = err?.message || "Connection failed";
    setError(msg);

    // User-friendly error messages
    if (msg.includes("NotAllowedError")) {
      toast.error("You cancelled the passkey prompt.");
    } else if (msg.includes("PublicKeyCredential")) {
      toast.error("Your browser does not support passkeys.");
    } else {
      toast.error("Login failed. Please try again.");
    }
  }
};

Listing 1-4: The handleConnect function that initiates passkey authentication

This function handles the entire connection flow. Let's walk through it:

const info = await connect({ feeMode: "paymaster" });

The connect function opens LazorKit's portal in the browser, triggering the WebAuthn ceremony. The feeMode: "paymaster" option tells LazorKit that future transactions should be gasless, meaning the paymaster will sponsor fees. This returns a WalletInfo object containing the new wallet's details.

if (info?.credentialId) {
  console.log("Credential ID:", info.credentialId);
}

The credentialId is a unique identifier for this passkey. You might store this for analytics or to identify returning users. The same passkey always produces the same wallet address.

if (msg.includes("NotAllowedError")) {
  toast.error("You cancelled the passkey prompt.");
}

Error handling is crucial for good UX. NotAllowedError means the user dismissed the biometric prompt—we show a friendly message rather than a cryptic error code.

Understanding `connect()` Options

There is a minor detail we should know about the feeMode:

await connect({
  feeMode: "paymaster", // Gasless transactions (recommended)
  // feeMode: "self",    // User pays gas fees
});

Fee Mode	Description
`paymaster`	LazorKit sponsors transaction fees
`self`	User pays fees from their SOL balance

So, you choose... depending on what you want your app to do.

Step 4: Display Wallet Information

Build the complete login UI:

// app/(auth)/login/page.tsx
"use client";
import { useWallet } from "@lazorkit/wallet";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import toast from "react-hot-toast";

export default function LoginPage() {
  const router = useRouter();
  const { connect, isConnected, isConnecting, wallet } = useWallet();
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (isConnected && wallet?.smartWallet) {
      router.push("/transfer");
    }
  }, [isConnected, wallet, router]);

  const handleConnect = async () => {
    setError(null);
    try {
      await connect({ feeMode: "paymaster" });
      toast.success("Wallet connected! 🎉");
    } catch (e: unknown) {
      const err = e as Error;
      const msg = err?.message || "Connection failed";
      setError(msg);

      if (msg.includes("NotAllowedError")) {
        toast.error("You cancelled the passkey prompt.");
      } else if (msg.includes("PublicKeyCredential")) {
        toast.error("Your browser does not support passkeys.");
      } else {
        toast.error("Login failed. Please try again.");
      }
    }
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-[#0a0a0a] p-4">
      <div className="max-w-md w-full">
        {/* Header */}
        <div className="text-center mb-8">
          <h1 className="text-4xl font-bold text-white mb-2">🔐 PassPay</h1>
          <p className="text-gray-400">
            No seed phrases. Just your biometrics.
          </p>
        </div>

        {/* Card */}
        <div className="bg-[#1a1a1a] rounded-2xl p-8 border border-gray-800">
          {/* Benefits */}
          <div className="space-y-3 mb-6">
            <div className="flex items-center gap-3 text-gray-300">
              <span className="text-[#14F195]">✓</span>
              <span>No passwords or seed phrases</span>
            </div>
            <div className="flex items-center gap-3 text-gray-300">
              <span className="text-[#14F195]">✓</span>
              <span>Hardware-level security</span>
            </div>
            <div className="flex items-center gap-3 text-gray-300">
              <span className="text-[#14F195]">✓</span>
              <span>Syncs across your devices</span>
            </div>
          </div>

          {/* Connect Button */}
          <button
            onClick={handleConnect}
            disabled={isConnecting}
            className="w-full py-4 px-6 bg-[#9945FF] hover:bg-[#8035E0] 
                       disabled:opacity-50 disabled:cursor-not-allowed
                       text-white font-semibold rounded-xl transition-colors"
          >
            {isConnecting ? (
              <span className="flex items-center justify-center gap-2">
                <svg className="animate-spin h-5 w-5" viewBox="0 0 24 24">
                  <circle
                    className="opacity-25"
                    cx="12"
                    cy="12"
                    r="10"
                    stroke="currentColor"
                    strokeWidth="4"
                    fill="none"
                  />
                  <path
                    className="opacity-75"
                    fill="currentColor"
                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
                  />
                </svg>
                Connecting...
              </span>
            ) : (
              "✨ Continue with Passkey"
            )}
          </button>

          {/* Footer */}
          <p className="text-xs text-gray-500 text-center mt-4">
            Powered by LazorKit • Your device is your wallet
          </p>

          {/* Error Display */}
          {error && (
            <p className="mt-4 text-sm text-red-400 text-center">{error}</p>
          )}

          {/* Success State */}
          {wallet?.smartWallet && (
            <div className="mt-4 p-4 rounded-lg bg-[#14F195]/10 border border-[#14F195]/20">
              <p className="text-sm text-[#14F195] font-semibold">
                ✓ Wallet Created!
              </p>
              <p className="text-xs text-gray-400 mt-1 font-mono break-all">
                {wallet.smartWallet}
              </p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

How It Works Under the Hood

The WebAuthn Flow

User clicks "Connect"

Your app calls connect({ feeMode: "paymaster" })

LazorKit Portal opens

Browser triggers WebAuthn ceremony
User sees biometric prompt and proceeds with it

Passkey created/retrieved

Credential stored in Secure Enclave
Syncs via platform (iCloud/Google)

Smart wallet derived

PDA derived from credential
Same passkey = same wallet address

Connection complete

wallet.smartWallet contains address
Ready for transactions

⚠️ Note: While passkeys remove the need for seed phrases, users should understand device recovery and platform sync implications (iCloud / Google Password Manager).

Next Steps

Explore More LazorKit examples...

Gasless Transactions - Send SOL without paying fees
On-Chain Memos - Write permanent blockchain messages
Native SOL Staking - Multi-instruction transactions with passkeys
Subscription Payments - Recurring payment flows
Session Management - Keep users logged in across sessions

📚 View the complete documentation: PassPay on GitHub includes 11 step-by-step tutorials for both Web (Next.js) and Mobile (React Native) with full working code.

Generating a Simple Report with jsreport and express.js: The Lazy Way

Onwuka David — Sat, 20 Jul 2024 21:50:50 +0000

Ever heard of the term "lazy programmer"? 🦥:) I recently heard that being one is actually a good thing. You may ask why. Well, It is actually not so difficult to understand.

A "lazy programmer" is a term often used humorously to describe a programmer who strives to achieve maximum efficiency with minimal effort. The idea is that by being "lazy," they focus on writing clean, maintainable, and reusable code to avoid repetitive tasks.

That is the idea here. You need to quickly generate a report using jsreport? Then this article is for you.

What you'll need

To follow up with this tutorial, you'll need these:

Latest version of Node.js and npm installed on your computer
A basic knowledge of HTML, CSS, and Javascript
A basic knowledge of Express.js

You are sure you've met the requirements above? Let's go then.

Installing jsreport

So first, we'll need to install and configure jsreport. Head over to https://jsreport.net
Click on "Download" and you'll be taken to their download page.

You'll notice that there are popular platforms installation manuals which you can follow depending on the platform you are using. For this tutorial, we are going to be using Windows, so click on the Windows icon and let's start the installation process.

Go to the command prompt on your desktop and type this to create a folder called "jsreportapp"

mkdir jsreportapp
Then we move into that folder by typing this on the command prompt:

cd jsreportapp
Next, we install jsreport:

npm i -g @jsreport/jsreport-cli
This command will install the jsreport service for you to use on the already created "jsreportapp" folder.

Next command to run would be one to initialize jsreport in your app:

jsreport init
We are now going to run a command to configure the jsreport service according to our needs:

jsreport configure
This will pop up some questions for you to answer. Your answers should depend on what you are using the service for. Since we are trying to create a quick report generating service, We're going to make things as simple as possible. 😉
See a snapshot below of what we are working with. Feel free to customize yours according to your preferences.

Now, we finish our installation process by running this command:

jsreport start
Now you should be able to open a browser and reach your jsreportapp locally on the port you set for yourself earlier. In this case, it is going to be at: http://localhost:5488

Building a local server

For this, our basic knowledge of Express.js would be really useful. To create a local server, head over to the command prompt and run this:

mkdir my-express-app cd my-express-app npm init -y
The command above creates a new directory for your local server, navigates into that directory and runs "npm init" to create a package.json file. You can accept the default settings or customize them as needed.

Next we install Express:

npm install express
Having installed express, open your folder with your preferred code editor, create a file called "index.js" and add up the code below to set up your basic express server:

import express from "express";

const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Hello, World!');
});

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

Notice that the code above uses ES6 modules instead of Commonjs. So you may want to resolve this before moving on.

Afterwards, start your express server by running the following command in your terminal:

node index.js

You should see a message indicating that the server is running. Open your browser and go to http://localhost:3000 to see the "Hello, World!" message.

Generating a report

Now we are going to generate a simple downloadable html report. To do this, we create a "public" folder in our "my-express-app" folder. In the public folder, we then create an "index.html" file. So head over there and paste this simple report template:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        font-family: Arial, sans-serif;
      }
      .report {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
        background-color: #f9f9f9;
        border: 1px solid #ddd;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      }
      h1,
      h2,
      h3 {
        color: #333;
      }
      p {
        line-height: 1.6;
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <div class="report">
      <h1>Monthly Report</h1>
      <p>This is a simple HTML report template.</p>

      <h2>Summary</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada
        magna eu libero lacinia ultrices.
      </p>

      <h2>Details</h2>
      <ul>
        <li>Item 1: Description of item 1</li>
        <li>Item 2: Description of item 2</li>
        <li>Item 3: Description of item 3</li>
      </ul>

      <h2>Conclusion</h2>
      <p>
        Nulla facilisi. Vestibulum ante ipsum primis in faucibus orci luctus et
        ultrices posuere cubilia curae.
      </p>
    </div>
  </body>
</html>

Navigate to your "index.js" file and import the following modules:

import { dirname } from "path";
import { fileURLToPath } from "url";
import jsreportClient from "@jsreport/nodejs-client";
import fs from "fs/promises";
import path from "path";

Next, copy the code below to handle the report generation functionality

// Initialize the client with the server URL: This will link the express server to the jsreport server
const client = jsreportClient("http://localhost:5488/");

// programatically derives the file path
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

// Function to read the HTML template file
async function readHtmlTemplateFile(filename) {
  try {
    const filePath = path.join(__dirname, "/Public/index.html"); // Specifies the path to the html file
    const htmlContent = await fs.readFile(filePath, "utf8");
    return htmlContent;
  } catch (err) {
    throw new Error(`Error reading HTML template file: ${err.message}`);
  }
}

// Handle GET request for /report route
app.get("/report", async (req, res, next) => {
  try {
    const htmlContent = await readHtmlTemplateFile("report-template.html");

    const response = await client.render({
      template: {
        content: htmlContent, // Pass the HTML content read from the file
        recipe: "html", // This specifies the recipe as 'html'
        engine: "none", // No templating engine used ('none' for static HTML)
      },
    });

    // Set headers to indicate file download
    res.setHeader("Content-Disposition", 'attachment; filename="report.html"');
    res.setHeader("Content-Type", "text/html");
    response.pipe(res); // Stream HTML directly to the client for download

    // Pipe the response to the client
    response.pipe(res);
  } catch (err) {
    next(err); // Pass any errors to Express error handling middleware
  }
});

The final javascript code in the "index.js" file should look like this:

import express from "express";
import { dirname } from "path";
import { fileURLToPath } from "url";
import jsreportClient from "@jsreport/nodejs-client";
import fs from "fs/promises";
import path from "path";

const app = express();
const port = 3000;

// Home
app.get("/", (req, res) => {
  res.send("Hello, World!");
});

// Initialize the client with the server URL: This will link the express server to the jsreport server
const client = jsreportClient("http://localhost:5488/");

// programatically derives the file path
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

// Function to read the HTML template file
async function readHtmlTemplateFile(filename) {
  try {
    const filePath = path.join(__dirname, "/Public/index.html"); // Specifies the path to the html file
    const htmlContent = await fs.readFile(filePath, "utf8");
    return htmlContent;
  } catch (err) {
    throw new Error(`Error reading HTML template file: ${err.message}`);
  }
}

// Handle GET request for /report route
app.get("/report", async (req, res, next) => {
  try {
    const htmlContent = await readHtmlTemplateFile("report-template.html");

    const response = await client.render({
      template: {
        content: htmlContent, // Pass the HTML content read from the file
        recipe: "html", // This specifies the recipe as 'html'
        engine: "none", // No templating engine used ('none' for static HTML)
      },
    });

    // Set headers to indicate file download
    res.setHeader("Content-Disposition", 'attachment; filename="report.html"');
    res.setHeader("Content-Type", "text/html");
    response.pipe(res); // Stream HTML directly to the client for download

    // Pipe the response to the client
    response.pipe(res);
  } catch (err) {
    next(err); // Pass any errors to Express error handling middleware
  }
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

Next is to restart your express server:

node index.js

Once it has been restarted without any issues, head over to your browser and naviagte to http://localhost:3000/report

This would download a simple HTML report for you, that you can preview immediately.

That's it guys! There you go! A lazy programmer's approach to generating reports using the jsreport service. 😅

I'll see you soon with another article. 👋

UNDERSTANDING UML DIAGRAMS BY IMPLEMENTING A MESSAGING APPLICATION

Onwuka David — Mon, 22 Apr 2024 21:58:11 +0000

“System modeling is the process of developing abstract models of a system, with each model presenting a different view or perspective of that system. System modelling now usually means representing a system using some form of graphical notation based on diagram types in the Unified Modelling Language (UML).” – Software Engineering (Somerville, 2015)

System modelling is a valuable practice in software engineering because it provides a structured approach to plan effectively and to improve development efficiency and productivity.

In this article, a comprehensive overview of the design for a secure and user-friendly messaging application tailored specifically for businesses, is provided. This innovative app aims to streamline internal communication, fostering collaboration and boosting overall productivity.

Imagine a platform where employees can seamlessly:

Connect Instantly: Send and receive messages, images, videos, and other multimedia content for clear and efficient communication.

Stay Informed: Never miss a beat with real-time notifications for new messages and critical events.

Organize Conversations: Effortlessly manage your communication with features like message search and customizable profiles.

Enhance Security: Enjoy peace of mind knowing your messages are protected with robust security measures.

This article details the application's design using a type of system model known as a Unified Modelling Language (UML) diagram, to illustrate the functionalities and underlying structure. The UML diagrams to be discussed here are the Use case and class diagrams.

What is UML?

In simple terms, a Unified Modelling Language (UML) is a visual modelling language used in Software Engineering, as a means to provide a standard way to visualize the design of a system. The UML can be basically divided into three main groups:

Structure models - This describes the structure of the data that is processed by the system.
Behavior models - This portrays the dynamic behaviour of the system and how it responds to events.
Interaction models - This illustrates the interactions between a system and its environment.

Class diagrams and Use case diagrams are grouped under Structure models and interaction models, respectively.
While Class diagrams are used when developing an object-oriented system model, in order to show the classes in a system and the associations between these classes, Use case diagrams are simple descriptions of what a user expects from a system.

We will be visualizing the workings of a “Simple Messaging Application” using a Use case diagram and a Class diagram.

Use case Diagram

The Use case diagram describes how users interact with a system. In this system (Messaging App), the primary actors – New User and Existing User, interacts directly with the Messaging App. Their roles are further explained below:

Existing User: Represents employees within the company who have already created an account and can access the full functionalities of the application.
New User: Represents new employees who need to register for an account before utilizing the app's features.

The secondary actor – Notification Service, provides services or sends notifications for different usage scenarios, the primary actors may encounter while using the App.

From the diagram above, we can see that various functionalities (use cases) are depicted. Some of these functionalities are creating accounts, logging into an account, sending and receiving messages, and even managing contacts.

Class Diagram

The diagram above, describes the classes in the system, their attributes and their methods. Each class, has its own unique functionality encapsulated within it.

The Class Diagram focuses on the core functionalities of the application and the classes that represent them. These classes include:

Account class: This class Manages user accounts (creation, login, profile management)

Message class: This class represents sent and received messages.

Message History class: This class stores the history of messages exchanged between users.

Notification class: This class Handles sending notifications to users about new messages or events.

Media content class: This class handles media contents like videos, pictures and audio messages.

Classes are also related with each other by specifying different relationships.

In a one to many relationship, one class can be associated with multiple classes of another type. This is the most common type of relationship.

In a many to many relationship, multiple classes can be associated with multiple classes of another type.

Lastly, in a one to one relationship, one class can only be associated with another class.

By utilizing both the use case and class diagrams, a comprehensive understanding of your system’s functionality and structure is gained. While they serve different purposes, they work together to provide a better design and development.

References

[1]. Wikipedia.[2024] Wikipedia [Online]. Available at:
https://en.wikipedia.org/wiki/Unified_Modeling_Language

[2]. Ian Somerville, E.(2015). Software Engineering. Pearson.

DEV Community: Onwuka David

Passkey Login & Smart Wallet Creation on Solana with React Native and LazorKit — No More Seed Phrases!

Who this tutorial is for

What are Passkeys?

Prerequisites

Step 1: Setup the Provider

Why maybeCompleteAuthSession()?

Step 2: Create the Connection Screen

The useWallet Hook Returns

Step 3: Implement Connect Function

The connect Options

The WalletInfo Object

Step 4: Display Wallet Information

Display Address Helpers

Step 5: Handle Disconnect

What Disconnect Does

Complete Code Example

How It Works Under the Hood

1. Passkey Creation (First Time User)

2. Passkey Authentication (Returning User)

Next Steps

Passkey Login & Smart Wallet Creation on Solana with Next.js and LazorKit — No More Seed Phrases!

Who this tutorial is for

What are Passkeys?

Prerequisites

Step 1: Setup the Provider

Step 2: Create the Login Page

The useWallet Hook Returns

Step 3: Implement Connect Function

Understanding connect() Options

Step 4: Display Wallet Information

How It Works Under the Hood

The WebAuthn Flow

Next Steps

Generating a Simple Report with jsreport and express.js: The Lazy Way

What you'll need

Installing jsreport

Building a local server

Generating a report

UNDERSTANDING UML DIAGRAMS BY IMPLEMENTING A MESSAGING APPLICATION

What is UML?

Use case Diagram

Class Diagram

References

Why `maybeCompleteAuthSession()`?

The `useWallet` Hook Returns

The `connect` Options

The `WalletInfo` Object

The `useWallet` Hook Returns

Understanding `connect()` Options