Skip to content

A Rust + React example app with passkey authentication, using Hanko Passkey API

License

Notifications You must be signed in to change notification settings

teamhanko/passkeys-rust

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Integrating Passkey Authentication in a Rust and React App

This repository demonstrates how to add passkey login functionality to your Rust backend and React app using the Hanko Passkey API. Passkey authentication is a secure and user-friendly alternative to traditional password-based authentication, providing a seamless login experience for users.

Passkey demo

Prerequisites

Before you begin, ensure you have the following:

  • Node.js installed (version 20.0.0 or later)
  • Rust set up
  • Hanko Passkey API key and tenant ID from Hanko Cloud

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

Getting started

  1. Clone the repository
git clone https://github.com/teamhanko/passkeys-rust
  1. Set up environment variables

Create a .env file in the rust-backend directory and add the following environment variables:

PASSKEYS_API_KEY=your-hanko-passkey-api-key
PASSKEYS_TENANT_ID=your-hanko-passkey-tenant-id

Replace your-hanko-passkey-api-key and your-hanko-passkey-tenant-id with your actual Hanko Passkey API key and tenant ID.

Frontend

  1. Navigate to the frontend directory:
cd react-frontend
  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 rust-backend
  1. Install the backend dependencies:
cargo build
  1. Start the backend server:
cargo run

Usage

  1. Start the application:

    • Ensure that both the frontend and backend servers are running.

    • Access the application by navigating to http://localhost:5173 in your web browser.

  2. Log in with a pre-configured user: Navigate to login page, login with one of the pre-configured users.

    {
        "id": "b3fbbdbd-6bb5-4558-9055-3b54a9469629",
        "email": "john.doe@example.com",
        "password": "password123",
    },
    {
        "id": "22c81b3d-1e7d-4a72-a6b0-ad946e0c0965",
        "email": "sergio_mq@example.com",
        "password": "very_secure_password",
    },
    {
        "id": "55c81b3d-1e7d-4a72-a6b0-ad946e0c0965",
        "email": "ab@g.com",
        "password": "123",
    }
  1. Register a passkey:

    • After logging in, register a passkey for the logged-in user.
  2. Log out:

    • After the passkey registration is successful, log out of the application.
  3. Login with with a passkey

    • On the login page, choose sign in with a passkey option to authenticate using a passkey.

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

A Rust + React example app with passkey authentication, using Hanko Passkey API

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published