fix: connecting a new account [#121] (#136)

Author: shinyford

packages/clerk_auth/lib/src/clerk_api/api.dart

@@ -440,6 +440,18 @@ class Api with Logging {
     );
   }
 
+  /// Delete an [ExternalAccount]
+  ///
+  Future<ApiResponse> deleteExternalAccount({
+    required ExternalAccount account,
+  }) async {
+    return await _fetchApiResponse(
+      '/me/external_accounts/${account.id}',
+      withSession: true,
+      method: HttpMethod.delete,
+    );
+  }
+
   /// After signing in via oauth, transfer the [SignUp] into an authenticated [User]
   ///
   Future<ApiResponse> transfer() async {

packages/clerk_auth/lib/src/clerk_auth/auth.dart

@@ -236,6 +236,12 @@ class Auth {
     update();
   }
 
+  /// Delete an external account
+  Future<void> deleteExternalAccount({required ExternalAccount account}) async {
+    await _api.deleteExternalAccount(account: account).then(_housekeeping);
+    update();
+  }
+
   /// Progressively attempt sign in
   ///
   /// Can be repeatedly called with updated parameters

packages/clerk_auth/lib/src/models/client/external_account.dart

@@ -78,6 +78,9 @@ class ExternalAccount {
   /// is verified?
   bool get isVerified => verification.status.isVerified;
 
+  /// is in error?
+  bool get isInError => verification.errorMessage is String;
+
   /// is expired?
   bool get isExpired => verification.status.isExpired;
 

packages/clerk_auth/lib/src/models/client/verification.dart

@@ -17,6 +17,7 @@ class Verification {
     required this.attempts,
     required this.expireAt,
     this.externalVerificationRedirectUrl,
+    this.errorMessage,
     this.nonce,
   });
 
@@ -39,10 +40,17 @@ class Verification {
   @JsonKey(fromJson: intToDateTime, toJson: dateTimeToInt)
   final DateTime expireAt;
 
+  /// error message
+  @JsonKey(readValue: _extractErrorMessage)
+  final String? errorMessage;
+
   /// fromJson
   static Verification fromJson(Map<String, dynamic> json) =>
       _$VerificationFromJson(json);
 
   /// toJson
   Map<String, dynamic> toJson() => _$VerificationToJson(this);
 }
+
+String? _extractErrorMessage(Map<dynamic, dynamic> map, String field) =>
+    map['error']?['long_message'] as String?;

packages/clerk_auth/lib/src/models/client/verification.g.dart

@@ -35,18 +35,20 @@ class ClerkErrorListener extends StatefulWidget {
   final Widget child;
 
   /// Default Error Handler
-  static Future<void> defaultErrorHandler(
+  static void defaultErrorHandler(
     BuildContext context,
     AuthError error,
-  ) async {
+  ) {
     final localizations = ClerkAuth.localizationsOf(context);
     final message = error.localizedMessage(localizations);
 
     final messenger = ScaffoldMessenger.maybeOf(context);
     if (messenger == null) {
       if (kDebugMode) {
-        debugPrint('Warning: no ScaffoldMessenger found '
-            'to display error: $message');
+        debugPrint(
+          'Warning: no ScaffoldMessenger found '
+          'to display error: $message',
+        );
       }
       return;
     }

packages/clerk_flutter/lib/src/widgets/control/clerk_error_listener.dart

@@ -210,12 +210,6 @@ class _ClerkUserProfileState extends State<ClerkUserProfile>
                       child: _ExternalAccountList(
                         user: user,
                         env: auth.env,
-                        onAddNew: () => ClerkPage.show(
-                          context,
-                          builder: (context) => ConnectAccountPanel(
-                            onDone: (context) => Navigator.of(context).pop(),
-                          ),
-                        ),
                       ),
                     ),
                   ],
@@ -234,12 +228,36 @@ class _ExternalAccountList extends StatelessWidget {
   const _ExternalAccountList({
     required this.user,
     required this.env,
-    required this.onAddNew,
   });
 
   final clerk.User user;
   final clerk.Environment env;
-  final VoidCallback onAddNew;
+
+  void _onAddNew(BuildContext context) {
+    ClerkPage.show(
+      context,
+      builder: (context) => ConnectAccountPanel(
+        onDone: (context) async {
+          Navigator.of(context).pop();
+
+          final auth = ClerkAuth.of(context);
+          if (auth.user?.externalAccounts case final accounts?) {
+            for (final account in accounts) {
+              if (account.verification.errorMessage case String errorMessage) {
+                auth.addError(
+                  clerk.AuthError(
+                    message: errorMessage,
+                    code: clerk.AuthErrorCode.serverErrorResponse,
+                  ),
+                );
+                await auth.deleteExternalAccount(account: account);
+              }
+            }
+          }
+        },
+      ),
+    );
+  }
 
   @override
   Widget build(BuildContext context) {
@@ -281,7 +299,7 @@ class _ExternalAccountList extends StatelessWidget {
               ),
         GestureDetector(
           behavior: HitTestBehavior.opaque,
-          onTap: onAddNew,
+          onTap: () => _onAddNew(context),
           child: Row(
             mainAxisAlignment: MainAxisAlignment.start,
             children: [
@@ -320,27 +338,26 @@ class _IdentifierList extends StatelessWidget {
       crossAxisAlignment: CrossAxisAlignment.stretch,
       children: [
         if (identifiers case List<clerk.UserIdentifyingData> identifiers) //
-          for (final ident in identifiers) //
+          for (final uid in identifiers) //
             Padding(
               padding: bottomPadding16,
               child: Row(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
                   Expanded(
                     child: Text(
-                      format?.call(ident.identifier) ?? ident.identifier,
+                      format?.call(uid.identifier) ?? uid.identifier,
                       maxLines: 1,
                       overflow: TextOverflow.ellipsis,
                     ),
                   ),
-                  if (ident.isUnverified) //
+                  if (uid.isUnverified) //
                     _RowLabel(
                       label: localizations.unverified,
                       color: ClerkColors.incarnadine,
-                      onTap: () =>
-                          onIdentifierUnverified.call(ident.identifier),
+                      onTap: () => onIdentifierUnverified.call(uid.identifier),
                     ),
-                  if (user.isPrimary(ident)) //
+                  if (user.isPrimary(uid)) //
                     _RowLabel(label: localizations.primary),
                 ],
               ),

packages/clerk_flutter/lib/src/widgets/user/clerk_user_profile.dart

@@ -31,11 +31,13 @@ class ConnectAccountPanel extends StatelessWidget {
                 padding: horizontalPadding32 + bottomPadding32,
                 child: ClerkChangeObserver<DateTime>(
                   onChange: onDone,
-                  accumulateData: () =>
-                      auth.client.user?.externalAccounts?.map(
-                        (o) => o.updatedAt,
-                      ) ??
-                      const [],
+                  accumulateData: () {
+                    final accounts =
+                        auth.client.user?.externalAccounts ?? const [];
+                    return accounts
+                        .where((a) => a.isVerified || a.isInError)
+                        .map((a) => a.updatedAt);
+                  },
                   builder: (context) => ClerkSSOPanel(
                     onStrategyChosen: (strategy) =>
                         auth.ssoConnect(context, strategy),