Use Case The <hanko-register> component is ideal for building dedicated user registration flows in modern web applications. It provides a secure, flexible way to onboard new users with minimal setup—no need to build your own UI or manage complex authentication logic.
If you want to Combine Login and Register on the same page: try out the<hanko-auth> component .
If you want to create a dedicated Login page: try out the<hanko-login> component .
Features Register allows users to create new accounts. Passkeys Enables passwordless login with modern device credentials. Passcodes Useful for email-based login and verification workflows. 2FA Users can use a TOTP app or security keys. OAuth SSO Allows users to log in using third-party identity providers (e.g., Google, Apple). Passwords Supports traditional password-based login for broader accessibility.
Usage Markup < hanko-register ></ hanko-register > Attributes Name Description prefilledEmailUsed to prefill the email input field prefilledUsernameUsed to prefill the username input field langUsed to specify the language of the content within the element
Adding <hanko-register> component Examples showcasing how to add <hanko-register> component in different full stack and frontend frameworks.
Full Stack Nextjs (App directory) Nextjs (Pages directory) Nuxt SvelteKit components/HankoRegister.tsx
"use client" import { useEffect } from "react" ; import { register } from "@teamhanko/hanko-elements" ; const hankoApi = process . env . NEXT_PUBLIC_HANKO_API_URL ; export default function HankoRegister () { useEffect (() => { register ( hankoApi ) . catch (( error ) => { // handle error }); }, []); return ( < hanko-register /> ); } components/HankoRegister.tsx
"use client" import { useEffect } from "react" ; import { register } from "@teamhanko/hanko-elements" ; const hankoApi = process . env . NEXT_PUBLIC_HANKO_API_URL ; export default function HankoRegister () { useEffect (() => { register ( hankoApi ) . catch (( error ) => { // handle error }); }, []); return ( < hanko-register /> ); } components/HankoRegister.tsx
import { useEffect } from "react" ; import { register } from "@teamhanko/hanko-elements" ; const hankoApi = process . env . NEXT_PUBLIC_HANKO_API_URL ; export default function HankoRegister () { useEffect (() => { register ( hankoApi ) . catch (( error ) => { // handle error }); }, []); return ( < hanko-register /> ); } < template > < hanko-register /> </ template > < script > import { onMount } from "svelte" ; import { goto } from "$app/navigation" ; import { register } from "@teamhanko/hanko-elements" ; import { env } from "$env/dynamic/public" ; const hankoApi = env . PUBLIC_HANKO_API_URL ; const redirectAfterLogin = () => { goto ( "/dashboard" ); }; onMount ( async () => { register ( hankoApi ). catch (( error ) => { // handle error }); }); </ script > < hanko-register on:onSessionCreated = {redirectAfterLogin} /> Frontend Create React App React with Vite Vue Svelte JavaScript components/HankoRegister.tsx
import { useEffect } from "react" ; import { register } from "@teamhanko/hanko-elements" ; const hankoApi = process . env . REACT_APP_HANKO_API_URL ; export default function HankoRegister () { useEffect (() => { register ( hankoApi ). catch (( error ) => { // handle error }); }, []); return < hanko-register /> ; } components/HankoRegister.tsx
import { useEffect } from "react" ; import { register } from "@teamhanko/hanko-elements" ; const hankoApi = process . env . REACT_APP_HANKO_API_URL ; export default function HankoRegister () { useEffect (() => { register ( hankoApi ). catch (( error ) => { // handle error }); }, []); return < hanko-register /> ; } components/HankoRegister.tsx
import { useEffect } from "react" ; import { register } from "@teamhanko/hanko-elements" ; const hankoApi = import . meta . env . VITE_HANKO_API_URL ; export default function HankoRegister () { useEffect (() => { register ( hankoApi ). catch (( error ) => { // handle error }); }, []); return < hanko-register /> ; } < script setup > import { onMounted } from "vue" ; import { register } from "@teamhanko/hanko-elements" ; const hankoApi = process . env . HANKO_API_URL ; onMounted (() => { register ( hankoApi ) . catch (( error ) => { // handle error }); }); </ script > < template > < hanko-register /> </ template > < script > import { register } from "@teamhanko/hanko-elements" ; import { onMount } from "svelte" ; import { env } from "$env/dynamic/public" ; const hankoApi = env . PUBLIC_HANKO_API_URL ; onMount ( async () => { register ( hankoApi ). catch (( error ) => { // handle error }); }); </ script > < hanko-register /> < body > < hanko-register /> < script type = "module" > import { register } from "https://esm.run/@teamhanko/hanko-elements" ; await register ( process . env . HANKO_API_URL ); </ script > </ body > You should see an interface similar to this 👇
For more detailed instructions on integrating <hanko-register> component with your favorite frameworks, navigate to quickstart guides .
