A step-by-step guide to create a custom login page using the Hanko FlowAPI.
hanko-frontend-sdk
. The
resulting page supports email and passcode login, as well as passwords, passkeys, and passkey autofill. It also includes
session management features, such as redirecting after login and handling logout functionality. The FlowAPI is part of
Hanko, a user authentication platform, and we’ll use a Hanko Cloud project configured for simplicity.
By the end, you’ll have a working login page that:
/login
endpoint.http://localhost:3000
and authenticates a test user.Create a Hanko Cloud Project
http://localhost:3000
(where the login page will run locally).Configure the Project
Create a Test User
Obtain your API URL
https://<project-id>.hanko.io
).Set Up the Project Structure
hanko-login-page
) and set up the following files:Update 'package.json'
Install Dependencies
Update 'index.html' (the login page)
Update 'success.html' (shown after login)
Update 'style.css'
Start the Local Server
http://localhost:3000
in your browser to verify the page loads (it will be empty until we add JavaScript).script.js
, initialize the Hanko instance and start the login flow. If the user is on success.html
, set up logout
functionality instead.
https://<your-project-id>.hanko.io
with your project’s API endpoint from the Hanko Cloud dashboard.hanko.onAfterStateChange
event is
used to update the UI after state transitions. We’ll also create a generateInput
function to dynamically generate input
elements with validation attributes (e.g., minlength, maxlength, required) based on the FlowAPI’s input metadata.
Add the following code to the script.js
file:
hanko.onAfterStateChange
event ensures the UI updates after each action, and hanko.onSessionCreated
redirects
to success.html
on successful login.success.html
, the logout button calls hanko.logout()
, and hanko.onUserLoggedOut
redirects back to the
index.html
.state.actions.<action>.inputs.<input>.error
and displays the
message (e.g., invalid passcode).state.error.message
.Run the Application
http://localhost:3000
, no 2FA, device trust
“Never”).API_URL
in script.js
with your Hanko Cloud project’s API endpoint.http://localhost:3000
in your browser.Test the Login Flow
success.html
.Troubleshooting
http://localhost:3000
.API_URL
in script.js
.autocomplete="username webauthn"
.hanko-frontend-sdk
to handle email/passcode login.login_init
state.