Learn how to quickly add authentication and user profile in your Remix app using Hanko.
@teamhanko/hanko-elements
hanko-auth
and hanko-profile
.
APP URL
..env
file.
.client.ts
file@teamhanko/hanko-elements
package is designed to work on the client side, you’ll need to import the Hanko functions into a .client.ts
file. This file will then export them, making them available for use throughout your application.
components
and create two files in it, HankoAuth.tsx
and HankoProfile.jsx
.
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.
/routes
folder._index.tsx
and dashboard.tsx
/
to see the <HankoAuth>
, and to /dashboard
to see the <HankoProfile>
.
They should look something like this👇
HankoAuth
is not loading please restart the application as it might’ve not loaded the .env correctly the first time.HankoProfile
will only look like the picture while you are logged in.@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.
hankoAPI/sessions/validate
.
Create a file called auth.server.ts
in /services
and add this code.