Canvas

Appearance

Managing Sessions ​

We provide React components for managing users' sessions, so they can log in and out of your application with one click.

These are built as a layer of abstraction above session signers. Currently, these components support signing in with Ethereum and Farcaster.

Adding the Auth Provider ​

In the file where your React application is configured, wrap your application with AuthProvider:

ts
import { AuthProvider } from "@canvas-js/hooks"
import { App } from "./App.js"

const root = ReactDOM.createRoot(document.getElementById("root")!)

root.render(
	<AuthProvider>
		// other providers here
		<App />
	</AuthProvider>,
)

Using Auth Components ​

Now you can use any of the provided auth components in your application:

  • The ConnectSIWE component supports in-browser Ethereum wallets.
  • The ConnectSIWF component supports in-browser and in-frame Farcaster miniapps.

Each one will render a button, which toggles between logged-in and logged-out states, which you can customize with your own styles.

ts
import { useSIWE } from "@canvas-js/hooks/components"

const MyComponent = () => {
	const app = useCanvas(...)
	const buttonStyles = { ... }

  const { ConnectSIWE } = useSIWE(app)
  const { ConnectSIWF } = useSIWF(app)

	return <div className="user-login">
		<ConnectSIWE app={app} buttonStyles={buttonStyles} />
		<ConnectSIWF app={app} buttonStyles={buttonStyles} />
	</div>
}

Other considerations ​

If you are using SIWFSigner, you'll need to wrap your application in the provider given to you by @farcaster/auth-kit.

For miniapp frames, you'll also need to set up .well-known/farcaster.json in your app's public directory.

ts
import { AuthKitProvider } from "@farcaster/auth-kit"

const root = ReactDOM.createRoot(document.getElementById("root")!)
const config = {
	// insert farcaster auth config...
}

root.render(
	<AuthKitProvider>
		<AuthKitProvider config={farcasterConfig}>
			<App />
		</AuthKitProvider>
	</AuthKitProvider>
)