Skip to main content

​
1. Set up the Provider

Wrap your application with the DeploymentProvider and configure your platform adapter: 
import { DeploymentProvider } from '@snipextt/wacht'
import { NextjsAdapter } from '@snipextt/wacht-nextjs'

export default function App({ children }) {
  return (
    <DeploymentProvider
      publicKey="pk_your_public_key"
      platformAdapter={NextjsAdapter}
    >
      {children}
    </DeploymentProvider>
  )
}

​
2. Add Authentication Components

Use the pre-built components for instant authentication: 
import { SignInForm, SignedIn, SignedOut, UserButton } from '@snipextt/wacht'

export default function AuthExample() {
  return (
    <>
      <SignedOut>
        <div>
          <h1>Welcome to Our App</h1>
          <SignInForm />
        </div>
      </SignedOut>
      
      <SignedIn>
        <div>
          <h1>Welcome back!</h1>
          <UserButton />
        </div>
      </SignedIn>
    </>
  )
}

​
3. Use Hooks for Custom Logic

Build custom authentication flows with hooks: 
import { useSignin, useSession } from '@snipextt/wacht'

function CustomAuth() {
  const { signIn, isLoading } = useSignin()
  const { user } = useSession()
  
  const handleSignIn = async () => {
    try {
      await signIn({
        strategy: 'plain_email',
        email: '[email protected]',
        password: 'password'
      })
    } catch (error) {
      console.error('Sign-in failed:', error)
    }
  }
  
  if (user) {
    return <div>Welcome, {user.firstName}!</div>
  }
  
  return (
    <button onClick={handleSignIn} disabled={isLoading}>
      {isLoading ? 'Signing in...' : 'Sign In'}
    </button>
  )
}

​
4. Add Organization Features

Enable multi-tenant functionality: 
import { OrganizationSwitcher, useOrganization } from '@snipextt/wacht'

function OrganizationExample() {
  const { currentOrganization } = useOrganization()
  
  return (
    <div>
      <h2>Current Organization: {currentOrganization?.name}</h2>
      <OrganizationSwitcher />
    </div>
  )
}

​
Next Steps