[Archive] Web3auth-wagmi-connector issues with presisting connection

Embedded Wallets (Web3Auth)
1

:classical_building: Archived Content from Web3Auth Community

This topic was originally posted by josephrios56 on 8/23/2023.
This content has been migrated from our previous community forum to preserve valuable discussions.

when logging in with social auths like email and gmail wagmi gets the connection but upon refresh of app the connection is lost and doesn’t reconnect is there a way to presist connections like other connectors ?

2

@josephrios56 Thanks for reaching out.

Your request has been forwarded to our team and we will get back to you with further updates once more information becomes available.

3

We do offer session management for PnP Web SDKs. The Session Management feature allows checking and maintaining existing sessions with Web3Auth.

During login with Web3Auth, pass the sessionTime parameter. It will allow users to stay authenticated with Web3Auth for up to 1 day by default or a maximum of 7 days until they log out or their session data is cleared.

4

this doesnt fix my issue since the connection is lost right when logged in and refreshing

import { get, writable } from 'svelte/store';
import { base } from '@wagmi/core/chains';
import { WalletConnectConnector } from '@wagmi/core/connectors/walletConnect';
import { CoinbaseWalletConnector } from '@wagmi/core/connectors/coinbaseWallet';
import { alchemyProvider } from '@wagmi/core/providers/alchemy';
import { publicProvider } from '@wagmi/core/providers/public';
import { EthereumClient, w3mProvider } from '@web3modal/ethereum';
import { Web3Modal } from '@web3modal/html';
import { auth } from '$services/auth';
import { CoinbaseLogo, Web3AuthLogo } from '$assets/wallets';
import { Web3AuthConnector } from '@web3auth/web3auth-wagmi-connector';
import { Web3AuthNoModal } from '@web3auth/no-modal';
import { EthereumPrivateKeyProvider } from '@web3auth/ethereum-provider';
import { OpenloginAdapter } from '@web3auth/openlogin-adapter';
import { TorusWalletAdapter } from '@web3auth/torus-evm-adapter';
import {
	CHAIN_NAMESPACES,
	WALLET_ADAPTERS,
	ADAPTER_EVENTS,
	type CONNECTED_EVENT_DATA
} from '@web3auth/base';
import {
	PUBLIC_WALLETCONNECT_PROJECTID,
	PUBLIC_ALCHEMY_KEY,
	PUBLIC_WEB3AUTH_ID
} from '$env/static/public';
import {
	InjectedConnector,
	configureChains,
	createConfig,
	getAccount,
	disconnect,
	Connector,
	type GetAccountResult
} from '@wagmi/core';

// subscribe to lifecycle events emitted by web3auth

const subscribeAuthEvents = (web3auth: Web3AuthNoModal) => {

web3auth.on(ADAPTER_EVENTS.CONNECTED, (data: CONNECTED_EVENT_DATA) => {

console.log(‘connected to wallet’, data);

// web3auth.provider will be available here after user is connected

});

web3auth.on(ADAPTER_EVENTS.CONNECTING, () => {

console.log(‘connecting’);

});

web3auth.on(ADAPTER_EVENTS.DISCONNECTED, () => {

console.log(‘disconnected’);

connected.set(false);

chainId.set(null);

user.set(null);

signerAddress.set(null);

});

web3auth.on(ADAPTER_EVENTS.ERRORED, (error) => {

console.log(‘error’, error);

});

web3auth.on(ADAPTER_EVENTS.NOT_READY, (error) => {

console.log(‘NOT_READY’, error);

}),

web3auth.on(ADAPTER_EVENTS.ADAPTER_DATA_UPDATED, (account) => {

console.log(‘account data updated’, account);

}),

web3auth.on(ADAPTER_EVENTS.CACHE_CLEAR, (account) => {

console.log(‘cache cleared’, account);

});

};


const projectId = PUBLIC_WALLETCONNECT_PROJECTID;

const defaultChains = [base];


type addressType = 0x${string};


export const connected = writable<boolean>(false);

export const user = writable<ProfileMetadata | null>(null);

export const chainId = writable<number | null>(null);

export const signerAddress = writable<addressType | null>(null);

export const web3Modal = writable<Web3Modal | null>(null);

export const configuredConnectors = writable<Connector>();

export const web3Auth = writable<Web3AuthNoModal | null>(null);


export const config = async () => {

const { chains, publicClient, webSocketPublicClient } = configureChains(defaultChains, [

alchemyProvider({ apiKey: PUBLIC_ALCHEMY_KEY }),

w3mProvider({ projectId }),

publicProvider()

]);


const chainConfig = {
	chainNamespace: CHAIN_NAMESPACES.EIP155,
	chainId: '0x' + chains[0].id.toString(16),
	rpcTarget: chains[0].rpcUrls.default.http[0] as string,
	tickerName: chains[0].nativeCurrency?.name,
	displayName: chains[0].name,
	ticker: chains[0].nativeCurrency?.symbol,
	blockExplorer: chains[0]?.blockExplorers.default?.url as string
};

const web3AuthInstance = new Web3AuthNoModal({
	clientId: PUBLIC_WEB3AUTH_ID,
	chainConfig,
	web3AuthNetwork: 'cyan',
	sessionTime: 86400 * 7
});

// Add openlogin adapter for customisations
const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } });
const openloginAdapterInstance = new OpenloginAdapter({
	privateKeyProvider,
	adapterSettings: {
		network: 'cyan',
		whiteLabel: {
			name: 'wagr',
			logoLight: 'https://web3auth.io/images/w3a-L-Favicon-1.svg',
			logoDark: 'https://web3auth.io/images/w3a-D-Favicon-1.svg',
			defaultLanguage: 'en',
			dark: true // whether to enable dark mode. defaultValue: false
		}
	}
});
web3AuthInstance.configureAdapter(openloginAdapterInstance);

const torusWalletAdapter = new TorusWalletAdapter({
	initParams: {
		whiteLabel: {
			theme: {
				isDark: true,
				colors: { torusBrand1: '#FFA500' }
			},
			logoDark: 'https://images.web3auth.io/web3auth-logo-w.svg',
			logoLight: 'https://images.web3auth.io/web3auth-logo-w-light.svg',
			topupHide: true,
			featuredBillboardHide: true,
			disclaimerHide: true,
			defaultLanguage: 'en'
		}
	}
});

web3AuthInstance.configureAdapter(torusWalletAdapter);

let defaultConnectors: any[] = [];
defaultConnectors = [
	...defaultConnectors,
	new Web3AuthConnector({
		chains,
		options: {
			web3AuthInstance,
			loginParams: {
				loginProvider: WALLET_ADAPTERS.OPENLOGIN
			}
		}
	}),
	new InjectedConnector({
		chains,
		options: {
			shimDisconnect: true,
			name: (detectedName) =&gt;
				`Injected ${typeof detectedName === 'string' ? detectedName : detectedName.join(', ')}`
		}
	}),
	new WalletConnectConnector({
		chains,
		options: {
			showQrModal: false,
			projectId
		}
	}),
	new CoinbaseWalletConnector({
		options: {
			appName: 'gamblr',
			jsonRpcUrl: `https://eth-mainnet.alchemyapi.io/v2/${PUBLIC_ALCHEMY_KEY}`
		}
	})
];
configuredConnectors.set(defaultConnectors);
const wagmiConfig = createConfig({
	autoConnect: true,
	webSocketPublicClient,
	publicClient,
	connectors: defaultConnectors
});

const ethereumClient = new EthereumClient(wagmiConfig, chains);
const options: any = {
	projectId,
	themeMode: 'dark',
	defaultChain: base,
	walletImages: {
		coinbaseWallet: CoinbaseLogo,
		web3auth: Web3AuthLogo
	},
	themeVariables: {
		'--w3m-background-image-url': '#0D0F14',
		'--w3m-background-color': '#CFFF12',
		'--w3m-accent-color': '#CFFF12',
		'--w3m-accent-fill-color': '#0D0F14'
	}
};
const modal = new Web3Modal(options, ethereumClient);
// const modal = new Web3Modal({ wagmiConfig, projectId, chains });
await web3AuthInstance.init();
web3Auth.set(web3AuthInstance);
web3Modal.set(modal);
return { init };



};


const init = async () => {

try {

subscribeAuthEvents(get(web3Auth) as Web3AuthNoModal);

const data = await auth.getMe();

if (!data.error) {

const account = await waitForAccount();

if (account.address) {

const metadata: ProfileMetadata = Object.assign(data.users, data.profiles);

user.set(metadata);

connected.set(true);

signerAddress.set(account.address);

}

}

} catch (err) {

console.error(err);

}

};


export const disconnectWagmi = async () => {

const account = getAccount();

console.log(account);

if (account.isConnected) await disconnect();

connected.set(false);

chainId.set(null);

user.set(null);

signerAddress.set(null);

};


const waitForAccount = (): Promise<GetAccountResult> =>

new Promise((resolve, reject) => {

const attemptToGetAccount = () => {

const account = getAccount();

if (account.isDisconnected) reject(‘account is disconnected’);

if (account.isConnecting) {

// If the account is still connecting, try again after a delay

setTimeout(attemptToGetAccount, 100); // 1000ms delay, adjust to fit your needs

} else {

// If the account is no longer connecting, resolve the promise

resolve(account);

}

};


	attemptToGetAccount();
});

here is a file im using web3authnomodal