signCallback

Get signed data from JoyID app, this function needs to work with signWithRedirect to complete the signing.

Types

function signCallback (): SignMessageResponse

interface SignMessageResponse {
  type: 'SignMessage'
  error?: string
  data?: SignMessageResponseData
}

interface SignMessageResponseData {
  // The public key of the authenticated user
  pubkey: string
  /**
   * The challenge that was requested to be signed
   */
  challenge: string
  /**
   * The message that was signed by the authenticator,
   * Note that the message may not be the original raw message,
   * but is combined with client data and authenticator data
   * according to [WebAuthn Spec](https://www.w3.org/TR/webauthn-2/#sctn-op-get-assertion).
   */
  message: string
  /**
   * The signature of the message that was signed by the authenticator
   */
  signature: string
  /**
   * key type of the authenticated user
   */
  keyType: 'main_key' | 'sub_key' | 'main_session_key' | 'sub_session_key'
  /**
   * Custom state that will be returned to your app after signing
   */
  state?: any

  /**
   * The algorithm of the signature.
   * corresponds to the `value` field of the [COSE](https://www.iana.org/assignments/cose/cose.xhtml#algorithms) structure
   */
  alg: number

  /**
   * The attestation of the signature,
   * only available when keyType is `main_session_key` or `sub_session_key`
   */
  attestation?: string
}

Example

In order to redirect to JoyID app to sign message, We can start by declaring a sign component, which specify redirectURL to /sign path of the app.

import { signWithRedirect } from '@joyid/core'
const MyLoginComponent = () => {
  function onClick() {
    const request = {
      // redirect to /sign
      redirectURL: 'https://example.com/sign',
      title: 'Example App',
      logo: 'https://example.com/logo.png',
      challenge: 'Sign this message',
    }
    signWithRedirect(request)
  }
  return (
    <button onClick={onClick}>
      Sign with JoyID
    </button>
  )
}

When the component with the /login path loads, we can call signCallback to get the redirected data from the JoyID App.

import { useEffect } from 'react'
import { signCallback } from '@joyid/core'
/* `/sign` page component */
const SignPageComponent = () => {
  const isRedirectFromJoyID = new URL(location.href).searchParams.has('joyid-redirect')
  useEffect(() => {
    if (isRedirectFromJoyID) {
      const res = signCallback()
      if (res.error != null) {
        console.error(res.error)
      } else {
        // the user has authenticated,
        // do something with res.data, it's type safe!
      }
    }
  }, [])

  return <MySignPageComponent />
}

Details

Before signCallback() is called, you should validate the joyid-redirect query parameter in the URL, if it's not present, it means the user is not redirected from JoyID app.

Edit this page on GitHub
Table of Contents