Explore Snowball
No recent searches
No results found
Getting Started
Lit provides a simple way to integrate Google authentication into your application. This guide will walk you through the process of setting up Google authentication with Lit.
First ensure you've installed the necessary packages:
npm install @snowballtools/js-sdk @snowballtools/auth-lit
Then initialize Snowball with Google auth:
import { Snowball, SnowballChain } from '@snowballtools/js-sdk'
import { LitGoogleAuth } from '@snowballtools/auth-lit'
const snowball = Snowball.withAuth({
google: LitGoogleAuth.configure({
litRelayApiKey: 'your-lit-relay-api-key',
})
}).create({
apiKey: 'your-snowball-api-key',
initialChain: SnowballChain.sepolia
});
There are three key points you need to interact with Google auth:
startOAuthRedirect()
handleOAuthRedirectBack()
getEthersWallet()
There is also the additional canHandleOAuthRedirectBack()
function, which is useful for
determining whether or not the current page load is a redirect back from Google.
Note that these are functions on the snowball.auth.google
object, so you would access them like so:
snowball.auth.google.startOAuthRedirect()
snowball.auth.google.canHandleOAuthRedirectBack()
snowball.auth.google.handleOAuthRedirectBack()
snowball.auth.google.getEthersWallet()
Here's an example of how you might use Google auth in a React application.
First make sure you've initialized Snowball as shown above, as well as integrated the useSnowball hook.
Then you can use the useSnowball
hook to access your Snowball instance:
function LoginComponent() {
const snowball = useSnowball()
const google = snowball.auth.google
async function handleSigninRedirect() {
if (!google.canHandleOAuthRedirectBack()) {
return
}
await google.handleOAuthRedirectBack()
// Gets the wallet attached to the user's Google account π
const wallet = await google.getEthersWallet()
}
useEffect(() => {
// Check on page load
handleSigninRedirect()
}, [])
return (
<div>
<button
onClick={() => {
google.startOAuthRedirect();
}}
disabled={!!google.state.loading}
>
Login with Google
</button>
{google.state.error && (
<div>Error logging in: {error}</div>
)}
</div>
)
}