authWithRedirect

Redirect to JoyID app to authenticate user, this function needs to work with authCallback to complete the authentication.

Types

function authWithRedirect (request: AuthRequest): void

interface AuthRequest {
  /**
   * 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

  /**
   * Custom state that will be returned to your app after authentication
   */
  state?: any
}

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

The challenge of request is optional, when challenge is passed in, the JoyID App will ask the user to perform a biometric authentication to sign the challenge, and the corresponding signature will be returned after the user has confirmed the authentication. If challenge is not passed in, user will not be asked to perform biometric authentication, and the JoyID App will return the user's JoyID info immediately.

Please note that for security reasons you cannot fully specify the message you need to sign when authenticating, for example you need to sign the challenge as:

Sign this message

What the user actually signs when signing is:

JoyID authorize prefix:
Sign this message

• See Also: API - authCallback
• See Also: Guide - Auth With Redirect with a live demo