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


function authCallback (): AuthResponseinterface AuthResponse {  type: 'Auth'  error?: string  data?: AuthResponseData}interface AuthResponseData {  // The CKB address of the authenticated user  address: 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](   */  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]( 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 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: '',      title: 'Example App',      logo: '',      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 componentconst 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, it's type safe!      }    }  }, [])  return <MyLoginPageComponent />}


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.

Table of Contents