authCallback

Get authentication data from JoyID app, this function needs to work with authWithRedirect to complete the authentication.

Types

function authCallback (): AuthResponse

interface AuthResponse {
  type: 'Auth'
  error?: string
  data?: AuthResponseData
}

interface AuthResponseData {
  // The CKB address of the authenticated user
  address: string
  // The Ethereum address of the authenticated user
  ethAddress: string
  // 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 authentication
   */
  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 authenticate user, We can start by declaring a login component, which specify redirectURL to /login path of the app.

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

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

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

  return <MyLoginPageComponent />
}

Details

Before authCallback() 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