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:

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.
• The ConnectSIWEBurner component generates a temporary burner wallet in localStorage.
• Additionally, the Logout component generates a button to sign out.

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

import { useSIWE } from "@canvas-js/hooks/components"
import { Chat } from "./contract"

const MyComponent = () => {
	const { app } = useCanvas({
	  topic: "example.xyz",
	  contract: Chat
	})
	const buttonStyles = { ... }

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

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

Make sure that these hooks are called inside AuthProvider. If you use the hooks in the same component where AuthProvider is used, they won't work.

Other considerations

If you are using SIWFSigner, you must to wrap your application in the @farcaster/auth-kit provider.

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

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

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

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