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.
Each one will render a button, which toggles between logged-in and logged-out states, which you can customize with your own styles.
import { ConnectSIWE } from "@canvas-js/hooks/components"
const MyComponent = () => {
const app = useCanvas(...)
const buttonStyles = { ... }
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.
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>
)