SPA-JS Errors not exported

[elstgav]

Checklist

• I have looked into the Readme, Examples, and FAQ and have not found a suitable solution or answer.
• I have looked into the API documentation and have not found a suitable solution or answer.
• I have searched the issues and have not found a suitable solution or answer.
• I have searched the Auth0 Community forums and have not found a suitable solution or answer.
• I agree to the terms within the Auth0 Code of Conduct.

Describe the problem you'd like to have solved

I’d like to determine what types of errors are thrown when checking the error object from useAuth0():

import { OAuthError, useAuth0 } from '@auth0/auth0-react'

const ErrorComponent = () => {
  const { error } = useAuth0()

  if (error instanceof OAuthError) {
    // …
  } else {
    // …
  }

auth0-react exports OAuthError, which I’m able to check, but it also forwards errors created by auth0-spa-js.

There’s a number of useful types we could check, like AuthenticationError, MfaRequiredError, etc, but the following code fails:

import { useAuth0 } from '@auth0/auth0-react'
import { AuthenticationError, MfaRequiredError } from '@auth0/auth0-spa-js'

const ErrorComponent = () => {
  const { error } = useAuth0()

  if (error instanceof AuthenticationError) {
    // …
  } else if (error instanceof MfaRequiredError) {
    // …
  }

No matter what I try, this never matches, as @auth0/auth0-react seems to maintain its own compiled version of @auth0/auth0-spa-js that I can’t reference.

In the code above, if I look at error.constructor, it points to node_modules/@auth0/auth0-react/node_modules/@auth0/auth0-spa-js/dist/auth0-spa-js.production.esm.js.

I’ve looked through my package-lock.json and I don’t believe I have multiple versions of auth0-spa-js installed; my hunch is the rollup build script is doing something weird here? If so, I think the only way I can reference the error classes correctly is if @auth0/auth0-react re-exports them.

Describe the ideal solution

Re-export auth0-spa-js’s errors in auth0-react/src/errors.tsx:

export * from '@auth0/auth0-spa-js/errors'

Then I can import all error types from auth0-react:

import { 
  AuthenticationError, 
  MfaRequiredError,
  OAuthError,
  useAuth0, 
} from '@auth0/auth0-react'

const ErrorComponent = () => {
  const { error } = useAuth0()

  if (error instanceof AuthenticationError) {
    // …
  } else if (error instanceof MfaRequiredError) {
    // …
  } else if (error instanceof OAuthError) {
    // …
  }

---

It may also be useful to refactor OAuthError to extend from GenericError—this way we can do a simple check to see if the error is coming from the Auth0 libraries:

+ import { GenericError } from '@auth0/auth0-spa-js'

/**
   * An OAuth2 error will come from the authorization server and will have at least an `error` property which will
   * be the error code. And possibly an `error_description` property
   *
   * See: https://openid.net/specs/openid-connect-core-1_0.html#rfc.section.3.1.2.6
   */
- export class OAuthError extends Error {
+ export class OAuthError extends GenericError {
    constructor(public error: string, public error_description?: string) {
-     super(error_description || error);
+     super(error, error_description);

      // https://github.com/Microsoft/TypeScript-wiki/blob/master/Breaking-Changes.md#extending-built-ins-like-error-array-and-map-may-no-longer-work
      Object.setPrototypeOf(this, OAuthError.prototype);
    }
  }

import { GenericError, useAuth0 } from '@auth0/auth0-react'

const ErrorComponent = () => {
  const { error } = useAuth0()

  if (error instanceof GenericError) {
    console.log("It’s an Auth0 error")
  }

Alternatives and current workarounds

I may be able to do duck-typing, like described in auth0/auth0-spa-js#700, but it’s a brittle solution that would break if error names/messages change.

Additional context

Related issue: auth0/auth0-spa-js#700

[frederikprijck]

Thanks, I opened a PR to address both

[elstgav]

@frederikprijck thanks for the quick turnaround! #637 doesn’t appear to export GenericError though, can we export that as well?

[elstgav]

Not sure on visibility of the above comment, so opened a new issue: #643