authCallback
Get authentication data from JoyID app, this function needs to work with authWithRedirect to complete the authentication.
Types
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](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 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 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.
- See Also: API - authWithRedirect
- See Also: Guide - Auth With Redirect with a live demo