NextAuth.js is the authentication library of Next.js, which supports OAuth, email password, JWT, etc.; 2. After installation, configure the provider and key in pages/api/auth/[...nextauth].js; 3. Use SessionProvider to wrap the application and use useSession, signIn, signOut to manage the status; 4. Use getSession or getServerSession to protect pages and API routes; 5. Add Credentials providers to implement mailbox password login and cooperate with JWT policies; 6. You can customize the login page and expand user information through callbacks; NextAuth.js becomes Next.js with its flexibility and support for Serverless The most popular authentication solution in your application, suitable for fast integration of multiple login methods and secure session management.

Implement user authentication in Next.js, NextAuth.js is one of the most popular and flexible solutions at present. It not only supports multiple authentication methods (such as OAuth, email password, JWT, etc.), but is also compatible with Serverless environments, which is very suitable for modern full-stack applications.

The following will guide you to understand and implement the basic authentication process of NextAuth.js step by step.

1. What is NextAuth.js?

NextAuth.js is an open source authentication library tailored for Next.js, which supports:

• OAuth login (Google, GitHub, Facebook, etc.)
• Email/password login (verified by email)
• JWT and Session Management
• Custom database adaptations (such as MongoDB, PostgreSQL)
• No backend server required, naturally supports API Routes

It handles authentication logic through API routing, and the front-end obtains user status through useSession() and other Hooks.

2. Installation and initialization

First install the dependencies:

 npm install next-auth

Then create the authentication API route in pages/api/auth/[...nextauth].js :

 import NextAuth from 'next-auth';
import GoogleProvider from 'next-auth/providers/google';

export default NextAuth({
  Providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET,
  pages: {
    signIn: '/auth/signin', // Custom login page (optional)
  },
});

?? Note: You need to configure environment variables in .env.local :

 GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
NEXTAUTH_SECRET=y-very-secret-string-here

NEXTAUTH_SECRET is used to encrypt JWT and session, and it is recommended to use openssl rand -base64 32 to generate.

3. Front-end calls login and get users

Use SessionProvider to wrap the application (usually in _app.js ):

 // pages/_app.js
import { SessionProvider } from 'next-auth/react';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  Return (
    <SessionProvider session={pageProps.session}>
      <Component {...pageProps} />
    </SessionProvider>
  );
}

export default MyApp;

Then use it in the page:

 // pages/index.js
import { useSession, signIn, signOut } from 'next-auth/react';

export default function Home() {
  const { data: session } = useSession();

  if (session) {
    Return (
      <>
        <p>Welcome, {session.user.email}</p>
        <button onClick={() => signOut()}>Sign out</button>
      </>
    );
  }

  Return (
    <>
      <p>You are not signed in.</p>
      <button onClick={() => signIn(&#39;google&#39;)}>Sign in with Google</button>
    </>
  );
}

4. Protect page or API routes

Protect page (server-side rendering)

Use getServerSideProps to check the session:

 export async function getServerSideProps(context) {
  const session = await getSession(context);

  if (!session) {
    return {
      redirect: {
        destination: '/auth/signin',
        permanent: false,
      },
    };
  }

  return {
    props: { session },
  };
}

Protect API routing

 // pages/api/protected.js
import { getServerSession } from 'next-auth';
import { authOptions } from './auth/[...nextauth]';

export default async function handler(req, res) {
  const session = await getServerSession(req, res, authOptions);

  if (!session) {
    return res.status(401).json({ message: 'Unauthorized' });
  }

  res.json({ message: 'Hello, you are logged in!' });
}

5. Add more authentication methods (such as Credentials)

You can add email/password to log in (requires backend verification):

 import CredentialsProvider from 'next-auth/providers/credentials';

export default NextAuth({
  Providers: [
    GoogleProvider({ ... }),
    CredentialsProvider({
      name: 'Credentials',
      credentials: {
        email: { label: 'Email', type: 'email' },
        password: { label: 'Password', type: 'password' }
      },
      async authorize(credentials) {
        // Here is the simulation verification logic (the database should be checked)
        const user = { id: 1, name: 'John', email: credentials.email };

        if (user) {
          return user; // Return the user object to indicate successful login} else {
          return null; //Login failed}
      }
    })
  ],
  session: {
    strategy: 'jwt', // Recommended to use JWT
  },
  callbacks: {
    async jwt({ token, user }) {
      if (user) token.id = user.id;
      return token;
    },
    async session({ session, token }) {
      if (session.user) session.user.id = token.id;
      return session;
    }
  }
});

?? Note: The Credentials method must use JWT session policy and will not persist the session to the database.

6. Custom login page (optional)

Create pages/auth/signin.js :

 import { signIn } from 'next-auth/react';

export default function SignIn() {
  Return (
    <div>
      <h1>Sign In</h1>
      <button onClick={() => signIn(&#39;google&#39;)}>Sign in with Google</button>
      <button onClick={() => signIn(&#39;credentials&#39;, { email: &#39;test@test.com&#39;, password: &#39;123&#39; })}>
        Sign in with Credentials
      </button>
    </div>
  );
}

summary

NextAuth.js makes Next.js authentication simple and efficient:

• Supports OAuth, email, and custom login
• Provide front-end Hook and server-side verification tools
• Easy to integrate databases (via Prisma or Adapter)
• Strong scalability, suitable for small and medium-sized projects to be launched quickly

As long as you configure the environment variables and routes, you can log in to Google in a few minutes. If more complex logic is required (such as role permissions, database user tables), you can combine Prisma and custom callbacks implementations.

Basically all is it, not complicated but it is easy to ignore details.

The above is the detailed content of Authentication in Next.js with NextAuth.js. For more information, please follow other related articles on the PHP Chinese website!