signWithRedirect

Redirect to JoyID app to sign a message, this function needs to work with signCallback to complete the signing.

Types

function signWithRedirect (request: SignRequest): void

interface SignRequest {
  /**
   * The URL of your app that JoyID app should redirect to after authentication
   */
  redirectURL: string
  /**
   * name of your app
   */
  name?: string
  /**
   * logo of your app
   */
  logo?: string
  /**
   * The challenge that was requested to be signed
   */
  challenge: string
  /**
   * sign the challenge as a hex data
   */
  isData?: boolean
  /**
   * Custom state that will be returned to your app after signing
   */
  state?: any
}

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

Table of Contents