https://github.com/u4aew/react-webauthn

React hook for webAuthn
https://github.com/u4aew/react-webauthn

hook react webauthn

Last synced: about 1 year ago
JSON representation

React hook for webAuthn

• Host: GitHub
• URL: https://github.com/u4aew/react-webauthn
• Owner: u4aew
• Created: 2022-10-30T11:55:35.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-11-03T09:52:58.000Z (over 1 year ago)
• Last Synced: 2025-04-13T21:06:45.650Z (about 1 year ago)
• Topics: hook, react, webauthn
• Language: TypeScript
• Homepage: https://webauthn.fancyapp.site
• Size: 9.48 MB
• Stars: 30
• Watchers: 4
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
[![npm version](https://badge.fury.io/js/react-hook-webauthn.svg)](https://badge.fury.io/js/react-hook-webauthn)

# React-hook-webauthn

Simple Hook for react, serverless use of webAuthn

![demo](./img/demo.gif)

## Installing as a package

```

npm i react-hook-webauthn

```

## Usage

A detailed setup process can be read in this [article](https://dev.to/u4aew/adding-webauthnto-the-web-application-59gp).

```js

import React, { useCallback, useState } from 'react';

import {useWebAuthn} from 'react-hook-webauthn'

import './App.css';

const rpOptions = {

  rpId: 'localhost',

  rpName: 'my super app'

}

function App() {

  const [login, setLogin] = useState('')

  const {getCredential, getAssertion} = useWebAuthn(rpOptions)

  const onChangeLogin = useCallback((e: any) => {

    setLogin(e.target.value)

  }, [])

  const onRegister = useCallback(async  () => {

    const credential = await getCredential({

      challenge: 'stringFromServer',

      userDisplayName: login,

      userId: login,

      userName: login

    })

    console.log(credential)

  }, [getCredential, login])

  const onAuth = useCallback(async () => {

    const assertion =  await getAssertion({challenge: 'stringFromServer'})

    console.log(assertion)

  }, [getAssertion])

  return (

    


      

        


          

        

         


           register

         

        


        


          auth

        

      

    

  );

}


export default App;

```

## Options

| name            | type   | required |

|-----------------|--------|----------|

| rpName          | string | true     |

| rpId            | string | true     |

| userName        | string | true     |

| userDisplayName | string | true     |

| challenge       | string | true     |

| credentialOpt   | object | false    |

| assertionOpt    | object | false    |