npm install @userjot/nextyarn add @userjot/nextpnpm add @userjot/nextBefore 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.
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 <head> of your root layout component:
import { UserJotProvider } from "@userjot/next";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<head>
<UserJotProvider projectId="<YOUR_PROJECT_ID>" />
{/* Other head elements */}
</head>
<body>
{/* Your layout */}
<main>{children}</main>
</body>
</html>
);
}Replace <YOUR_PROJECT_ID> 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:
import { UserJotProvider } from "@userjot/next";
import type { AppProps } from "next/app";
export default function App({ Component, pageProps }: AppProps) {
return (
<UserJotProvider projectId="<YOUR_PROJECT_ID>">
{/* Your app content */}
<Component {...pageProps} />
</UserJotProvider>
);
}Replace <YOUR_PROJECT_ID> with your actual UserJot Project ID.
To identify users and associate them with their actions, use the useUserJot hook.
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)
});
}, []);
// ...
}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.
Here is how the identify call looks with the signature:
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
});
}, []);
// ...
}