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


function signCallback (): SignMessageResponseinterface 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](   */  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]( structure   */  alg: number  /**   * The attestation of the signature,   * only available when keyType is `main_session_key` or `sub_session_key`   */  attestation?: string}


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: '',      title: 'Example App',      logo: '',      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, it's type safe!      }    }  }, [])  return <MySignPageComponent />}


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.

Table of Contents