Skip to main content

Installation

Get started with Midnight Auth by installing the package and setting up the required dependencies.

Install Package​

Choose your preferred package manager:

npm install @uppzen/midnight-auth

Import Styles​

Add the CSS import to your app's entry point or root layout:

app/layout.tsx or pages/_app.tsx
import '@uppzen/midnight-auth/styles.css'

Requirements​

React 18+​

Midnight Auth requires React 18 or higher. Make sure your project is using a compatible version.

package.json
{
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }
}

Node.js 18+​

Ensure you're using Node.js version 18 or higher for development.

node --version
# Should output v18.0.0 or higher

Lace Midnight Wallet​

Users need the Lace Midnight wallet browser extension installed to connect their wallets.

tip

Direct users to install the Lace wallet from lace.io if they don't have it yet.

TypeScript Support​

Midnight Auth is written in TypeScript and includes type definitions out of the box. No additional @types packages are needed.

import type {
  WalletState,
  MidnightAuthContextValue,
  Session
} from '@uppzen/midnight-auth'

Verify Installation​

After installation, verify everything is working by importing the library:

import { MidnightAuthProvider, useMidnightAuth } from '@uppzen/midnight-auth'

If there are no errors, you're ready to move on to the Quick Start guide!

Troubleshooting​

Module not found​

If you see a "Module not found" error, make sure you've installed the package correctly:

npm install @uppzen/midnight-auth

CSS not loading​

Ensure you've imported the CSS file in your root layout or entry point:

import '@uppzen/midnight-auth/styles.css'

TypeScript errors​

If you encounter TypeScript errors, ensure your tsconfig.json includes:

tsconfig.json
{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "jsx": "react-jsx"
  }
}