Add api error collection to autherror

[shinyford]

API errors should be surfaced in auth_error when available

[mboudreau]

@shinyford That's not exactly what I had asked for. That's one way of solving it, sure, but I'm not convinced it's the best way.

The gist of it is this: we have a custom Clerk OAuth page/flow with our own login form. When we submit the username/password via the SDK with the authState.attemptSignIn function and listen for errors using the ClerkErrorListener wrapper around the form builder, we get an error of type clerk.AuthError with the code of AuthErrorCode.serverErrorResponse. This code is used for any number of server responsibles like Couldn't find your account. or Identifier is invalid.. All of these are strings which are subject to change in the future and completely obliterate the UX of our login page.

What I need is a way to reliably get code of the error being presented so I know how to handle the error. In our case, we show the error under the input that's the culprit, and focus the input so the user can change it. This cannot be done currently without testing for the errorMessage string.

Looking at the global clerk log printer, I can see that when the error happens, a debug log comes through with an errors array:

{ 
   "errors": [
   {
      "message": "Couldn't find your account.",
       "long_message": "Couldn't find your account.",
       "code": "form_identifier_not_found",
       "meta": {
          "param_name": "identifier"
       }
   }
   ]
}

Notice that specific code that can be used with an enum and is easy to add a switch statement for when it comes in. On version 0.0.9-beta, the AuthError used to return the errors array above, which I could then iterate through and set the state properly on my form. I'm not certain that an array is needed at all as I'd expect the API to usually return only a single error? Either way, doesn't matter.

What I am expecting is a full list of codes in AuthErrorCode for each possible error, like form_identity_not_found or password_invalid.

Thanks!

[shinyford]

@mboudreau Please would you add the code you used to interrogate those errors against v0.0.9-beta? Many thanks.

[mboudreau]

Sure, this was in the login page:

return ClerkErrorListener(
      handler: (BuildContext context, clerk.AuthError error) {
        error.errors?.asMap().forEach((index, value) {
          switch (value.meta?['param_name']) {
            case 'identifier':
              setState(() {
                emailError = value.message
                    .toLowerCase()
                    .replaceAll('identifier', 'email')
                    .capitalized;
              });
              if (index == 0) {
                WidgetsBinding.instance.addPostFrameCallback(() {
                  _emailFocusNode.requestFocus();
                });
              }
              break;
            case 'password':
              setState(() {
                passwordError = value.message;
              });
              if (index == 0) {
                WidgetsBinding.instance.addPostFrameCallback(() {
                  _passwordFocusNode.requestFocus();
                });
              }
              break;
          }
        });
      },
      child: ...
);

Oh also, I just remembered, there's also an issue when signing out that the ClerkErrorListener returns an error with You are signed out., which seems odd as that shouldn't be an errors since I'm the one that called authState.signOut();.

[shinyford]

Thanks for this @mboudreau

So, what's confusing me is that, so far as I can see from the code base, in v0.0.9-beta the clerk.AuthError object did not have an errors field. Nor did it in any other release we've made.

Could you please let me look at the pubspec.yaml and pubspec.lock for this project? At least, those lines pertaining to Clerk.

Cheers

Nic

[mboudreau]

Ah, very sorry, I had forgotten that we needed a way to fix this in 0.0.9 so we copied the library to our project and modified it to add better errors.

This is essentially what we did in clerk_auth/auth.dart‎ L160:

ApiResponse _housekeeping(ApiResponse resp) {
    if (resp.isError) {
      addError(
        AuthError(
          code: AuthErrorCode.serverErrorResponse,
          message: resp.errorMessage,
          errors: resp.errors,
        ),
      );
    } else if (resp.client case Client client) {
      this.client = client;
    }
    return resp;
  }