Learn how to quickly add authentication and user profile in your Next.js app using Hanko.
@teamhanko/hanko-elements
hanko-auth
and hanko-profile
.
APP URL
.
(Most likely http://localhost:3000).env
file.
components
and create two files, HankoAuth.tsx
and HankoProfile.jsx
.
custom.d.ts
and place it in your apps root / src folder.
HankoAuth.tsx
file to create a functioning login page.
Here we subscribe to the onSessionCreated
event, this triggers when a user successfully logs in. You can use these event to perform any desired action. (e.g. redirect to your dashboard).
For more information please refer to the Auth Component Page.
HankoProfile.jsx
file to create an interface where users can
manage their Email Addresses
and credentials.
For more information please refer to the Profile Component Page.
HankoProfile
component, simply import it into any page.
@teamhanko/hanko-elements
to easily logout users. Here we will make a logout button.
Create LogoutButton.tsx
and insert the code below.
hanko-auth
and hanko-profile
components using CSS variables and parts. Refer to our customization guide.
/dashboard
and /protected
.middleware.ts
file,/dashboard
, you should get redirected back.
dashboard
page to log some of the information from the user and session.
userID
from the session token, which you can use to fetch the user’s data from the Hanko Public API.