@clerk/nextjs

What is @clerk/nextjs?

@clerk/nextjs is a package that provides authentication and user management functionalities for Next.js applications. It offers a range of features including user sign-up, sign-in, and profile management, as well as handling authentication states and protecting routes.

What are @clerk/nextjs's main functionalities?

User Sign-Up

This feature allows you to add a user sign-up component to your Next.js application. The SignUp component handles the entire sign-up process, including form validation and user creation.

import { SignUp } from '@clerk/nextjs';

export default function SignUpPage() {
  return <SignUp />;
}

User Sign-In

This feature allows you to add a user sign-in component to your Next.js application. The SignIn component manages the sign-in process, including form validation and authentication.

import { SignIn } from '@clerk/nextjs';

export default function SignInPage() {
  return <SignIn />;
}

User Profile Management

This feature allows you to add a user profile management component to your Next.js application. The UserProfile component enables users to view and update their profile information.

import { UserProfile } from '@clerk/nextjs';

export default function UserProfilePage() {
  return <UserProfile />;
}

Authentication State

This feature allows you to manage and display authentication states in your Next.js application. The useAuth hook provides information about the current authentication state and the authenticated user.

import { useAuth } from '@clerk/nextjs';

export default function AuthStateComponent() {
  const { isSignedIn, user } = useAuth();

  if (isSignedIn) {
    return <div>Welcome, {user.firstName}!</div>;
  } else {
    return <div>Please sign in.</div>;
  }
}

Protected Routes

This feature allows you to protect routes in your Next.js application. The withAuth higher-order component ensures that only authenticated users can access the protected page.

import { withAuth } from '@clerk/nextjs';

function ProtectedPage() {
  return <div>This is a protected page.</div>;
}

export default withAuth(ProtectedPage);

Other packages similar to @clerk/nextjs

next-auth

next-auth is a complete open-source authentication solution for Next.js applications. It supports various authentication providers, including OAuth, email/password, and custom credentials. Compared to @clerk/nextjs, next-auth offers more flexibility in terms of customization and provider support but may require more configuration.

firebase

Firebase is a comprehensive app development platform that includes authentication services. Firebase Authentication supports multiple authentication methods, including email/password, phone, and social providers. While Firebase offers a broader range of services beyond authentication, it may be more complex to set up compared to @clerk/nextjs.

auth0

Auth0 is a flexible, drop-in solution to add authentication and authorization services to your applications. It supports a wide range of identity providers and offers extensive customization options. Compared to @clerk/nextjs, Auth0 provides more enterprise-level features but can be more expensive and complex to integrate.

README

@clerk/nextjs

Changelog · Report a Bug · Request a Feature · Ask a Question

---

Overview

Clerk is the easiest way to add authentication and user management to your Next.js application. Add sign up, sign in, and profile management to your application in minutes.

Getting Started

Prerequisites

• Next.js 13.0.4 or later
• React 18 or later
• Node.js >=18.17.0 or later

Installation

npm install @clerk/nextjs

Build

To build the package locally with the TypeScript compiler, run:

npm run build

To build the package in watch mode, run the following:

npm run dev

Usage

Clerk requires your application to be wrapped in the <ClerkProvider/> context.

Set NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY to your Publishable Key in your .env.local file to make the environment variable accessible to the Provider.

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_(test|live)_xxxxxxx

An implementation of <ClerkProvider /> with our flexible Control Components to build an authentication flow in pages/_app.js:

import { ClerkProvider, RedirectToSignIn, SignedIn, SignedOut, UserButton } from '@clerk/nextjs';

function MyApp({ Component, pageProps }) {
  return (
    <ClerkProvider>
      <>
        <SignedIn>
          <>
            <header style={{ padding: 20 }}>
              <UserButton />
            </header>
            <Component {...pageProps} />
          </>
        </SignedIn>
        <SignedOut>
          <RedirectToSignIn />
        </SignedOut>
      </>
    </ClerkProvider>
  );
}

export default MyApp;

For further details and examples, please refer to our Documentation.

Support

You can get in touch with us in any of the following ways:

• Join our official community Discord server
• Create a GitHub Discussion
• Contact options listed on our Support page

Contributing

We're open to all community contributions! If you'd like to contribute in any way, please read our contribution guidelines) .

Security

@clerk/nextjs follows good practices of security, but 100% security cannot be assured.

@clerk/nextjs is provided "as is" without any warranty. Use at your own risk.

For more information and to report security issues, please refer to our security documentation.

License

This project is licensed under the MIT license.

See LICENSE for more information.