here is my vite config
import { exec } from 'node:child_process';
import path from 'node:path';
import { TanStackRouterVite } from '@tanstack/router-plugin/vite';
import react from '@vitejs/plugin-react';
import rollupNodePolyFill from 'rollup-plugin-polyfill-node';
import type { Plugin } from 'vite';
import { defineConfig } from 'vite';
import { nodePolyfills } from 'vite-plugin-node-polyfills';
import svgr from 'vite-plugin-svgr';
const dts: Plugin = {
name: 'dts-generator',
buildEnd: (error?: Error) => {
if (!error) {
return new Promise((res, rej) => {
exec('tsc --emitDeclarationOnly', (err) => (err ? rej(err) : res()));
});
}
},
};
// Configuring Vite | Vite
export default defineConfig({
define: {
global: 'globalThis',
'process.env': {},
},
esbuild: {
target: 'esnext',
},
build: { rollupOptions: { plugins: [rollupNodePolyFill()] } },
plugins: [
TanStackRouterVite(),
react(),
// svgr options: Options - SVGR
svgr({
// svgrOptions: { icon: true },
include: ['**/*.svg', '**/*.svg?react', '**/*.svg?src'],
}),
dts,
nodePolyfills({
protocolImports: true, // Polyfills for protocol imports like "fs/promises"
}),
],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
public: path.resolve(__dirname, './public'),
buffer: 'buffer',
},
},
});
And login page
import { useNavigate } from '@tanstack/react-router';
import { useWeb3Auth, useWeb3AuthConnect } from '@web3auth/modal/react';
import { useEffect, useState } from 'react';
import { MdOutlineAlternateEmail } from 'react-icons/md';
import AddIcon from '@/assets/icon/add.svg?react';
import { ButtonV1 } from '@/shared/ui/buttons';
export const Loading = () => {
const navigate = useNavigate();
const { connect } = useWeb3AuthConnect();
// const { isConnected } = useWeb3Auth();
const [active, setActive] = useState(1);
const handleClick = (value: number, to: string) => {
setActive(value);
setTimeout(() => {
navigate({ to });
}, 100);
};
const handleWeb3Auth = async () => {
try {
console.log('[Web3Auth] Starting connection...');
await connect();
console.log('[Web3Auth] Connection successful');
} catch (error) {
console.error('[Web3Auth] Connection failed:', error);
}
};
// useEffect(() => {
// console.log('[Web3Auth Status]:', isConnected);
// if (isConnected) {
// navigate({ to: '/wallet', replace: true });
// }
// }, [navigate, isConnected]);
return (
<div className="pb-6 h-full flex flex-col justify-between">
<div className="flex flex-col gap-2 px-3 z-10">
<ButtonV1
active={active === 1}
icon={<MdOutlineAlternateEmail size={24} />}
title="Login with Email"
subtitle="Use your email to login"
onClick={handleWeb3Auth}
/>
</div>
</div>
);
};
also my web3auth config
`import { WALLET_CONNECTORS, WEB3AUTH_NETWORK } from ‘
/modal’;
import type { Web3AuthContextConfig } from ‘
/modal/react’;
import { appConfig } from ‘@/appConfig’;
const web3AuthContextConfig: Web3AuthContextConfig = {
web3AuthOptions: {
clientId: appConfig.web3AuthToken,
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
uiConfig: {
loginMethodsOrder: [‘email_passwordless’],
},
modalConfig: {
connectors: {
[WALLET_CONNECTORS.AUTH]: {
label: ‘auth’,
loginMethods: {
email_passwordless: {
name: ‘email passwordless login’,
authConnectionId: ‘dex-email’,
authConnection: ‘email_passwordless’,
},
},
},
},
},
},
};
export default web3AuthContextConfig;`
<meta charset="UTF-8" />
<meta
name="viewport"
content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>`
