Next.js Quickstart

This tutorial adds Keyward sign-in to a new Next.js app using the App Router.

1. Install @keyward/nextjs

   • npm
   • pnpm
   • yarn

   npm install @keyward/nextjs

2. Set your keys

   Add your publishable and secret keys to .env.local. Never commit the secret key.

   NEXT_PUBLIC_KEYWARD_PUBLISHABLE_KEY=pk_test_••••
   KEYWARD_SECRET_KEY=sk_test_••••

3. Add the proxy

   import { keywardProxy } from "@keyward/nextjs/server";
   
   export default keywardProxy();
   
   export const config = {
     matcher: ["/((?!_next|.*\\..*).*)", "/(api|trpc)(.*)"],
   };

4. Wrap your app

   import { KeywardProvider, SignedIn, SignedOut, SignInButton, UserMenu } from "@keyward/nextjs";
   
   export default function RootLayout({ children }: { children: React.ReactNode }) {
     return (
       <KeywardProvider>
         <html lang="en">
           <body>
             <header>
               <SignedOut><SignInButton /></SignedOut>
               <SignedIn><UserMenu /></SignedIn>
             </header>
             {children}
           </body>
         </html>
       </KeywardProvider>
     );
   }

5. Run it

   npm run dev

   Open localhost:3000, select Sign in, and create the first user.

Show the user menu

The same component ships for every SDK; pick yours in the sidebar and this sample follows.

import { UserMenu } from "@keyward/nextjs";
export default function Nav() { return <UserMenu afterSignOutUrl="/" />; }

import { UserMenu } from "@keyward/react";
export function Nav() { return <UserMenu afterSignOutUrl="/" />; }

import { UserMenu } from "@keyward/expo";
export function Nav() { return <UserMenu afterSignOutUrl="/" />; }

Next steps