I am trying to create wagmi v2 connector for SFA custom auth .
The issue is connectAsync function from useAccount doesnt accept other then chainId and connectorId … how i will pass verifier , verifierId and idToken after user authentication ??
Note: verifier and verifierId can be hardcoded . But the access_token is dynamic so how to pass it to connector connect function ?
export const createWagmiConfig = () =>
createConfig({
chains,
connectors: [
Web3Auth({
clientId: env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID,
web3AuthNetwork: 'sapphire_devnet',
}),
],
transports: {
[polygon.id]: http(env.NEXT_PUBLIC_POLYGON_ALCHEMY_API_URL),
[polygonAmoy.id]: http(env.NEXT_PUBLIC_POLYGONAMOY_ALCHEMY_API_URL),
},
})
import { Options } from '@/interfaces/web3auth.options'
import { CHAIN_NAMESPACES } from '@web3auth/base'
import { EthereumPrivateKeyProvider } from '@web3auth/ethereum-provider'
import {
Web3AuthOptions,
Web3Auth as Web3AuthSfa,
} from '@web3auth/single-factor-auth'
import { createConnector } from 'wagmi'
import { web3Auth } from '@/config/connectors'
export interface Web3AuthParameters
extends Omit<Options, 'adapter' | 'web3authSfa'> {
web3AuthNetwork: Web3AuthOptions['web3AuthNetwork']
clientId: string
enableLogging?: boolean
}
const Web3Auth = (options: Web3AuthParameters) => {
return createConnector((config) => {
const chainConfig = {
chainId: '0x' + config.chains[0].id.toString(16),
displayName: config.chains[0].name,
chainNamespace: CHAIN_NAMESPACES.EIP155,
tickerName: config.chains[0].nativeCurrency.name,
ticker: config.chains[0].nativeCurrency?.symbol,
decimals: 18,
rpcTarget: config.chains[0].rpcUrls.default.http[0]!,
blockExplorer: config.chains[0].blockExplorers?.default.url[0] as string,
}
return web3Auth({
...options,
web3authSfa: new Web3AuthSfa({
clientId: options.clientId,
privateKeyProvider: new EthereumPrivateKeyProvider({
config: { chainConfig },
}),
web3AuthNetwork: options.web3AuthNetwork,
usePnPKey: false,
}),
})(config)
})
}
export default Web3Auth
and web3Auth is the connector with overriden functions .
connect function takes chainId and loginParams {verifier, verifierId, idToken}
but whenever i try to use
await connectAsync({
connector: connectors.find((c) => c.id === 'web3Auth')!,
chainId: 137,
verifierId,
idToken: accessToken,
verifier,
})
i get the error
Object literal may only specify known properties, and ‘verifierId’ does not exist in type ‘{ chainId?: number | undefined; connector: CreateConnectorFn | Connector; }’.
Hey @edmond the Wagmi is not supported with Web3Auth SFA yet, you can only use it with PnP SDKs. For SFA, you’ll have to create your own connector.
Yes correct i created my connector . I need some help regarding how to pass dynamic data to the connector . On initialize wagmi connectors i do not have idToken and verifierId … how to be able to pass those in order for the connector to work properly!
You have to add the id token and everything directly into the connector code. Wagmi will only trigger login function, within which you need to do the authentication by your auth provider and also web3auth login. As mentioned our connector won’t support it since it doesn’t have the code to trigger login for your authentication service within it.
You can fork our connector and add your service inside the connect function and it should be working for you.
i will to check how to dynamically provide that for the connector just before wagmi connect.
i will look into reconnect from wagmi and try to give web3auth connector with loginParams and here its idToken and verifierId. or maybe use context .
can u send me the link for web3auth connector to fork ! thx
async connect({ chainId }: { chainId?: number } = {}) {
try {
if (!this.ready) await this.activate()
config.emitter.emit('message', {
type: 'connecting',
})
await this.getProvider()
if (!web3authSfa) throw new web3authSfaMissingError()
if (!web3authSfa.connected) {
if (isIWeb3Auth(web3authSfa) && loginParams) {
// TODO fix here
await (web3authSfa as Web3Auth)?.connect?.(loginParams)
} else {
log.error(
'please provide valid loginParams when using @web3auth/single-factor-auth'
)
throw new UserRejectedRequestError(
'please provide valid loginParams when using @web3auth/single-factor-auth' as unknown as Error
)
}
}
const [accounts, connectedChainId] = await Promise.all([
this.getAccounts(),
this.getChainId(),
])
let unsupported = this.isChainUnsupported(connectedChainId)
let id: number | undefined = connectedChainId
if (chainId && connectedChainId !== chainId) {
// try switching chain
const chain = await this.switchChain?.({ chainId })
id = chain?.id
unsupported = this.isChainUnsupported(id)
}
if (!id)
throw new ChainDisconnectedError(
new Error('On connect chain id undefined!')
)
if (unsupported) throw new ChainNotConfiguredError()
this.onConnect()
return {
accounts,
chainId: id,
}
} catch (error) {
log.error('error while connecting', error)
this.onDisconnect()
throw new UserRejectedRequestError(
'Something went wrong' as unknown as Error
)
}
},
a snippet of the connector connect function … So i have to find a way to pass loginParams dynamically after having access_token and verifierId .
But i am happy to check web3auth connector.
The adapter is useful here or it is used only for PnP sdks ? @yashovardhan
Ok i have the connector github.
Hii @edmond could you help me with this i also want to use SFA in wagmi could you share github link here so it would be usefull for other’s too
ok once its stable and working as expected then yes i will .
We are working on an example to help you create your own wagmi connector. Please give a us week, we will be publishing that.
thats great . Even though my connector works but i am just trying to play with wagmi initial connectors config before i share with anyone else . But i would be happy to check your solution in case i miss something . Can you please take into consideration the custom Auth SFA sdk !
And if u can ping here the example url . Thank you @yashovardhan
I never saw any web sdk using client secret from dashboard ! Am i missing something ?
No, the client secret as of now doesn’t serve a major purpose outside the dashboard. It is basically used to enable whitelisting of urls. This is automatically handled for you in the dashboard itself.
Unfortunately not. We have a major launch coming next week which pushed this guide further. I’ll have something out hopefully by next week.
Hey @edmond
I’m sorry for the delay. There have been major changes in our SFA SDKs, which delayed this. We have released a new combined SDK that is being updated across our docs and examples, after which I can make this custom connector. Please wait a couple of weeks till the changes are propagated across our stack.