@userjot/next

UserJot - Customer Feedback Platform

NPM Version Documentation

## Installation ### Using npm ```bash npm install @userjot/next ``` ### Using yarn ```bash yarn add @userjot/next ``` ### Using pnpm ```bash pnpm add @userjot/next ``` ## Configuration (UserJot Dashboard) Before using automatic login features, ensure you've configured your UserJot project. To learn more about how to do this, please refer to the [UserJot documentation](https://userjot.com/help). ## Usage (Setting up the Provider) The `@userjot/next` package provides a `UserJotProvider` to initialize the UserJot SDK within your Next.js application. **App Directory:** In the `app` directory, import `UserJotProvider` and include it in the `` of your root layout component: ```tsx import { UserJotProvider } from "@userjot/next"; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( {/* Other head elements */} {/* Your layout */}
{children}
); } ``` Replace `` with your actual UserJot Project ID, which can be found on the **Settings > SSO** page in your UserJot dashboard. **Pages Directory:** In the `pages` directory, wrap your custom `_app.js` (or `_app.tsx`) component with the `UserJotProvider`: ```tsx import { UserJotProvider } from "@userjot/next"; import type { AppProps } from "next/app"; export default function App({ Component, pageProps }: AppProps) { return ( {/* Your app content */} ); } ``` Replace `` with your actual UserJot Project ID. ## Identifying Users (Hooks) To identify users and associate them with their actions, use the `useUserJot` hook. ```tsx import { useUserJot } from "@userjot/next"; export function MyComponent() { const { identify } = useUserJot(); useEffect(() => { identify({ id: "USER_UNIQUE_ID", // Required: Unique identifier for the user in your system email: "user@example.com", // Required: User's email address firstName: "John", // Optional: User's first name lastName: "Doe", // Optional: User's last name avatar: "URL_TO_USER_AVATAR", // Optional: URL to the user's profile picture // signature: "GENERATED_HMAC_SIGNATURE" // Required if "Require signed tokens" is on (see below) }); }, []); // ... } ``` ### Secure Authentication with Signatures If you enabled the **Require signed tokens** option in your UserJot settings (recommended), you **must** include a `signature` field in the `identify` call. The signature is an HMAC SHA256 hash of the user's unique ID (the `id` field), created using your Secret Key. To learn more about how to generate a signature, please refer to the [UserJot documentation](https://userjot.com/help). Here is how the `identify` call looks with the `signature`: ```tsx import { useUserJot } from "@userjot/next"; export function MySecureComponent({ userSignature, }: { userSignature: string; }) { const { identify } = useUserJot(); useEffect(() => { identify({ id: "USER_UNIQUE_ID", email: "user@example.com", firstName: "John", lastName: "Doe", avatar: "URL_TO_USER_AVATAR", signature: userSignature, // The server-generated signature }); }, []); // ... } ```