crisp slate
I get this error
Unhandled Runtime Error
Error: Client Functions cannot be passed directly to Server Functions. Only Functions passed from the Server can be passed back again.
when I click submit
'use client'
import {
FormEvent,
useEffect, useState,
} from 'react'
import { supported } from '@github/webauthn-json'
import { submitRegistration } from '@app/actions'
const Register = () => {
const [username, setUsername] = useState('')
const [email, setEmail] = useState('')
const [error, setError] = useState('')
const [isAvailable, setIsAvailable] = useState<boolean | null>(null)
useEffect(() => {
const checkAvailability = async () => {
const available = await PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable()
setIsAvailable(available && supported())
}
checkAvailability()
}, [])
const handleFormSubmit = async (event: FormEvent) => {
console.log('📙📙==CLIENT HANDLE FORM EVENT===')
event.preventDefault()
await submitRegistration(
email,
username,
setError,
)
}
return (
<>
<h1>Register Account</h1>
{isAvailable ? (
<form
method="POST"
onSubmit={handleFormSubmit}
>
<input
type="text"
id="username"
name="username"
placeholder="Username"
value={username}
onChange={(event) => setUsername(event.target.value)}
/>
<input
type="email"
id="email"
name="email"
placeholder="Email"
value={email}
onChange={(event) => setEmail(event.target.value)}
/>
<input type="submit" value="Register" />
{error != null ? <pre>{error}</pre> : null}
</form>
) : (
<p>Sorry, webauthn is not available.</p>
)}
</>
)
}
export default Register
lavish lance