This document covers basic integration step-by-step with the SDK in a NextJS application

Configuring Authdog consumer with nextjs App router

Install SDK library in your app @authdog/nextjs-app

Installation

Code
 
pnpm add @authdog/nextjs-app

Copy from Authdog console, the public key to be used in the consumer application

Create a .env file at the root of your nextjs project.

Code
 
NEXT_PUBLIC_PK_AUTHDOG=<YOUR_ENVIRONMENT_PUBLIC_KEY>

Configure the SDK in your NextJS application

Create a layout file (app/layout.tsx)

Import Authdog provider in this file:

import { AuthdogProvider } from "@authdog/nextjs-app/client";

Then wrap your app with Authdog Provider component:


Code
 
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <AuthdogProvider>
          <main className="flex-1">
            {children}
          </main>
        </AuthdogProvider>
      </body>
    </html>
  );
}

Then identity will be available downstream to all views in app/

Consuming authenticated user identity

Import useUser hook, this function is used inside a component to access user identity.


Code
 
import { useUser } from "@authdog/nextjs-app/client";

Here's a sample usage:


Code
 
const { user, isLoading } = useUser();

if (!loading) {
    return <>Hello { user?.displayName }<>
}

Last modified on March 11, 2026

This document covers basic integration step-by-step with the SDK in a NextJS application

Configuring Authdog consumer with nextjs App router

Install SDK library in your app @authdog/nextjs-app

Installation

Code
 
pnpm add @authdog/nextjs-app

Copy from Authdog console, the public key to be used in the consumer application

Create a .env file at the root of your nextjs project.

Code
 
NEXT_PUBLIC_PK_AUTHDOG=<YOUR_ENVIRONMENT_PUBLIC_KEY>

Configure the SDK in your NextJS application

Create a layout file (app/layout.tsx)

Import Authdog provider in this file:

import { AuthdogProvider } from "@authdog/nextjs-app/client";

Then wrap your app with Authdog Provider component:


Code
 
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <AuthdogProvider>
          <main className="flex-1">
            {children}
          </main>
        </AuthdogProvider>
      </body>
    </html>
  );
}

Then identity will be available downstream to all views in app/

Consuming authenticated user identity

Import useUser hook, this function is used inside a component to access user identity.


Code
 
import { useUser } from "@authdog/nextjs-app/client";

Here's a sample usage:


Code
 
const { user, isLoading } = useUser();

if (!loading) {
    return <>Hello { user?.displayName }<>
}

Last modified on March 11, 2026