Callbacks - Stytch Docs

Callbacks are optional functions that allow you to take actions in your app or send logs to your backend based on where your user is in the authentication flow. Listeners can be passed in via the callbacks object in config, or by attaching to the custom element via addEventListener. If using addEventListener, the event names are stytch-event and stytch-error. To avoid conflicting with native DOM event properties, type and data values are storied in stytchEventType and stytchEventData properties.

const element = document.getElementById('stytch-ui');
element.addEventListener('stytch-event', (evt) => {
  console.log(evt.stytchEventType, evt.stytchEventData);
})

onEvent

A function that is called when the Stytch client makes a request. The function expects an argument of an event object, and the event object has type and data objects.

{
  "type": "MAGIC_LINK_LOGIN_OR_CREATE",
  "data": {
    "request_id": "request-id-test-b05c992f-ebdc-489d-a754-c7e70ba13141",
    "status_code": 200
  }
},
{
  "type": "OTP_LOGIN_OR_CREATE",
  "data": {
    "method_id": "phone-number-test-d5a3b680-e8a3-40c0-b815-ab79986666d0",
    "request_id": "request-id-test-b05c992f-ebdc-489d-a754-c7e70ba13141",
    "status_code": 200
  }
},
{
  "type": "OTP_AUTHENTICATE",
  "data": {
    "method_id": "phone-number-test-d5a3b680-e8a3-40c0-b815-ab79986666d0",
    "user_id": "user-test-16d9ba61-97a1-4ba4-9720-b03761dc50c6",
    "user": { ...Stytch user... },
    "session_token": "mZAYn5aLEqKUlZ_Ad9U_fWr38GaAQ1oFAhT8ds245v7Q",
    "session_jwt": "example_jwt",
    "session": { ...Stytch session... },
    "request_id": "request-id-test-b05c992f-ebdc-489d-a754-c7e70ba13141",
    "status_code": 200
  }
},
{
  "type": "CRYPTO_WALLET_AUTHENTICATE_START",
  "data": {
    "challenge": "Signing in with Project: 7_EPetPqfdEiDCJtgad6-xsXytN3Ee9tx6mdRTQK3fC7-J2PDxpP1GAvYB9Ic4E09h-K88STiRIzKSGP",
    "request_id": "request-id-test-b05c992f-ebdc-489d-a754-c7e70ba13141",
    "status_code": 200
  }
},
{
  "type": "CRYPTO_WALLET_AUTHENTICATE",
  "data": {
    "user_id": "user-test-16d9ba61-97a1-4ba4-9720-b03761dc50c6",
    "user": { ...Stytch user... },
    "session_token": "mZAYn5aLEqKUlZ_Ad9U_fWr38GaAQ1oFAhT8ds245v7Q",
    "session_jwt": "example_jwt",
    "session": { ...Stytch session... },
    "request_id": "request-id-test-b05c992f-ebdc-489d-a754-c7e70ba13141",
    "status_code": 200
  }
},
{
  "type": "PASSWORD_CREATE",
  "data": {
    "email_id": "email-test-81bf03a8-86e1-4d95-bd44-bb3495224953",
    "user_id": "user-test-16d9ba61-97a1-4ba4-9720-b03761dc50c6",
    "user": { ...Stytch user... },
    "session_token": "mZAYn5aLEqKUlZ_Ad9U_fWr38GaAQ1oFAhT8ds245v7Q",
    "session_jwt": "example_jwt",
    "session": { ...Stytch session... },
    "request_id": "request-id-test-b05c992f-ebdc-489d-a754-c7e70ba13141",
    "status_code": 200
  }
},
{
  "type": "PASSWORD_AUTHENTICATE",
  "data": {
    "user_id": "user-test-16d9ba61-97a1-4ba4-9720-b03761dc50c6",
    "user": { ...Stytch user... },
    "session_token": "mZAYn5aLEqKUlZ_Ad9U_fWr38GaAQ1oFAhT8ds245v7Q",
    "session_jwt": "example_jwt",
    "session": { ...Stytch session... },
    "request_id": "request-id-test-b05c992f-ebdc-489d-a754-c7e70ba13141",
    "status_code": 200
  }
},
{
  "type": "PASSWORD_RESET_BY_EMAIL_START",
  "data": {
    "request_id": "request-id-test-b05c992f-ebdc-489d-a754-c7e70ba13141",
    "status_code": 200
  }
},
{
  "type": "PASSWORD_RESET_BY_EMAIL",
  "data": {
    "user_id": "user-test-16d9ba61-97a1-4ba4-9720-b03761dc50c6",
    "user": { ...Stytch user... },
    "session_token": "mZAYn5aLEqKUlZ_Ad9U_fWr38GaAQ1oFAhT8ds245v7Q",
    "session_jwt": "example_jwt",
    "session": { ...Stytch session... },
    "request_id": "request-id-test-b05c992f-ebdc-489d-a754-c7e70ba13141",
    "status_code": 200
  }
},
{
  "type": "PASSKEY_AUTHENTICATE",
  "data": {
    "webauthn_registration_id": "webauthn-registration-test-5c44cc6a-8af7-48d6-8da7-ea821342f5a6",
    "user_id": "user-test-16d9ba61-97a1-4ba4-9720-b03761dc50c6",
    "user": { ...Stytch user... },
    "session_token": "mZAYn5aLEqKUlZ_Ad9U_fWr38GaAQ1oFAhT8ds245v7Q",
    "session_jwt": "example_jwt",
    "session": { ...Stytch session... },
    "request_id": "request-id-test-b05c992f-ebdc-489d-a754-c7e70ba13141",
    "status_code": 200
  }
},
{
  "type": "PASSKEY_SKIP",
  "data": {}
},
{
  "type": "PASSKEY_DONE",
  "data": {}
}

onError

A function that is called when an error occurs. The function expects an argument of an StytchError object, and the StytchError object has a message property.

// Example of an API related error.
"message": "StytchSDKAPIError: [401] unauthorized_credentials Unauthorized credentials. See https://stytch.com/docs/api/errors/401 for more information. request_id: request-id-test-8e2a9758-713e-49a2-8b62-f9169bbabded",

// Example of a network related error.
"message": "SDKAPIUnreachableError: Failed to send magic link Unable to contact the Stytch servers. Are you online?"

// Example of a schema related error.
"message": "StytchSDKSchemaError: [400] Request does not match expected schema. email: should be string"

// Example of an error with using our SDK.
"message": "StytchSDKUsageError: Invalid call to <METHOD_NAME>"

​onEvent

​onError

onEvent

onError