Skip to Content
Try our new Console experience. Visit Authdog.com
IntegrateSingle Page ApplicationNext.js app router

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

Configuring Authdog consumer with nextjs App router

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

Installation

pnpm add @authdog/nextjs-app
  1. 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.

NEXT_PUBLIC_PK_AUTHDOG=<YOUR_ENVIRONMENT_PUBLIC_KEY>
  1. 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:

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/

  1. Consuming authenticated user identity

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

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

Here’s a sample usage:

const { user, isLoading } = useUser();
 
if (!loading) {
    return <>Hello { user?.displayName }<>
}
  1. Redirect to sign in page

TODO

Last updated on
ChecklistRemix