Hanko provides authentication solutions using WebAuthn for secure passwordless sign-in. Here’s a step-by-step guide to setting up a signup form with Hanko and generating an API key for web integration:

Step 1: Sign Up for a Hanko Account

Go to Hanko’s website and create an account if you haven't already.
After signing up, log in to access the Hanko dashboard.

• Go to hanko.io website
  

• Sign up through google account
  

• Select account and continue
  

Step 2: Create a New Project in Hanko

Once logged in, navigate to the Projects section on the dashboard.
Select Create New Project and provide a project name.
The project page will open up with project details, including options to configure authentication settings.

• Create new project in hanko
  

• Select project type (go with first one)
  

• Give the project name and project url(is your project localhost url or hosting url)

Step 3: Generate an API Key

Inside the project dashboard, go to the API Keys section.
Select Create API Key and choose the permissions needed (e.g., read, write, admin).
Copy the generated API key and store it securely (.env file). You’ll need this to authenticate your requests from the frontend .

• create project and copy api_url

To set up a new Next.js with hanko auth project, you can follow these steps:

1. Install Node.js
   Make sure you have Node.js installed. If not, download and install it from nodejs.org.

2. Create a New Next.js Project
   Run the following command to create a new Next.js application with Create Next App:
   

npx create-next-app@latest hanko-io-example

• You'll be prompted to name the project.
• The command will install all required dependencies and set up the project structure.
• Navigate to the Project Directory

cd hanko-io-example

Project Structure Overview

App Directory

Components/: Directory for page components like: hanko-login, hanko-userprofile, hanko-logout.
Login/: Login folder.
User-page/: User folder.
Logout/: Logout folder.
next.config.js: Custom configurations for Next.js.
package.json: Project’s dependencies(Hanko-Element) and scripts .

Hanko Elements

Provides web components that will bring a modern login and registration experience to your users. It integrates the Hanko API, a backend that provides the underlying functionalities.

Install hanko-element package

npm i @teamhanko/hanko-elements

create .env file in your project directory and save your hanko_api_url code

1. Login page

login form

hanko auth login code components with api_url

hanko auth components use import and use in login page

2. Register with OTP starting

Create Password

Create Passkey

Granted to create a passkey

Create your recovery PIN

Finally passkey saved and PIN created

3. User Profile

• User profile here you can add email id, edit password and passkey

4. Logout

• After logout it redirect you to login page

5. MyHanko home page