Skip to main content

Quick Start

Get Midnight Auth up and running in your application in just a few steps.

Step 1: Set up the Provider​

For Next.js App Router, create a client component wrapper for the provider:

app/providers.tsx
'use client'

import { MidnightAuthProvider } from '@uppzen/midnight-auth'
import '@uppzen/midnight-auth/styles.css'

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <MidnightAuthProvider
      sessionTimeout={24 * 60 * 60 * 1000} // 24 hours
      autoConnect={true}
      onConnect={(walletState) => console.log('Connected:', walletState)}
      onError={(error) => console.error('Error:', error)}
    >
      {children}
    </MidnightAuthProvider>
  )
}

Then use it in your root layout:

app/layout.tsx
import { Providers } from './providers'

export default function RootLayout({ 
  children 
}: { 
  children: React.ReactNode 
}) {
  return (
    <html lang="en">
      <body>
        <Providers>
          {children}
        </Providers>
      </body>
    </html>
  )
}
For Pages Router

If you're using Next.js Pages Router, wrap your app in _app.tsx:

pages/_app.tsx
import { MidnightAuthProvider } from '@uppzen/midnight-auth'
import '@uppzen/midnight-auth/styles.css'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <MidnightAuthProvider>
      <Component {...pageProps} />
    </MidnightAuthProvider>
  )
}

Step 2: Add the Connect Button​

Use the MidnightConnectButton component in your pages:

app/page.tsx
'use client'

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

export default function Page() {
  const { isConnected, walletState } = useMidnightAuth()

  return (
    <div>
      <h1>My Midnight App</h1>
      <MidnightConnectButton />
      
      {isConnected && walletState && (
        <div>
          <p>✅ Wallet Connected!</p>
          <p>Address: {walletState.address}</p>
        </div>
      )}
    </div>
  )
}

Step 3: Access Wallet Data​

Use the useMidnightWallet hook to access wallet information:

'use client'

import { useMidnightWallet } from '@uppzen/midnight-auth'

export default function WalletInfo() {
  const { 
    address, 
    balance, 
    balances, 
    isConnected 
  } = useMidnightWallet()

  if (!isConnected) {
    return <p>Please connect your wallet</p>
  }

  return (
    <div>
      <h2>Wallet Information</h2>
      <p>Address: {address}</p>
      <p>Total Balance: {balances?.total}</p>
      <p>Shielded: {balances?.shielded}</p>
      <p>Unshielded: {balances?.unshielded}</p>
    </div>
  )
}

Step 4: Sign Data or Submit Transactions​

Sign messages or submit transactions using the wallet:

'use client'

import { useMidnightWallet } from '@uppzen/midnight-auth'
import { useState } from 'react'

export default function SignMessage() {
  const { address, signData, isConnected } = useMidnightWallet()
  const [signature, setSignature] = useState<string>('')

  const handleSign = async () => {
    if (!address || !signData) return
    
    try {
      const result = await signData(address, 'Hello Midnight Network!')
      setSignature(result.signature)
      console.log('Signature:', result.signature)
      console.log('Key:', result.key)
    } catch (error) {
      console.error('Failed to sign:', error)
    }
  }

  return (
    <div>
      <button 
        onClick={handleSign} 
        disabled={!isConnected}
      >
        Sign Message
      </button>
      {signature && <p>Signature: {signature}</p>}
    </div>
  )
}

What's Next?​

Now that you have the basics working, explore more features:

Common Patterns​

Protected Routes​

Protect routes that require wallet connection:

import { ProtectedRoute } from '@uppzen/midnight-auth'

export default function Dashboard() {
  return (
    <ProtectedRoute fallback={<div>Please connect your wallet</div>}>
      <DashboardContent />
    </ProtectedRoute>
  )
}

Session Management​

Track and manage user sessions:

import { useMidnightSession } from '@uppzen/midnight-auth'

export default function SessionInfo() {
  const { session, isExpired, timeRemaining, refreshSession } = useMidnightSession()

  if (!session) return <p>No active session</p>

  return (
    <div>
      <p>Connected: {new Date(session.connectedAt).toLocaleString()}</p>
      {isExpired ? (
        <p>Session expired</p>
      ) : (
        <p>Time remaining: {Math.floor(timeRemaining / 60000)} minutes</p>
      )}
      <button onClick={refreshSession}>Refresh Session</button>
    </div>
  )
}

Need Help?​