​
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

NameDescription
prefilled-emailUsed to prefill the email input field
langUsed to specify the language of the content within the element
experimentalA 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

components/HankoAuth.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 HankoAuth() {
  useEffect(() => {
   register(hankoApi)
      .catch((error) => {
        // handle error
      });
  }, []);

return (
<hanko-auth />
);
}

​
Frontend

components/HankoAuth.tsx
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 />;
}

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.

Was this page helpful?

IntroductionProfile Component