Seamless Authentication in Next.js with Hanko: Implementing Passwordless Login, Passkeys, and Multi-Factor Authentication

#hanko #hacktoberfest #hankoauth #hankoweb

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:

Install Node.js
Make sure you have Node.js installed. If not, download and install it from nodejs.org.
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.