How to Integrate Auth0 Authentication in a Next.js Application

In this blog post, I'll guide you through integrating Auth0 into your Next.js application to enable secure user authentication, including Google login and more.

Why Auth0?

Auth0 is a powerful authentication platform that simplifies secure login and identity management. It allows you to:

• Quickly implement OAuth providers like Google, GitHub, or Facebook.
• Manage users securely with customizable login flows.
• Integrate easily with modern frameworks like Next.js.

Step 1: Set Up an Auth0 Account

1. Go to the Auth0 Dashboard and create a free account.
2. Create a new application:
   • Select Regular Web Applications as the type.
3. Once created, note the following credentials:
   • Domain
   • Client ID
   • Client Secret

Step 2: Install Dependencies

Add the Auth0 Next.js SDK to your project:

npm install @auth0/nextjs-auth0

Step 3: Configure Auth0 in Next.js

Create an environment variables file .env.local in the root directory of your project:

AUTH0_SECRET=your_auth0_secret
AUTH0_BASE_URL=http://localhost:3000
AUTH0_ISSUER_BASE_URL=https://your-auth0-domain.auth0.com
AUTH0_CLIENT_ID=your_client_id
AUTH0_CLIENT_SECRET=your_client_secret

Replace the placeholder values with the credentials from the Auth0 dashboard.

Step 4: Set Up Auth0 API Routes

In Next.js, create API routes to handle login, logout, and callbacks.

1.Inside the pages/api folder, create a subfolder auth:

pages/api/auth/

2.Add the following file to configure Auth0:

pages/api/auth/[...auth0].js:

import { handleAuth } from '@auth0/nextjs-auth0'

export default handleAuth()

Step 5: Add Login and Logout Buttons

Use the Auth0 hooks to display login and logout functionality.

Example: Login Component

Create a new file: components/AuthButton.js

import { useUser } from '@auth0/nextjs-auth0';

export default function AuthButton() {
  const { user, error, isLoading } = useUser();

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>{error.message}</div>;

  return (
    <div>
      {user ? (
        <>
          <p>Welcome, {user.name}!</p>
          <a href="/api/auth/logout" className="text-red-500">
            Logout
          </a>
        </>
      ) : (
        <a href="/api/auth/login" className="text-blue-500">
          Login
        </a>
      )}
    </div>
  );
}

Step 6: Protect Pages with Auth0

You can protect pages so only authenticated users can access them. ###Example: Protected Page Create a new file: pages/protected.js

import { withPageAuthRequired } from '@auth0/nextjs-auth0';

export default function ProtectedPage({ user }) {
  return (
    <div>
      <h1>Protected Page</h1>
      <p>Welcome, {user.name}!</p>
    </div>
  );
}

export const getServerSideProps = withPageAuthRequired();

Step 7: Run Your Application

npm run dev

• Navigate to http://localhost:3000.
• Click Login to test the Auth0 authentication flow.
• You will be redirected to the Auth0 login page.
• After logging in, you’ll return to your application with your user profile displayed.

Summary

Congratulations! 🎉 You have successfully integrated Auth0 into your Next.js application. You can now:

• Secure your application with authentication.
• Use protected routes for authorized users.
• Easily manage logins with OAuth providers like Google or GitHub.