Tutorial: Iniciar sesión con Discord en Next.js

En este tutorial, vamos a crear un sistema de autenticación con Discord utilizando Next.js. Para lograr esto, crearemos un formulario de inicio de sesión que redirigirá al usuario a la página de autenticación de Discord.

Requisitos previos

• Tener instalado Next.js en tu proyecto
• Tener una cuenta de desarrollador en Discord y haber creado una aplicación para obtener un cliente ID y un secreto de cliente

Código

src/app/api/auth/[...nectauth]/route.tsx

Este archivo contiene las rutas de autenticación para Discord.

import { handlers } from "@/auth/auth";
export const { GET, POST } = handlers;

src/app/login.tsx

Este archivo contiene el formulario de inicio de sesión.

import { doSocialLogin } from "@/app/utils/action";

const LoginForm = () => {
  return (
    <form action={doSocialLogin}>
      <button
        className="flex justify-center items-center px-16 py-4 rounded-[10px] bg-[#1E2124] text-[#fff]"
        type="submit"
        name="action"
        value="discord"
      >
        Discord
      </button>
    </form>
  );
};

export default LoginForm;

src/app/utils/action.ts

Este archivo contiene las funciones para iniciar y cerrar sesión.

'use server';

import { signIn, signOut } from "@/auth/auth";
import { redirect } from 'next/navigation';

export async function doSocialLogin(formData: { get: (arg0: string) => any; }) {
  const action = formData.get('action');
  await signIn(action);
  redirect("/");
}

export async function doLogout() {
  await signOut({ redirectTo: "/" });
}

src/auth/auth.tsx

Este archivo contiene las funciones para autenticar con Discord.

import { sign } from "crypto";
import NextAuth from "next-auth";
import DiscordProvider from "next-auth/providers/discord";

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [
    DiscordProvider({
      clientId: process.env.DISCORD_CLIENT_ID,
      clientSecret: process.env.DISCORD_CLIENT_SECRET,
      
    }),
  ],
  secret: process.env.AUTH_SECRET,
});

Configuración de Discord

Para que la autenticación funcione, debes configurar tu aplicación de Discord:

• En la página de configuración de tu aplicación de Discord, agrega una nueva ruta de redirección con la URL http://localhost:3000/api/auth/callback/discord

• En la página de configuración de tu aplicación de Discord, agrega un nuevo secreto de cliente y copia el valor

Iniciar sesión con Discord

1. Inicia el servidor de Next.js con npm run dev
2. Abre un navegador y ve a http://localhost:3000/login
3. Haz clic en el botón “Discord” para iniciar sesión
4. Serás redirigido a la página de autenticación de Discord
5. Inicia sesión con tu cuenta de Discord
6. Serás redirigido de vuelta a tu aplicación con la sesión iniciada

Cerrar sesión

1. Haz clic en el botón “Cerrar sesión” en tu aplicación
2. Serás redirigido a la página de cierre de sesión de Discord
3. La sesión se cerrará y serás redirigido de vuelta a la página de inicio de sesión

Conclusión

En este tutorial, hemos creado un sistema de autenticación con Discord utilizando Next.js. Ahora puedes utilizar esta autenticación en tu aplicación para proteger rutas y recursos.