Creating Wallets with JWT

If your app uses JWTs for authentication, you can use ZeroDev to seamlessly create a smart wallet for each user. Follow these steps:

Visit the Dashboard.
Click on the Auth0 / JWT tab in the lower left corner.
Enter your JWKS credentials in the JWT Wallet section and click Save.

JWKS stands for JSON Web Key Set. It is a standard for representing a set of cryptographic keys, specifically public keys, in a JSON format. These public keys are used to verify the signatures of JWTs in various security and identity protocols, such as OAuth 2.0 and OpenID Connect. If you are unsure how to retrieve your JWKS endpoint, join our Discord and ask.

Currently, integrating with JWTs involves some manual setup on our side. Upon saving your JWKS credentials, we will set up the integration within 24 business hours and email you to confirm. If in doubt, you can get in touch with us on Discord or email [email protected].

Wagmi

import { JWTWalletConnector } from '@zerodev/wagmi'

const jwtConnector = new JWTWalletConnector({options: {
    projectId: '<your-project-id>',
    jwt: "<your user's JWT token>"
}})

Example:

info

For each connection, we assign a new userID, which in turn creates a new wallet or address. In a real-life scenario, the userID would remain constant, ensuring that the wallet and address also remain constant.

Full Code (Editable)

function WagmiJWTExample() {
    const [jwt, setJWT] = useState('')
    const userId = window.crypto.getRandomValues(new Uint32Array(4)).join('-')

    useEffect(() => {
        fetch(`https://jwt-issuer.onrender.com/create-jwt/${userId}`).then(response => {
            response.text().then(setJWT)
        })
    }, [])

    const { chains, publicClient, webSocketPublicClient } = configureChains(
        [polygonMumbai],
        [infuraProvider({apiKey: infuraApiKey})],
    )
    const config = createConfig({
        autoConnect: false,
        publicClient,
        webSocketPublicClient,
    })

    const jwtConnector = new JWTWalletConnector({chains, options: {
        projectId: defaultProjectId,
        jwt
    }})

    const ConnectButton = () => {

        const [loading, setLoading] = useState(false)
        const { connect, error, isLoading, pendingConnector } = useConnect()
        const { address, connector, isConnected } = useAccount()
        const { disconnect } = useDisconnect()
        const { chain } = useNetwork()

        const connectWallet = async () => {
            setLoading(true)
            await connect({
                connector: jwtConnector
            })
            setLoading(false)
        }


        if (isConnected) {
            return (
                <div>
                    <div>{address}</div>
                    <div>Connected to {connector.name}</div>
                    <a href={`${chain.blockExplorers.default.url}/address/${address}`} target="_blank">Explorer</a><br />
                    <button onClick={() => {
                      disconnect()
                      fetch(`https://jwt-issuer.onrender.com/create-jwt/${userId}`).then(response => {
                          response.text().then(setJWT)
                      })
                    }}>Disconnect</button>
                </div>
            )
        }
        return (
            <button disabled={isLoading || loading || !jwt} onClick={connectWallet}>
                {isLoading || loading ? 'loading...' : 'Connect with JWT'}
            </button>
        )
  }

  return (
    <WagmiConfig config={config}>
      <ConnectButton />
    </WagmiConfig>
  )
}

function WagmiJWTExample() {
    const [jwt, setJWT] = useState('')
    const userId = window.crypto.getRandomValues(new Uint32Array(4)).join('-')

    useEffect(() => {
        fetch(`https://jwt-issuer.onrender.com/create-jwt/${userId}`).then(response => {
            response.text().then(setJWT)
        })
    }, [])

    const { chains, publicClient, webSocketPublicClient } = configureChains(
        [polygonMumbai],
        [infuraProvider({apiKey: infuraApiKey})],
    )
    const config = createConfig({
        autoConnect: false,
        publicClient,
        webSocketPublicClient,
    })

    const jwtConnector = new JWTWalletConnector({chains, options: {
        projectId: defaultProjectId,
        jwt
    }})

    const ConnectButton = () => {

        const [loading, setLoading] = useState(false)
        const { connect, error, isLoading, pendingConnector } = useConnect()
        const { address, connector, isConnected } = useAccount()
        const { disconnect } = useDisconnect()
        const { chain } = useNetwork()

        const connectWallet = async () => {
            setLoading(true)
            await connect({
                connector: jwtConnector
            })
            setLoading(false)
        }


        if (isConnected) {
            return (
                <div>
                    <div>{address}</div>
                    <div>Connected to {connector.name}</div>
                    <a href={`${chain.blockExplorers.default.url}/address/${address}`} target="_blank">Explorer</a><br />
                    <button onClick={() => {
                      disconnect()
                      fetch(`https://jwt-issuer.onrender.com/create-jwt/${userId}`).then(response => {
                          response.text().then(setJWT)
                      })
                    }}>Disconnect</button>
                </div>
            )
        }
        return (
            <button disabled={isLoading || loading || !jwt} onClick={connectWallet}>
                {isLoading || loading ? 'loading...' : 'Connect with JWT'}
            </button>
        )
  }

  return (
    <WagmiConfig config={config}>
      <ConnectButton />
    </WagmiConfig>
  )
}

Result

Ethers

import { ZeroDevWeb3Auth } from '@zerodev/web3auth'

let ecdsaProvider: ECDSAProvider
const instance = new ZeroDevWeb3Auth([defaultProjectId])
instance.initialize({onConnect: async () => {
  ecdsaProvider = await ECDSAProvider.init({
    projectId: defaultProjectId,
    owner: getRPCProviderOwner(provider),
  });
}}, 'jwt')

instance.login('jwt', {jwt: '<your-jwt>'})