# Auth by Watchen - Preview of a free Privy alternative without vendor lock-in

Source: https://github.com/nickolastazes/auth-by-watchen-preview

## Summary

Auth by Watchen is a free, opinionated Next.js boilerplate that combines social logins (Google, Twitter, Discord, Farcaster, Telegram) with embedded Ethereum wallets, aimed at founders building Web3 apps for mainstream users without vendor lock-in. It is built on Next.js v15.0.2 with the Pages Router, uses NextAuth.js and MongoDB, and is preconfigured for the Sepolia Base Network. The latest changelog entry, dated 2025-05-27, adds props that let developers choose which sign-in providers appear and set the top image. The project is a preview released for testing, and its full license terms have not yet been announced.

## Article

Auth by Watchen (PREVIEW)

Auth by Watchen is an opinionated Next.js boilerplate with built-in authentication that combines traditional social logins with embedded crypto wallets, designed to help founders build Web3 applications for mainstream users without vendor lock-in. The project is configured to work with Sepolia Base Network by default.

✨ Features

🔐 Multi-Platform Authentication

Social logins via Google, Twitter, Discord

Web3 native auth with Farcaster and EOA

Powered by NextAuth.js

🚀 Web3 Integration

Embedded Ethereum Account Generation

Wagmi Integration

Transak Integration for On/Off-Ramp with improved Selling UX

Pre-configured for Sepolia Base Network

📦 Developer Experience

Built on Next.js v15.0.2 (Pages Router)

Type-safe with TypeScript

MongoDB Integration for data persistence

Responsive design out of the box

🛠️ Architecture

Clean project structure

Production-ready configuration

Easy to customize and extend

🔮 Authentication Flow Diagram

🚀 Quick Start

Clone the repository:

git clone https://github.com/nickolastazes/auth-by-watchen-preview cd auth-by-watchen-preview

Install dependencies:

Configure environment variables:

cp .env.local.example .env.local # Follow the configuration steps in .env.local

Set up MongoDB:

You'll need to set up a MongoDB database and add the connection string to your environment variables. The application will automatically create the required collections with the following schema:

📚 Database Schema

The boilerplate uses MongoDB with the following collection structure:

Collection: users

Field Type Description

_id ObjectId Primary key, auto-generated

created_at Date Creation timestamp

provider string Authentication provider (e.g., 'google', 'twitter')

username_email string User's username or email

address string Ethereum wallet address

encrypted_private_key string Encrypted wallet private key

iv string Initialization vector for encryption

salt string Salt for encryption

export_account boolean Flag for account export status

Start development server:

📁 Project Structure

├── components/ # Reusable React components │ ├── Navbar.tsx # Navigation component │ └── WatchenAuth/ # Authentication Components │ ├── AuroraBackground.tsx # Background animation │ ├── FarcasterButton.tsx # Farcaster login │ ├── TelegramButton.tsx # Telegram login │ ├── MainLogin.tsx # Main login component │ ├── TransakOffRamp.tsx # Crypto selling │ ├── TransakOnRamp.tsx # Crypto buying │ ├── Wallet.tsx # Wallet management │ └── WalletUi/ # Wallet UI components │ ├── EmbeddedWalletUi.tsx │ ├── ExternalWalletUi.tsx │ └── WalletSkeleton.tsx ├── lib/ # Core library code │ └── mongodb.ts # MongoDB client configuration ├── pages/ # Next.js pages │ ├── _app.tsx # App configuration │ ├── _document.tsx # Document setup │ ├── app.tsx # Main app page │ ├── index.tsx # Landing page │ ├── sign-in/ # Auth pages │ │ └── index.tsx # Sign in page │ └── api/ # API endpoints │ ├── auth/ # NextAuth configuration │ │ └── [...nextauth].ts │ ├── proxy/ # Proxy endpoints │ │ └── telegram-image.ts │ └── user/ # User management endpoints │ ├── check.ts │ ├── create.ts │ └── manage.ts ├── hooks/ # Custom React hooks │ └── useWallet.ts # Wallet management hook ├── styles/ # Global styles │ └── globals.css # Tailwind & custom styles ├── types/ # TypeScript definitions │ ├── next-auth.d.ts # Auth type extensions │ └── database.ts # Database type definitions ├── utils/ # Helper functions │ ├── cn.ts # Class name utilities │ ├── db.ts # Database utilities │ └── embeddedWalletClient.ts # Wallet client configuration ├── public/ # Static assets │ └── auth-by-watchen.svg ├── middleware.ts # Next.js middleware ├── next.config.mjs # Next.js configuration ├── postcss.config.mjs # PostCSS configuration ├── tailwind.config.ts # Tailwind configuration ├── tsconfig.json # TypeScript configuration ├── package.json # Project dependencies └── .env.local.example # Environment variables template

🌐 Network Configuration

This boilerplate is pre-configured to work with the Sepolia Base Network. To switch to a different network, you'll need to modify the network configuration in these files:

pages/_app.tsx - Update the chain configuration and RPC endpoints

utils/embeddedWalletClient.ts - Update the public client chain configuration

components/WatchenAuth/WalletUi/EmbeddedWalletUi.tsx - Update the chain import

Test your application with test tokens

Interact with Base's testnet infrastructure

Deploy and test smart contracts

Use Transak's testing environment for on/off ramp features

To switch to a different network, modify the network configuration in your environment variables.

🛣️ Roadmap

📱 Progressive Web App (PWA)

Native app-like experience on mobile devices

Push notifications support

Offline functionality

🔒 Privacy & Security

Snowflake-Tor integration for enhanced privacy

Censorship resistance capabilities

🌉 Cross-Chain Functionality

Relay integration or alternative (eg Across)

📱 Mobile Platform Support

iOS native app support

Android native app support

🔑 Extended Authentication

Email authentication

Passkey support

Phone number verification

Apple Sign-in

🧠 Smart Ethereum Accounts

ERC-4337 Account Abstraction support

Smart account creation and management

🤝 Support, Bugs and Suggestions

Reach out:

Twitter: @nickolas_tazes

Farcaster: @tazes

📋 Changelog

Security and account changes

The server now verifies Telegram login data.

The server now verifies Farcaster sign-in data and Ethereum SIWE signatures.

Wallet records now use the provider account ID. A user name change does not change wallet ownership.

Account deletion requires an active session, a confirmation value, and a low wallet balance.

Private-key export requires an explicit confirmation. Normal wallet actions do not return a private key to the browser.

The Telegram image proxy was removed. The browser loads approved HTTPS image URLs directly.

Wallet and transaction changes

The server signs embedded-wallet transactions.

Transaction values use exact integer values. The Max action keeps funds for transaction fees.

The wallet UI blocks an external wallet when its address does not match the signed-in address.

The wallet UI is split into smaller account and transfer components.

Transak setup now waits for a valid wallet address and reports setup errors.

Configuration and maintenance changes

Base Sepolia settings are in one configuration file.

WalletConnect is enabled only when its project ID is set.

Telegram now needs TELEGRAM_BOT_TOKEN on the server and NEXT_PUBLIC_TELEGRAM_BOT_ID in the client.

TypeScript now uses bundler module resolution. A CSS type declaration supports global CSS imports.

Unused API routes and wallet helper files were removed.

[0.0.5] - 2025-05-27

Added

WatchenAuth component in the sign-in page now accepts the following props:

providers: an array of provider IDs (e.g., ['google', 'x', 'wallet']) to control which authentication providers are shown and in what order.

img: a string for the image path to display at the top of the sign-in UI.

Only the selected providers are rendered, in the order given by the providers prop.

If no providers prop is specified, all providers are shown by default.

The image at the top of the sign-in UI is now configurable via the img prop.

Changed

Developers can now configure which providers to display and the top image without modifying the WatchenAuth.tsx component directly.

[0.0.4] - 2025-01-03

Added

Telegram provider integration in MainLogin component

Enhanced loading state management in FarcasterButton

Improved error handling across authentication components

Changed

Streamlined Wallet component structure for better maintainability

Refactored user management API endpoints for improved efficiency

Updated MainLogin component with expanded social provider options

Fixed

Removed deprecated console error logs

Enhanced error handling in authentication flow

Improved loading state consistency across components

[0.0.3] - 2024-12-30

Enhanced

Implemented Suspense loading state for Wallet component with new WalletSkeleton

Improved transaction handling in TransakOffRamp component

Updated EmbeddedWalletUi to support loading states and smoother transitions

Changed

Removed deprecated decrypt-key API endpoint

Streamlined transaction signing process for better reliability

Consolidated wallet loading states across components

Fixed

Transaction handling edge cases in TransakOffRamp

Loading state inconsistencies in wallet UI components

Improved error handling during transaction signing

[0.0.2] - 2024-12-23

Changed

Migrated from Supabase to MongoDB for improved flexibility and scalability

Updated database schema and related utilities

Enhanced error handling in API endpoints

Added

MongoDB integration with connection pooling

New database utility functions in utils/db.ts

Improved type safety for database operations

Fixed

Database timeout issues with long-running queries

Connection handling for concurrent requests

Type definitions for database models

[0.0.1] - 2024-11-16

Added

Initial release with Supabase integration

Multi-platform authentication support

Web3 wallet integration

Basic user management features

📝 License

This preview release is available for testing purposes. Full license terms will be announced with the official release.

## Comments

**tudorizer.eth**: I would love to see a bit of a visual diagram how everything connects together.

**@macbudkowski**: Tested Twitter log-in, works flawlessly. Is there a way to also log in via Telegram?

**tazes.eth**: @tudorizer.eth
A diagram is a great suggestion! I should add it to the README file.

@macbudkowski.eth
Glad it worked! Auth uses next-auth for authentication. Unfortunately, it does not support telegram.

**tudorizer.eth**: @tazes.eth, looking forward to it.

**tazes.eth**: @tudorizer.eth
I added the diagram! I hope it's clear and it helps to better understand Auth by Watchen

**tudorizer.eth**: @tazes.eth

looks great. Plain black and white does the job, but you went the extra mile! :)