Auth Component

A web component that handles user login and user registration.

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

Nextjs (App directory)

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 />
);
}

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 />
);
}

components/HankoAuth.tsx

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 />
  );
}

login.vue

<template>
  <hanko-auth />
</template>

HankoAuth.svelte

<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} />

Login.tsx

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

Create React App

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 />;
}

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 />;
}

components/HankoAuth.tsx

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 />;
}

HankoAuth.vue

<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>

HankoProfile.svelte

<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 />

login.html

<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.