A step-by-step guide to create a custom login page using the Hanko FlowAPI.
hanko-frontend-sdk
. You’ll create a complete authentication interface that supports multiple login methods including email/passcode authentication, passwords, and passkeys with autofill capabilities. The page will include full session management with login redirects and logout functionality.
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.