How do I implement authentication with cookies in Next.js?

How do I implement authentication with cookies in Next.js?

To implement authentication with cookies in Next.js, you can use libraries like next-auth or manage cookies manually with js-cookie. Would you like a code example?

Yes, please provide a code example using next-auth.

Sure! First, install next-auth: npm install next-auth. Then, set up your API route in pages/api/auth/[...nextauth].js and configure your providers. Here's a basic example:

import NextAuth from 'next-auth';
import Providers from 'next-auth/providers';

export default NextAuth({
  providers: [
    Providers.Google({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  session: {
    jwt: true,
  },
  callbacks: {
    async jwt(token, user) {
      if (user) {
        token.id = user.id;
      }
      return token;
    },
  },
});

This will set up Google authentication with cookies.

How do I access the cookie in my Next.js app?

You can access the cookie using the getSession method from next-auth/react. Here's how:

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

export async function getServerSideProps(context) {
  const session = await getSession(context);
  return {
    props: { session },
  };
}

This will give you access to the session data in your component.