Follow these steps to initialize authentication with Hanzo Auth for your project:
-
Install package with
pnpm i @hanzo/auth
-
Create custom Header component that includes an
AuthWidget
from @hanzo/auth. See example in luxdefi/sites repo -
Edit root layout component
// ... other imports
import { AuthServiceProvider } from '@hanzo/auth/service'
import { getUserServerSide } from '@hanzo/auth/server'
import type { AuthServiceConf } from '@hanzo/auth/types'
// custom header with AuthWidget
import Header from '@/components/header'
// ...other code
const RootLayout: React.FC<PropsWithChildren> = async ({
children
}) => {
const currentUser = await getUserServerSide()
return (
<AuthServiceProvider user={currentUser} conf={{} as AuthServiceConf}>
<RootLayoutCommon siteDef={siteDef} header={false} >
<Header siteDef={siteDef}/>
{children}
</RootLayoutCommon>
</AuthServiceProvider>
)
}
export default RootLayout
- Create
/api/auth/login
route.
import { NextRequest } from 'next/server'
import { handleLoginApiRequest } from '@hanzo/auth/server'
export async function POST(request: NextRequest) {
return handleLoginApiRequest(request)
}
- Create
/api/auth/logout
route.
import { handleLogoutApiRequest } from '@hanzo/auth/server'
export async function GET() {
return handleLogoutApiRequest()
}
- Create
/login
route that usesLoginComponent
from @hanzo/auth. See example in luxdefi/sites repo