Web3 as provider in NextAuth v5

[damianlluch]

Hi, I have implemented NextAuth v5 with email and password without problems.
Now, in a different scenario, I now need my provider to be for example my Metamask or WalletConnect.

I have my auth.config.ts file

import type { NextAuthConfig } from 'next-auth';

export const authConfig = {
  pages: {
    signIn: '/',
  },
  providers: [
  ],
  callbacks: {
    async session({ session, token }) {
      if (token.walletAddress) {
        // @ts-ignore
        session.user.id = token.walletAddress;
      }
      return session;
    },
    async authorized({ auth, request: { nextUrl } }) {
      const isLoggedIn = !!auth?.user;
      const isOnDashboard = nextUrl.pathname.startsWith('/home');
      if (isOnDashboard) {
        if (isLoggedIn) return true;
        return false; // Redirect unauthenticated users to login page
      } else if (isLoggedIn) {
        return Response.redirect(new URL('/home', nextUrl));
      }
      return true;
    },
    async jwt({ token, user }) {
      if (user) {
        token.email = user.email;
      }
      return token;
    },
    async signIn({ user, account, profile, email, credentials }) {
      return !!user;
    },
  },
} satisfies NextAuthConfig;

And my auth.ts file

import {authConfig} from "@/auth.config";
import NextAuth from "next-auth";
import axios from "axios";
import Credentials from "next-auth/providers/credentials";

export const { auth, signIn, signOut } = NextAuth({
  ...authConfig,
  providers: [
    Credentials({
      name: 'Web3',
      credentials: {
        address: { label: "Address", type: "text", placeholder: "0x..." },
        signature: { label: "Signature", type: "text" },
        message: { label: "Message", type: "text" }
      },
      async authorize(credentials) {
        const address = credentials?.address;
        const signature = credentials?.signature;
        const message = credentials?.message;

        if (!address || !signature || !message) {
          return null;
        }

        try {
          const response = await axios.post( `${process.env.BACKEND_SERVER_URL}/api/v1/auth/login-wallet`, {
            address,
            signature,
            message,
          });

          const { data } = response;

          if (data?.user) {
            return data.user;
          } else {
            return null;
          }
        } catch (error) {
          console.error('Error al verificar la firma:', error);
          return null;
        }
      },
    }),
  ],
});

and in my component, I have this function:

    const signMessage = async () => {
        if (window.ethereum && accounts && accounts.length > 0) {
            try {
                const web3Provider = new Web3Provider(window.ethereum);
                const signer = web3Provider.getSigner();
                const signature = await signer.signMessage("Por favor, firma este mensaje para iniciar sesión.");
                console.log('signature:', signature);

                try {
                    const result = await signIn('credentials', {
                        redirect: false,
                        address: accounts[0],
                        signature: signature,
                        message: "Por favor, firma este mensaje para iniciar sesión."
                    });

                    console.log('signIn result:', result);

                    if (result?.ok) {
                        await router.push('/home');
                    } else {
                        // @ts-ignore
                        console.error('SignIn failed:', result.error);
                        // @ts-ignore
                        setError('Error signing in');
                    }
                } catch (error) {
                    console.error('Error signing in:', error);
                    // @ts-ignore
                    setError(error.message || 'Error desconocido');
                }
            } catch (error) {
                console.error('Error signing message:', error);
                // @ts-ignore
                setError(error.message || 'Error desconocido');
            }
        }
    };

This function that runs after connecting my wallet, for signing. It runs the signature correctly, but then, for reasons I don't know, the application redirects me to :

http://localhost:3001/api/auth/error

I've put breakpoints in many places, but internally something in NextAuth runs so fast, it's impossible to see the error message, and it instantly redirects me to that URL.

Any suggestions?

Thanks

[CS6]

I also have the same problem. Currently, SIWE can only operate on next-auth 4.2.x, and the files are only updated to 4.2.x. The files and examples of auth.js v5 are very much needed.

#10679

This is the latest example I can find so far (provided by WalletConnect)