@userjot/next
v1.0.0-beta.1
Published
UserJot client for Next applications
Maintainers
sh4yyReadme
Installation
Using npm
npm install @userjot/nextUsing yarn
yarn add @userjot/nextUsing pnpm
pnpm add @userjot/nextConfiguration (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.
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 <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.
Identifying Users (Hooks)
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: "[email protected]", // 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.
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: "[email protected]",
firstName: "John",
lastName: "Doe",
avatar: "URL_TO_USER_AVATAR",
signature: userSignature, // The server-generated signature
});
}, []);
// ...
}