package.json
“@web3auth/modal”: “^10.0.5”,
web3-auth-provider.tsx
`“use client”;
import {
Web3AuthProvider as Provider,
type Web3AuthContextConfig,
} from “@web3auth/modal/react”;
import {
cookieToWeb3AuthState,
WEB3AUTH_NETWORK,
} from “@web3auth/modal”;
import { WagmiProvider } from “@web3auth/modal/react/wagmi”;
import { QueryClient, QueryClientProvider } from “@tanstack/react-query”;
import React from “react”;
export const clientId = process.env.NEXT_PUBLIC_WEB3_AUTH_CLIENT_ID;
if (!clientId) {
throw new Error(“client Id is not defined”);
}
const queryClient = new QueryClient();
const web3AuthContextConfig: Web3AuthContextConfig = {
web3AuthOptions: {
clientId,
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
ssr: true,
},
};
export default function Web3AuthProvider({
children,
cookies,
}: {
children: React.ReactNode;
cookies: string | null;
}) {
const web3authInitialState = cookieToWeb3AuthState(cookies);
return (
{children}
);
}
`
connect-demo.tsx
`"use client";
import { useWeb3AuthConnect, useWeb3AuthUser } from "@web3auth/modal/react";
import { Button } from "@workspace/ui/components/button";
import { memo } from "react";
// import { Loader2Icon } from "lucide-react";
export const ConnectDemo = memo(() => {
// console.log("LoginForm")
const { connect, isConnected } = useWeb3AuthConnect();
const { userInfo, loading } = useWeb3AuthUser();
console.log(
"userInfo",
userInfo,
"userInfo loading",
loading,
"isConnected",
isConnected,
);
return (
<div className="flex h-full w-full flex-col items-stretch justify-center md:max-w-[416px]">
<div className="flex flex-col items-center justify-center gap-3 py-6">
<div className="flex items-center justify-center">
<div className="text-card-foreground justify-start text-2xl font-semibold leading-normal">
Welcome to OpenSci Lab
</div>
</div>
<div className="flex items-center justify-center self-stretch">
<div className="text-muted-foreground flex-1 justify-start text-center font-['Inter'] text-sm font-normal leading-tight">
Login with new account to sign up
</div>
</div>
</div>
<div className="flex w-full items-center justify-center">
<Button
className="w-full"
onClick={() => {
// connect();
}}
>
{/* {isPending && <Loader2Icon className="animate-spin" />} */}
Sign In
</Button>
</div>
</div>
);
});
`
The console keeps giving warnings
