Next js App Router Authentication with AuthKit

Introduction

In this tutorial, we'll guide you through the process of integrating enterprise-grade authentication into your Next.js App Router application using Hosted AuthKit. AuthKit offers features like Single Sign-On (SSO), SCIM, and audit logs, making it an excellent choice for applications that require robust security. This step-by-step guide will help you set up authentication seamlessly.

Step 1: Set Up Your Next.js Application

• Make sure you have Node.js installed on your machine.
• Create a new Next.js application if you don’t have one already:

  npx create-next-app@latest your-app-name
  cd your-app-name
  

• Install necessary dependencies:

  npm install next-auth @authkit/authkit
  

Step 2: Configure AuthKit

• Sign up for a free account at AuthKit.
• Once registered, navigate to the AuthKit dashboard and create a new application.
• Note down your Client ID and Client Secret as you will need them for configuration.

Step 3: Set Up Environment Variables

• Create a .env.local file in the root of your Next.js project:

  AUTHKIT_CLIENT_ID=your_client_id
  AUTHKIT_CLIENT_SECRET=your_client_secret
  NEXTAUTH_URL=http://localhost:3000
  

• Replace your_client_id and your_client_secret with the values from your AuthKit dashboard.

Step 4: Implement Authentication in Next.js

• Create a new file in the pages/api/auth/[...nextauth].js directory and add the following code:

  import NextAuth from 'next-auth';
  import AuthKitProvider from '@authkit/authkit';
  
  export default NextAuth({
    providers: [
      AuthKitProvider({
        clientId: process.env.AUTHKIT_CLIENT_ID,
        clientSecret: process.env.AUTHKIT_CLIENT_SECRET,
      }),
    ],
    // Add additional NextAuth options here
  });
  

Step 5: Protect Your Routes

• To protect a page, import the getSession method from next-auth/react:

  import { getSession } from 'next-auth/react';
  
  export async function getServerSideProps(context) {
    const session = await getSession(context);
    if (!session) {
      return {
        redirect: {
          destination: '/api/auth/signin',
          permanent: false,
        },
      };
    }
    return {
      props: { session },
    };
  }
  

• Use this method in any page where authentication is required.

Step 6: Implement Sign-In and Sign-Out

• Add sign-in and sign-out functionality to your application. In your component, you can use:

  import { signIn, signOut, useSession } from 'next-auth/react';
  
  const MyComponent = () => {
    const { data: session } = useSession();
  
    return (
      <>
        {session ? (
          <>
            <p>Welcome, {session.user.name}</p>
            <button onClick={() => signOut()}>Sign Out</button>
          </>
        ) : (
          <button onClick={() => signIn()}>Sign In</button>
        )}
      </>
    );
  };
  

Conclusion

In this tutorial, we covered the essential steps to integrate AuthKit authentication into a Next.js application. You learned how to set up your environment, configure AuthKit, implement authentication, protect routes, and manage user sessions.

Next steps may include exploring additional features offered by AuthKit, such as SCIM integration or configuring audit logs for enhanced security. For any further customization or troubleshooting, refer to the official documentation of NextAuth and AuthKit.