spruceid / siwe-next-auth-example Goto Github PK
View Code? Open in Web Editor NEWAn example of Sign-In with Ethereum and NextAuth.js
Home Page: https://siwe-next-auth-example2.vercel.app/
License: ISC License
An example of Sign-In with Ethereum and NextAuth.js
Home Page: https://siwe-next-auth-example2.vercel.app/
License: ISC License
Cloning the current repo and running npm install causes a dependency error.
Can this be updated/fixed?
https://docs.login.xyz/integrations/nextauth.js
For example in pages/api/auth/[...nextauth].ts
in the repo this check doesn't exist but is there in the docs, among other things:
const nextAuthUrl =
process.env.NEXTAUTH_URL ||
(process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` :
null);
Trying to build to see if I can use this in my project. Not very familar with typescript. Gettiing:
yarn run v1.22.19
$ next build
info - Loaded env from /home/git/siwe-next-auth-example/.env.local
Failed to compile.
./pages/api/auth/[...nextauth].ts:8:36
Type error: Parameter 'req' implicitly has an 'any' type.
6 | // For more information on each option (and a full list of options) go to
7 | // https://next-auth.js.org/configuration/options
8 | export default async function auth(req, res) {
| ^
9 | const providers = [
10 | CredentialsProvider({
11 | name: "Ethereum",
error Command failed with exit code 1.
Im getting a type error saying that the data parameter "must have a 'Symbol.iterator' method that returns an iterator".
How this data paramater is retrieved? As of now the useConnect hook brings ({ chainId, connector, onError, onMutate, onSettled, onSuccess, } right? So Im a bit confused on how to get an entire object with all data from the hook itself. Here is my component:
import Head from "next/head";
import { useState, useEffect } from "react";
import { useRouter } from "next/router";
import LoadingDots from "@/components/tickets/loading-dots";
import toast, { Toaster } from "react-hot-toast";
import { ConnectButton, getDefaultWallets } from "@rainbow-me/rainbowkit";
import {
chain,
configureChains,
createClient,
useConnect,
useAccount,
useNetwork,
useSignMessage
} from "wagmi";
import { alchemyProvider } from "wagmi/providers/alchemy";
import { publicProvider } from "wagmi/providers/public";
const alchemyId = process.env.ALCHEMY_ID;
const pageTitle = "Login";
const logo = "/favicon.ico";
export const { chains, provider } = configureChains(
[chain.polygonMumbai],
[alchemyProvider({ alchemyId }), publicProvider()]
);
export const { connectors } = getDefaultWallets({
appName: "myapp",
chains
});
export const client = createClient({
autoConnect: true,
connectors,
provider
});
export default function Login() {
const { query } = useRouter();
const { displayError } = query;
useEffect(() => {
const errorMessage = Array.isArray(displayError)
? displayError.pop()
: displayError;
errorMessage && toast.error(errorMessage);
}, [displayError]);
const [{ data: connectData }, connectAsync] = useConnect();
const [, signMessage] = useSignMessage();
const handleLogin = async () => {
try {
const res = await connectAsync(connectData.connectors[0]);
const callbackUrl = "/protected";
const message = new SiweMessage({
domain: window.location.host,
address: res.data?.account,
statement: "Sign in with Ethereum to the app.",
uri: window.location.origin,
version: "1",
chainId: res.data?.chain?.id,
nonce: await getCsrfToken()
});
const { data: signature, error } = await signMessage({
message: message.prepareMessage()
});
signIn("credentials", {
message: JSON.stringify(message),
redirect: false,
signature,
callbackUrl
});
} catch (error) {
console.log(error);
window.alert(error);
}
};
return (
<div className="mt-8 mx-auto sm:w-full w-11/12 sm:max-w-md">
<div className="bg-white py-8 px-4 shadow-md sm:rounded-lg sm:px-10">
<div className="flex justify-center">
<ConnectButton />
</div>
</div>
);
}
I also see you have the "types" command with tsc --noEmit. Does that have to do with avoiding this error?
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.