Use Case
The <hanko-auth>
component serves as a comprehensive authentication solution, seamlessly integrating both login and registration functionality within a unified interface. This component is specifically designed for applications seeking to streamline their authentication process by consolidating multiple authentication flows without requiring separate routes or pages.
The component intelligently manages state transitions between login and registration views, enabling effortless user authentication while maintaining a cohesive experience throughout the sign-in and registration process.
If you want to create a dedicated Login page:
try out the<hanko-login>
component .
If you want to create a dedicated Registration page:
try out the <hanko-register>
component .
Features
Login + Register Seamlessly handles both flows in one component. 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-auth ></ hanko-auth >
Attributes
Name Description prefilledEmail
Used to prefill the email input field prefilledUsername
Used to prefill the username input field lang
Used to specify the language of the content within the element mode
Speficy the starting flow, either registration
or login
Adding <hanko-auth>
component
Examples showcasing how to add <hanko-auth>
component in different full stack and frontend frameworks.
Full Stack
Nextjs (App directory) Nextjs (Pages directory) Nuxt SvelteKit "use client"
import { useEffect } from "react" ;
import { register } from "@teamhanko/hanko-elements" ;
const hankoApi = process . env . NEXT_PUBLIC_HANKO_API_URL ;
export default function HankoAuth () {
useEffect (() => {
register ( hankoApi )
. catch (( error ) => {
// handle error
});
}, []);
return (
< hanko-auth />
);
}
"use client"
import { useEffect } from "react" ;
import { register } from "@teamhanko/hanko-elements" ;
const hankoApi = process . env . NEXT_PUBLIC_HANKO_API_URL ;
export default function HankoAuth () {
useEffect (() => {
register ( hankoApi )
. catch (( error ) => {
// handle error
});
}, []);
return (
< hanko-auth />
);
}
import { useEffect } from "react" ;
import { register } from "@teamhanko/hanko-elements" ;
const hankoApi = process . env . NEXT_PUBLIC_HANKO_API_URL ;
export default function HankoAuth () {
useEffect (() => {
register ( hankoApi )
. catch (( error ) => {
// handle error
});
}, []);
return (
< hanko-auth />
);
}
< template >
< hanko-auth />
</ 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-auth on:onSessionCreated = {redirectAfterLogin} />
Frontend
Create React App React with Vite Vue Svelte JavaScript import { useEffect } from "react" ;
import { register } from "@teamhanko/hanko-elements" ;
const hankoApi = process . env . REACT_APP_HANKO_API_URL ;
export default function HankoAuth () {
useEffect (() => {
register ( hankoApi ). catch (( error ) => {
// handle error
});
}, []);
return < hanko-auth /> ;
}
import { useEffect } from "react" ;
import { register } from "@teamhanko/hanko-elements" ;
const hankoApi = process . env . REACT_APP_HANKO_API_URL ;
export default function HankoAuth () {
useEffect (() => {
register ( hankoApi ). catch (( error ) => {
// handle error
});
}, []);
return < hanko-auth /> ;
}
import { useEffect } from "react" ;
import { register } from "@teamhanko/hanko-elements" ;
const hankoApi = import . meta . env . VITE_HANKO_API_URL ;
export default function HankoAuth () {
useEffect (() => {
register ( hankoApi ). catch (( error ) => {
// handle error
});
}, []);
return < hanko-auth /> ;
}
< 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-auth />
</ 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-auth />
< body >
< hanko-auth />
< 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-auth>
component with your favorite frameworks, navigate to quickstart guides .