Pusher auth for a Next.js app.

pusher-auth.ts

// pages/pusher/pusher-auth.ts

import { pusher } from "backend/pusher"
import { NextApiHandler, NextApiRequest } from "next"

interface PushAuthRequest extends NextApiRequest {
  body: {
    socket_id: string
    channel_name: string
  }
}

const PushAuthHandler: NextApiHandler = (req: PushAuthRequest, res) => {
  const { socket_id, channel_name } = req.body

  res.send(
    pusher.authenticate(socket_id, channel_name, {
      user_id: id,
      user_info: { 
        // ...presence info here
      },
    })
  )
}

export default PushAuthHandler

pusher.ts

// backend/pusher.ts

export const pusher = new Pusher({
  appId: process.env.NEXT_PUBLIC_PUSHER_APP_ID,
  key: process.env.NEXT_PUBLIC_PUSHER_KEY,
  secret: process.env.NEXT_PUBLIC_PUSHER_SECRET,
  cluster: process.env.NEXT_PUBLIC_PUSHER_CLUSTER,
  useTLS: true,
})

usePusher.ts

// hooks/usePusher.ts

import Pusher, { Channel } from "pusher-js"

function usePusher(roomId: string) {
  React.useEffect(() => {
    const channel = new Pusher(process.env.NEXT_PUBLIC_PUSHER_KEY, {
      cluster: process.env.NEXT_PUBLIC_PUSHER_CLUSTER,
      authEndpoint: "/api/pusher-auth",
    })
      .subscribe("presence-" + roomId)

  return () => {
    channel.disconnect()
  }, [roomId])

  return channel
}