Authentication

After users sign in, you can request them to sign messages for verification. This enables secure off-chain authentication without exposing passkey credentials.

Using wagmi

Wagmi provides hooks to sign messages with the user's passkey.

Install the SDK

npm install @rhinestone/1auth

Create config.ts

Create a wagmi config file with the 1auth connector:

config.ts

import { createConfig, http } from 'wagmi'
import { base } from 'wagmi/chains'
import { OneAuthClient } from '@rhinestone/1auth'
import { oneAuth } from '@rhinestone/1auth/wagmi'
 
// Create the 1auth client
const client = new OneAuthClient({ 
  providerUrl: 'https://passkey.1auth.box', 
}) 
 
// Create the wagmi config with 1auth connector
export const config = createConfig({
  chains: [base],
  connectors: [oneAuth({ client })], 
  transports: {
    [base.id]: http(),
  },
})

Sign a message

Use the useSignMessage hook to request a signature:

Verify on your backend

Send the signature to your backend for verification:

Example.tsx

import { useSignMessage, useAccount } from 'wagmi'
 
export function AuthenticatedAction() {
  const { address } = useAccount()
  const { signMessageAsync } = useSignMessage()
 
  const handleAuth = async () => {
    const message = `Sign in to MyApp\nTimestamp: ${Date.now()}`
 
    const signature = await signMessageAsync({ message })
 
    // Send to your backend for verification
    const response = await fetch('/api/verify', {
      method: 'POST',
      body: JSON.stringify({ message, signature, address }),
    })
 
    if (response.ok) {
      console.log('Authenticated!')
    }
  }
 
  return <button onClick={handleAuth}>Authenticate</button>
}

Done

You have successfully implemented message signing for authentication!

Using the SDK directly

If you prefer not to use wagmi, use the SDK's signMessage method:

const result = await client.signMessage({
  username: 'alice',
  message: `Sign in to MyApp\nTimestamp: ${Date.now()}`,
  description: 'Verify your identity',
})
 
if (result.success) {
  console.log('Signature:', result.signature)
  // Send to backend for verification
}

SignMessageOptions

Property	Type	Required	Description
`username`	`string`	Yes	Username of the signer
`message`	`string`	Yes	Human-readable message to sign
`challenge`	`string`	No	Custom challenge (defaults to message hash)
`description`	`string`	No	Description shown in the signing dialog
`metadata`	`Record<string, unknown>`	No	Additional data to display
`theme`	`ThemeConfig`	No	Theme configuration for the dialog

Security considerations

Include timestamps to prevent replay attacks
Include domain to prevent cross-site signature reuse
Verify on backend - never trust client-side verification alone
Use HTTPS for all API calls

Next steps

Checkout - Add payments with PayButton
Crosschain - Execute transactions on any chain