Learn how to quickly add authentication and user profile in your React app using Hanko.
@teamhanko/hanko-elements
hanko-auth
and hanko-profile
.
We will also install the react-router-dom
, this will allow us to navigate trough pages / routes.
APP URL
.
(Most likely http://localhost:5173/)components
and create two files in it, HankoAuth.tsx
and HankoProfile.tsx
.
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.
LoginPage.tsx
and DashboardPage.tsx
you are able to import them into your react App.tsx
.
We will use react-router-dom
to setup the routes of your app.
/
to see the <HankoAuth>
, and to /dashboard
to see the <HankoProfile>
.
They should look something like this👇
@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.
components/PrivateRoute.tsx
.
If the backend couldn’t validate our token we get navigated back to /
.
Otherwise if the validation was successfull it will return the children inside the private route.
PrivateRoute.tsx
to your App.tsx
file.Dashboard
in the Private Route;
/dashboard
, you should get redirected back.
dashboard
page to log some of the information from the user.