6b349378e0
### What Adds exportable server functions for `login`, `logout` and `refresh` that are fully typed and ready to use. ### Why Creating server functions for these auth operations require the developer to manually set and handle the cookies / auth JWT. This can be a complex and involved process - instead we want to provide an option that will handle the cookies internally and simplify the process for the user. ### How Three re-usable functions can be exported from `@payload/next/server-functions`: - login - logout - refresh Examples of how to use these functions will be added to the docs shortly, along with more in-depth info on server functions.
37 lines
962 B
TypeScript
37 lines
962 B
TypeScript
'use client'
|
|
|
|
import { type ChangeEvent, type FormEvent, useState } from 'react'
|
|
|
|
import { loginFunction } from './loginFunction.js'
|
|
|
|
const LoginForm = () => {
|
|
const [email, setEmail] = useState<string>('')
|
|
const [password, setPassword] = useState<string>('')
|
|
|
|
return (
|
|
<form onSubmit={() => loginFunction({ email, password })}>
|
|
<label htmlFor="email">Email</label>
|
|
<input
|
|
id="email"
|
|
onChange={(e: ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)}
|
|
placeholder="Email"
|
|
required
|
|
type="email"
|
|
value={email}
|
|
/>
|
|
<label htmlFor="password">Password</label>
|
|
<input
|
|
id="password"
|
|
onChange={(e: ChangeEvent<HTMLInputElement>) => setPassword(e.target.value)}
|
|
placeholder="Password"
|
|
required
|
|
type="password"
|
|
value={password}
|
|
/>
|
|
<button type="submit">Custom Login</button>
|
|
</form>
|
|
)
|
|
}
|
|
|
|
export default LoginForm
|