This repo demonstrates how to integrate Hanko with Next.js App router for authentication and user management.
Hanko is an open-source authentication and user management solution with a focus on moving the login beyond passwords while being 100% deployable today.
- Built for passkeys as introduced by Apple, Google, and Microsoft
- Fast integration with Hanko Elements web components (login box and user profile)
- API-first, small footprint, cloud-native
Before you begin, ensure you have the following:
- Node.js installed (version 20.0.0 or later)
- Hanko API URL from Hanko Cloud
Note: You'll need to create a Authentication Project on Hanko Cloud with the App URL
http://localhost:3000
. See our docs to learn how to setup a auth project.
- Clone the repository
git clone https://github.com/teamhanko/hanko-nextjs-starter.git
-
Set up environment variables
- Create a
.env
file in the root directory and add the following environment variables:
NEXT_PUBLIC_HANKO_API_URL=your-hanko-api-url
- Replace
your-hanko-api-url
with your actual Hanko API URL.
- Create a
-
Install the dependencies using your preferred package manager (e.g.,
npm
,pnpm
,yarn
, orbun
). For this project, we've usedpnpm
:
pnpm install
- Start the development server:
pnpm dev
-
Start the application:
- Access the application by navigating to
http://localhost:3000
in your web browser.
- Access the application by navigating to
-
Navigate to login page and experience Hanko Authentication.
Feel free to reach out to us on Discord if you get into any issues.
This project is licensed under the MIT License.