Are you an LLM? Read llms.txt for a summary of the docs, or llms-full.txt for the full context.
Skip to content

Signup & Login

Add passkey authentication to your app with a single method call. Users authenticate with Face ID or Touch ID - no passwords, no seed phrases.

Using wagmi

Wagmi provides hooks to integrate 1auth authentication into your React app.

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.app', 
  clientId: 'my-app', 
}) 
 
// Create the wagmi config with 1auth connector
export const config = createConfig({
  chains: [base],
  connectors: [oneAuth({ client, chainId: base.id })], 
  transports: {
    [base.id]: http(),
  },
})

Display sign in button

Create a component that connects users with their passkey. The connectors array contains the 1auth connector from your config:

SignInButton.tsx
import { useConnect } from 'wagmi'
 
export function SignInButton() {
  const { connectors, connect } = useConnect()
  const connector = connectors.find((c) => c.id === '1auth') 
 
  return (
    <button onClick={() => connect({ connector })}>
      Sign in with 1auth
    </button>
  )
}

Display account & sign out

After the user signs in, display their account and provide a sign out button:

Done

You have successfully set up passkey authentication with 1auth!

Using the SDK directly

If you prefer not to use wagmi, call the SDK's authenticate() method directly:

import { OneAuthClient } from '@rhinestone/1auth'
 
const client = new OneAuthClient({
  providerUrl: 'https://passkey.1auth.app',
  clientId: 'my-app',
})
 
// Authenticate or create an account
const result = await client.authenticate()
 
if (result.success) {
  console.log('Address:', result.session.accountAddress)
}

How it works

  1. User clicks sign in — your app calls authenticate() or uses the wagmi connector.
  2. Identity dialog opens — the user verifies email or OAuth identity.
  3. Passkey prompt opens in the app page — WebAuthn uses the exact page hostname as its RP ID.
  4. Success — you receive the smart-account address derived from https://<hostname>.

App-origin is the SDK default with or without clientId; clientId supplies app metadata but does not select the RP namespace. The cross-origin compatibility surface is experimental and requires webauthn: { mode: 'experimental_cross_origin' }.

Next steps