Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/teamhanko/hanko-elysia-react-starter
React-Elysia example app showcasing Hanko integration for authentication and user management.
https://github.com/teamhanko/hanko-elysia-react-starter
auth elysiajs reactjs
Last synced: about 2 months ago
JSON representation
React-Elysia example app showcasing Hanko integration for authentication and user management.
- Host: GitHub
- URL: https://github.com/teamhanko/hanko-elysia-react-starter
- Owner: teamhanko
- License: other
- Created: 2023-12-19T05:38:04.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-09T13:42:43.000Z (9 months ago)
- Last Synced: 2024-04-09T17:42:03.563Z (9 months ago)
- Topics: auth, elysiajs, reactjs
- Language: TypeScript
- Homepage:
- Size: 39.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Hanko React-Elysia Starter
This repo demonstrates how to integrate Hanko with React application for authentication and user management. It includes an Elysia.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](https://www.passkeys.io) 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](https://cloud.hanko.io/)
> **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](https://docs.hanko.io/setup-hanko-cloud).
## Getting started
1. Clone the repository
```bash
git clone https://github.com/teamhanko/hanko-elysia-react-starter.git
```
#### Frontend
1. Navigate to the frontend directory:
```bash
cd hanko-react-frontend
```
2. Create a `.env` file in the frontend directory (`hanko-react-frontend`) and add the following environment variable:
```sh
VITE_HANKO_API_URL=your-hanko-api-url
```
3. Install the frontend dependencies using your preferred package manager (e.g., `npm`, `pnpm`, `yarn`, or `bun`). For this project, we've used `pnpm`:
```bash
pnpm install
```
4. Start the frontend development server:
```bash
pnpm dev
```
#### Backend
1. Navigate to the backend directory:
```bash
cd elysia-server
```
2. Create a `.env` file in the backend directory (`elysia-server`) and add the following environment variable:
```sh
HANKO_API_URL=your-hanko-api-url
```
3. Install the backend dependencies:
```bash
pnpm install
```
4. Start the backend server:
```bash
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](https://hanko.io/community) if you get into any issues.
## License
This project is licensed under the MIT License.