🕹️ Plug-n-Play SvelteKit Quickstart

A starter template for building Internet Computer (IC) applications with integrated authentication using the @windoge98/plug-n-play wallet adapter. This template uses SvelteKit for the frontend and uses Rust for the backend.

✨ Features

• Ready-to-use frontend and backend canisters
• ICRC authentication standards implementation
• Multi-wallet authentication support:
  • Internet Identity
  • Plug
  • NFID
  • Oisy
  • Phantom (Solana)
  • Solflare (Solana)
  • Backpack (Solana)
  • WalletConnect (Solana)
• Svelte-based frontend with authentication stores
• TypeScript throughout the codebase

📋 Prerequisites

• DFX (Internet Computer SDK)
• Node.js (v16+)
• npm

📁 Project Structure

src/
├── declarations/            # Generated TypeScript interfaces
├── pnp_skeleton_backend/    # Backend canister code
│   └── src/
│       └── authentication.rs # Authentication standards implementation (ICRC-21, ICRC-34, ICRC-28)
└── pnp_skeleton_frontend/   # Frontend canister code
    └── src/
        ├── lib/
        │   ├── components/  # Reusable components (including SignIn)
        │   ├── config/      # Configuration files including auth.config.ts
        │   └── stores/      # Svelte stores including auth.ts
        └── routes/          # Application routes
            ├── +page.svelte # Main page with greeting form
            └── auth/        # Authentication pages

🚀 Getting Started

🔧 Installation

1. Clone this repository:

   git clone <repository-url>
   cd pnp_sveltekit_skeleton
   

2. Install dependencies:

   npm install
   

3. Start the local Internet Computer replica:

   dfx start --clean --background
   

4. Deploy the canisters locally:

   dfx deploy
   

⚙️ Configuration

The authentication system is configured in src/pnp_skeleton_frontend/src/lib/config/auth.config.ts. This file initializes the Plug-n-Play system with various wallet adapters.

Key configuration options:

• adapters: Which authentication providers to enable/disable
• derivationOrigin: The host url used to derive the principal ID, this is handled automatically to point to your raw canister url, only override if you know what you're doing
• delegationTargets: Canister IDs that the frontend is allowed to call on the user's behalf
• localIdentityCanisterId: Internet Identity canister ID for local development
• siwsProviderCanisterId: The "Sign in with Solana" provider canister ID for local development

🔄 WalletConnect Configuration

For WalletConnect integration, you'll need to:

1. Get a project ID from the WalletConnect Dashboard
2. Update the projectId in the walletconnectSiws adapter configuration
3. Customize other parameters like appName, appDescription, etc.

🔒 ICRC Authentication Standards

The backend canister implements several Internet Computer authentication standards:

💬 ICRC-21: Consent Message Standard

Provides human-readable consent messages when a user's wallet interacts with the canister. This enhances security by clearly communicating what actions are being requested. Example in src/pnp_skeleton_backend/src/authentication.rs

#[query]
pub fn icrc21_canister_call_consent_message(consent_msg_request: ConsentMessageRequest) -> Result<ConsentInfo, ErrorInfo>

🔑 ICRC-34: Delegation Standard

Enables secure delegation of identity, allowing the frontend to perform actions on behalf of the user after authentication. Example in src/pnp_skeleton_backend/src/authentication.rs

#[query]
pub fn icrc_34_get_delegation(request: DelegationRequest) -> Result<DelegationResponse, DelegationError>

#[update]
pub fn icrc_34_delegate(request: DelegationRequest) -> Result<DelegationResponse, DelegationError>

#[update]
pub fn icrc_34_revoke_delegation(request: RevokeDelegationRequest) -> Result<(), DelegationError>

🛡️ ICRC-28: Trusted Origins

Specifies which origins (domains) are allowed to interact with the canister, enhancing security by preventing unauthorized access. Example in src/pnp_skeleton_backend/src/authentication.rs

#[query]
fn icrc28_trusted_origins() -> Icrc28TrustedOriginsResponse

💻 Development

1. Start the development server:

   npm run dev
   

2. Visit the local frontend URL shown in the terminal (typically http://localhost:3000)

🔐 Authentication Usage

The template comes with a ready-to-use authentication system:

1. Main page (/) has a login button that redirects to /auth
2. Authentication page (/auth) shows a SignIn component with wallet options
3. After authentication, user info is displayed including:
   • Principal ID
   • Subaccount
   • Solana address (for supported wallets)
   • Adapter data

📝 Code Examples

Connect to a wallet:

import { auth, connectWallet } from "$lib/stores/auth";

const walletList = auth.getEnabledWallets(); // Get a list of enabled wallets
const selectedWallet = walletList[0]; // Select the first wallet from the list
await connectWallet(selectedWallet.id); // The wallet id field gets passed here.

Check connection status:

import { auth } from "$lib/stores/auth";

$effect(() => {
  if ($auth.isConnected) {
    // User is authenticated
  }
})

Interacting with the backend canister:

import { backendActor } from "$lib/canisters";

// Call a method on the backend
const actor = backendActor({ anon: true })
const result = await actor.greet("World");

🚀 Deployment

Deploy to the IC mainnet:

dfx deploy --network ic

📄 License

MIT