Passkeyme Web SDK

Passkeyme Web SDK is a convenience SDK for the Passkeyme platform JavaScript/TypeScript library that provides simple functions to handle passkey registration and authentication using the WebAuthn API. This library helps you integrate passkey-based authentication into your web applications with ease.

See Passkeyme

Installation

You can install the Passkey SDK via npm:

npm install passkeyme-web-sdk

Usage

Importing the SDK

JavaScript

const PasskeySDK = require('passkeyme-web-sdk');

TypeScript

import PasskeySDK from 'passkeyme-web-sdk';

Creating an Instance

Create an instance of the PasskeySDK:

const sdk = new PasskeySDK();

Registering a Passkey

To register a passkey, use the passkeyRegister method. This method takes a challenge string as input and returns a promise that resolves to an object containing the credential.

sdk.passkeyRegister('challenge-from-passkeyme-API--start_registration')
    .then(response => {
        console.log('Registered credential:', response.credential);
        // Send to passkeyme-API complete_registration
    })
    .catch(error => {
        console.error('Registration error:', error);
    });

Authenticating with a Passkey

To authenticate using a passkey, use the passkeyAuthenticate method. This method takes a challenge string as input and returns a promise that resolves to an object containing the credential.

sdk.passkeyAuthenticate('challenge-from-passkeyme-API-start_authentication')
    .then(response => {
        console.log('Authenticated credential:', response.credential);
    })
    .catch(error => {
        console.error('Authentication error:', error);
        // Send to passkeyme-API complete_authentication
    });

API

passkeyRegister(challenge: string): Promise<{ credential: string }>

•	challenge: A string that represents the challenge provided by your server.
•	Returns: A promise that resolves to an object containing the credential.

passkeyAuthenticate(challenge: string): Promise<{ credential: string }>

•	challenge: A string that represents the challenge provided by your server.
•	Returns: A promise that resolves to an object containing the credential.

Example

Here is a full working example.

To get it working, first, go to Passkeyme, register, create an app and grab the AppID and API Key, and populate in your env as:

REACT_APP_PASSKEY_APP_ID=
REACT_APP_PASSKEY_API_KEY=

Then, create the app:

npx create-react-app passkeyme-react-demo
npm install passkeyme-web-sdk axios styled-components
npm start

You'll need to run it behind an addressible domain for Passkeys to work. You can host it, or use ngrok to serve it.

import React, { useState } from 'react';
import styled from 'styled-components';
import axios from 'axios';
import PasskeySDK from 'passkeyme-web-sdk';

const APP_ID = process.env.REACT_APP_PASSKEY_APP_ID;
const API_KEY = process.env.REACT_APP_PASSKEY_API_KEY;

const axiosInstance = axios.create({
  baseURL: `https://passkeyme.com/webauthn/${APP_ID}`,
  headers: {
    'x-api-key': API_KEY,
    'Content-Type': 'application/json'
  }
});

const App = () => {
    const [result, setResult] = useState(null);
    const [error, setError] = useState(null);
    const [username, setUsername] = useState('');
    const [displayName, setDisplayName] = useState('');

    const handleRegister = async () => {
        try {
            const start_response = await axiosInstance.post(`/start_registration`, { username, displayName });

            const { credential } = await PasskeySDK.passkeyRegister(start_response.data.challenge);

            const complete_response = await axiosInstance.post(`/complete_registration`, { username, credential });

            setResult(complete_response);
            setError(null);
        } catch (err) {
            setError(err.message);
            setResult(null);
        }
    };

    const handleAuthenticate = async () => {
        try {
          const start_response = await axiosInstance.post(`/start_authentication`,  { username });

            const { credential } = await PasskeySDK.passkeyAuthenticate(start_response.data.challenge);

            const complete_response = await axiosInstance.post(`/complete_authentication`, { username, credential });

            setResult(complete_response);
            setError(null);
        } catch (err) {
            setError(err.message);
            setResult(null);
        }
    };

    return (
        <Container>
            <h1>Passkey Demo</h1>
            <Input
                type="text"
                placeholder="Username"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
                />
            <Input
                type="text"
                placeholder="Display Name"
                value={displayName}
                onChange={(e) => setDisplayName(e.target.value)}
                />

            <Button onClick={handleRegister}>Register</Button>
            <Button onClick={handleAuthenticate}>Authenticate</Button>
            {result && (
                <Result>
                    <h2>Result:</h2>
                    <pre>{result.data.message}</pre>
                </Result>
            )}
            {error && (
                <Result>
                    <h2>Error:</h2>
                    <pre>{error}</pre>
                </Result>
            )}
        </Container>
    );
};

const Container = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #f0f2f5;
    font-family: Arial, sans-serif;
`;

const Input = styled.input`
    padding: 10px;
    margin: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
`;

const Button = styled.button`
    padding: 10px 20px;
    margin: 10px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    background-color: #007BFF;
    color: white;
    transition: background-color 0.3s ease;

    &:hover {
        background-color: #0056b3;
    }
`;

const Result = styled.div`
    margin-top: 20px;
    padding: 10px;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
`;

export default App;```