Features
Passkeys make a passwordless login possible.
Passcodes - perfect for authentication and email verification.
Mobile biometrics bring passkeys to your native mobile apps.
FIDO Security Keys for the best possible security.
OAuth SSO to quickly add 3rd-party identity providers to your login.
Passwords to include users who can’t go passwordless yet.
Usage
Markup
<hanko-auth></hanko-auth>
Attributes
| Name | Description |
|---|
prefilled-email | Used to prefill the email input field |
lang | Used to specify the language of the content within the element |
experimental | A space-separated list of experimental features to be enabled |
Adding <hanko-auth> component
Examples showcasing how to add <hanko-auth> component in different full stack and frontend frameworks.
Full Stack
"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} />
const endpoint = "HANKO_API_URL";
const code = `
import { register } from 'https://esm.sh/@teamhanko/hanko-elements@0.5.5-beta';
register('${endpoint}', { shadow: true });
document.addEventListener('hankoAuthSuccess', (event) => {
document.location.href = '/protected';
});
`;
export default function Login() {
return (
<div class="auth-container">
<hanko-auth api={endpoint}></hanko-auth>
<script type="module">
{code}
</script>
</div>
);
}
Frontend
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-profile />
<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.
