ThonLabs is an all-in-one platform that establishes the foundation for any SaaS product, allowing founders and software engineers to focus on what truly matters: their own product development.
Create an account at thonlabs.io to get started.
Integrating with ThonLabs is straightforward and efficient. Simply follow the steps below to begin your seamless integration journey. With six steps you will have a complete user management and authentication system.
| ThonLabs is fully compatible with Next.js 13, 14 and 15. Previous versions are not supported yet. |
|---|
Go to thonlabs.io and create your account. Then, initialize a new project, ThonLabs automatically will provide you a "Development" environment, together with all necessary credentials.
Open you Next.js project and install the library, choose your preferred package manager.
npm install @thonlabs/nextjs
# or
yarn add @thonlabs/nextjs
# or
pnpm add @thonlabs/nextjsBefore start: if you're using Next.js 13 or 14, all the imports should use the v14 path, e.g.: @thonlabs/nextjs/v14'.
Go to your desired environment at ThonLabs Settings page and copy the Environment ID, Public Key and Base URL.
Go to the root layout.tsx and wrap your app with the ThonLabsProvider component.
Import the ThonLabsWrapper component:
For v15:
import {ThonLabsWrapper} from "@thonlabs/nextjs";For v13 and v14:
import {ThonLabsWrapper} from "@thonlabs/nextjs/v14";Wrap your app with the ThonLabsProvider component:
async function RootLayout({children}: Readonly<{children: React.ReactNode}>) {
return (
<html>
<body>
<ThonLabsWrapper
environmentId="<your-environment-id>"
publicKey="<your-public-key>"
baseURL="<your-base-url>"
>
{children}
</ThonLabsWrapper>
</body>
</html>
);
}
export default RootLayout;Create an api folder inside app folder.
Inside api folder, create a folder structure /auth/[...thonlabs] and create a route.ts with the following content:
For v15:
export * from "@thonlabs/nextjs/api";For v13 and v14:
export * from "@thonlabs/nextjs/v14/api";Inside app folder, create a folder structure /auth/[...thonlabs] and create a page.tsx with the following content:
For v15:
import {ThonLabsAuthPage} from "@thonlabs/nextjs";
export default ThonLabsAuthPage;For v13 and v14:
import {ThonLabsAuthPage} from "@thonlabs/nextjs/v14";
export default ThonLabsAuthPage;The middleware validates the session and redirects the user to login page if necessary. You can bypass public routes.
Sibling to the app folder, create a middleware.ts.
Start importing the validation functions:
For v15:
import {validateSession, validationRedirect} from "@thonlabs/nextjs/server";For v13 and v14:
import {validateSession, validationRedirect} from "@thonlabs/nextjs/v14/server";Then update the middleware.ts with the following content:
export async function middleware(req: NextRequest): Promise<NextResponse> {
const redirect = await validateSession(req);
if (redirect) {
return validationRedirect(redirect);
}
return NextResponse.next();
}Optional: you can bypass routes by passing an array of paths to the validateSession function, e.g.:
const redirect = await validateSession(req, [
"/public-route",
"/public-route-2",
]);