Updated version example?

[crimson-med]

I have been trying to use the guide described here: https://docs.login.xyz/integrations/nextauth.js

Which uses this repo at it's base however a lot of functions have changed in siwe, wagmi.

Would it be possible to get an updated version?

[obstropolos]

Hey @crimson-med - can you dive a little deeper into what's going wrong for you? We recently updated to use the latest version of siwe in this example.

[crimson-med]

Hey @obstropolos thanks for taking the time to reply.

Wagmi version: 1.0.6 Siwe cersion: 2.1.4

So the first issue encountered was that now the chain names are not part of the chain export from wagmi. After looking at their documentation I had to use:

import { mainnet, polygon, optimism, arbitrum } from "@wagmi/core/chains";

Next the createClient is not exported in the most recent version and thus I had to resolve to the createConfig per their documentation:

import { WagmiConfig, createConfig, configureChains } from "wagmi";
import { mainnet, polygon, optimism, arbitrum } from "@wagmi/core/chains";
import { publicProvider } from "wagmi/providers/public";

import { CoinbaseWalletConnector } from "wagmi/connectors/coinbaseWallet";
import { InjectedConnector } from "wagmi/connectors/injected";
import { MetaMaskConnector } from "wagmi/connectors/metaMask";
import { WalletConnectConnector } from "wagmi/connectors/walletConnect";

// Configure chains & providers with the Alchemy provider.
// Two popular providers are Alchemy (alchemy.com) and Infura (infura.io)
const { chains, publicClient, webSocketPublicClient } = configureChains(
  [mainnet, polygon, optimism, arbitrum],
  [publicProvider()]
);

// Set up wagmi config
const config = createConfig({
  autoConnect: true,
  connectors: [
    new MetaMaskConnector({ chains }),
    new CoinbaseWalletConnector({
      chains,
      options: {
        appName: "wagmi",
      },
    }),
    new WalletConnectConnector({
      chains,
      options: {
        projectId: "...",
      },
    }),
    new InjectedConnector({
      chains,
      options: {
        name: "Injected",
        shimDisconnect: true,
      },
    }),
  ],
  publicClient,
  webSocketPublicClient,
});

const MyApp: AppType<{ session: Session | null }> = ({
  Component,
  pageProps: { session, ...pageProps },
}) => {
  return (
    <WagmiConfig config={config}>
      <SessionProvider session={session}>
        <Component {...pageProps} />
      </SessionProvider>
    </WagmiConfig>
  );
};

Finally event with the above edited code I get the following error from siwe

./node_modules/ethers/node_modules/ws/lib/sender.js:5:0
Module not found: Can't resolve 'net'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/ethers/node_modules/ws/index.js
./node_modules/ethers/lib.commonjs/providers/ws.js
./node_modules/ethers/lib.commonjs/providers/provider-websocket.js
./node_modules/ethers/lib.commonjs/providers/index.js
./node_modules/ethers/lib.commonjs/ethers.js
./node_modules/ethers/lib.commonjs/index.js
./node_modules/siwe/dist/utils.js
./node_modules/siwe/dist/siwe.js
./src/pages/siwe.tsx

[crimson-med]

any updates on this?

[obstropolos]

At the moment, this example is not compatible with the latest version of wagmi - we will get around to updating this soon, but also accept any upstream contributions!

[0xayot]

@obstropolos @crimson-med I attempted this with the latest versions of all these libraries and it seemed to work. Although the WebSocket connection throws a bunch of errors, wallet connection and SIWE works.