Auth.js | Pacote

• Auth.js | Pacote

Instalar o pacote

• npm install next-auth

Criar [...nextauth].js

• Criar a pasta no caminho pages/api/auth/[...nextauth].js

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

export default NextAuth({
  providers: [
    Providers.GitHub({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
  ],
  pages: {
    signIn: '/auth/signin',
  },
});

Sign-in personalizado

Por padrão, o Auth.js fornece uma página de login. No entanto, você pode usar qualquer página de login personalizada para poder personalizá-la facilmente. Fizemos isso adicionando um pagesobjeto à configuração do NextAuth.

Agora, crie um arquivo para a página de login personalizada e adicione os trechos de código abaixo: pages/auth/signin.js

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

const SignIn = () => {
  return (
    <div>
      <h1>Sign In</h1>
      <button onClick={() => signIn('github')}>Sign in with GitHub</button>
    </div>
  );
};

export default SignIn;

Proteger a página

import { useSession } from 'next-auth/client';
import { useEffect } from 'react';
import { useRouter } from 'next/router';

const ProfilePage = () => {
  const [session, loading] = useSession();
  const router = useRouter();

  useEffect(() => {
    if (!loading && !session) {
      router.push('/auth/signin');
    }
  }, [loading, session, router]);

  if (loading) {
    return <p>Loading...</p>;
  }

  if (!session) {
    return null;
  }

  return <div>This a protected page</div>;
};

export default ProfilePage;

Configurações e customizações

• Providers — Você pode adicionar qualquer número de provedores, como Google, GitHub, Facebook, etc., à sua configuração NextAuth, que então fica disponível para um usuário fazer login com
• Callbacks — Permite que você defina como deseja que a autenticação seja feita após autenticar um usuário com sucesso
• Pages — Você pode definir a página personalizada que deseja usar para seu SignIn, SignOut e exibir mensagens de erro relacionadas à autenticação
• Session management — Configure o comportamento da sessão. O JWT e a expiração da sessão podem ser modificados de acordo com suas necessidades

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

export default NextAuth({
  providers: [
    Providers.GitHub({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
    Providers.Google({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET,
    }),
  ],
  callbacks: {
    async signIn(user, account, profile) {
      return true;
    },
    async redirect(url, baseUrl) {
      return baseUrl;
    },
    async session(session, token) {
      session.user.id = token.id;
      return session;
    },
    async jwt(token, user, account, profile, isNewUser) {
      if (user) {
        token.id = user.id;
      }
      return token;
    },
  },
  pages: {
    signIn: '/auth/signin',
    signOut: '/auth/signout',
    error: '/auth/error',
  },
});

Sign-out personalizado

• Caminho: pages/auth/signout.js

import { useEffect } from 'react';
import { signOut } from 'next-auth/client';
import { useRouter } from 'next/router';

const SignOut = () => {
  const router = useRouter();

  useEffect(() => {
    // Sign out the user and redirect to the homepage
    signOut({ redirect: false }).then(() => router.push('/'));
  }, [router]);

  return (
    <div>
      <h1>Signing you out...</h1>
      <p>Please wait.</p>
    </div>
  );
};

export default SignOut;

Auth.js vs. Passport.js, OAuth, and Firebase Authentication

Feature	Passport.js	Auth.js	Auth0	Firebase Authentication
Integration	Easy to integrate with Next.js	Works with the majority of Node.js frameworks	Platform-independent with SDKs for many frameworks and languages	Integrates with various platforms, including Node.js applications
Performance	High performance, but implementation dependent	Optimized for Next.js applications	High performance, cloud-based solution	High performance, serverless solution
Community	Large community, wide adoption in Node.js ecosystem	Fast-growing community, particularly in Next.js ecosystem, but smaller than Passport.js	Large and active community, extensive enterprise support	Large community, backed by Google
Documentation/resources	Some areas in documentation are lacking for the version transition	Extensive documentation with numerous examples and third-party tutorials	Fully-featured and fully documented with API references.	Comprehensive documentation with lots of community tutorials and examples
Customization	Highly customizable with various strategies	Limited customization options	Customizable, but within the constraints of the Auth0 platform	Customizable, with pre-built UI components available
Session management	Has a built-in session management functionality	Requires additional middleware for session management	Has advanced JWT-based management and customization.	Supports JWT-based extended token management and customization
Authentication methods	Supports authentication strategies like email/password, and OAuth providers (Google, GitHub, Facebook, etc.)	Extensive support for various strategies (OAuth, OpenID, etc.)	Supports authentication strategies like social, enterprise, passwordless, etc. and also supports custom databases	Extensive support for various strategies including social logins, phone auth, anonymous auth, and multi-factor authentication