Skip to content

Vue-Express example app showcasing Hanko integration for authentication and user management.

License

Notifications You must be signed in to change notification settings

teamhanko/hanko-vue-express-starter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Hanko Vue-Express Starter

This repo demonstrates how to integrate Hanko with Vue application for authentication and user management. It includes an Express.js backend for JWT verification and middleware for securing pages under authentication.

Hanko is an open-source authentication and user management solution with a focus on moving the login beyond passwords while being 100% deployable today.

  • Built for passkeys as introduced by Apple, Google, and Microsoft
  • Fast integration with Hanko Elements web components (login box and user profile)
  • API-first, small footprint, cloud-native

Prerequisites

Before you begin, ensure you have the following:

  • Node.js installed (version 20.0.0 or later)
  • Hanko API URL from Hanko Cloud

Note: You'll need to create a Authentication Project on Hanko Cloud with the App URL http://localhost:5173. See our docs to learn how to setup a auth project.

Getting started

  1. Clone the repository
git clone https://github.com/teamhanko/hanko-vue-express-starter.git

Frontend

  1. Navigate to the frontend directory:
cd vue-frontend
  1. Create a .env file in the frontend directory (vue-frontend) and add the following environment variable:
VITE_HANKO_API_URL=your-hanko-api-url
  1. Install the frontend dependencies using your preferred package manager (e.g., npm, pnpm, yarn, or bun). For this project, we've used pnpm:
pnpm install
  1. Start the frontend development server:
pnpm dev

Backend

  1. Navigate to the backend directory:
cd express-server
  1. Create a .env file in the backend directory (express-server) and add the following environment variable:
HANKO_API_URL=your-hanko-api-url
  1. Install the backend dependencies:
pnpm install
  1. Start the backend server:
pnpm dev

Usage

  1. Start the application:

    • Access the application by navigating to http://localhost:5173 in your web browser.
  2. Navigate to login page and experience Hanko Authentication.

Support

Feel free to reach out to us on Discord if you get into any issues.

License

This project is licensed under the MIT License.

About

Vue-Express example app showcasing Hanko integration for authentication and user management.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published