feat: add native auth support

example/lib/sign_in.dart

@@ -55,6 +55,19 @@ class SignUp extends StatelessWidget {
             label: const Text('Sign in with Phone'),
           ),
           spacer,
+          SupaNativeAuth(
+            authType: AuthType(
+              google: GoogleAuthType(
+                webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
+                iosClientId: 'YOUR_IOS_CLIENT_ID.apps.googleusercontent.com',
+              ),
+              apple: true,
+            ),
+            onSuccess: (response) {
+              Navigator.of(context).pushReplacementNamed('/home');
+            },
+          ),
+          spacer,
           SupaSocialsAuth(
             colored: true,
             socialProviders: OAuthProvider.values,

lib/src/components/supa_native_auth.dart

@@ -0,0 +1,205 @@
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import 'dart:convert';
+import 'package:crypto/crypto.dart';
+import 'package:font_awesome_flutter/font_awesome_flutter.dart';
+import 'package:google_sign_in/google_sign_in.dart';
+import 'package:sign_in_with_apple/sign_in_with_apple.dart';
+import 'package:supabase_auth_ui/src/utils/constants.dart';
+import 'package:supabase_flutter/supabase_flutter.dart';
+
+class AuthType {
+  GoogleAuthType? google;
+  bool apple;
+
+  AuthType({this.google, required this.apple});
+}
+
+class GoogleAuthType {
+  /// Web Client ID and iOS Client ID that you registered with Google Cloud.
+  /// Needed for Sign in with Google
+  String webClientId;
+  String iosClientId;
+
+  GoogleAuthType({required this.webClientId, required this.iosClientId});
+}
+
+class SupaNativeAuth extends StatefulWidget {
+  /// Defines native auth providers to show in the form
+  final AuthType authType;
+
+  /// Method to be called when the auth action is success
+  final void Function(Session) onSuccess;
+
+  /// Method to be called when the auth action threw an excepction
+  final void Function(Object error)? onError;
+
+  /// Whether to show a SnackBar after a successful sign in
+  final bool showSuccessSnackBar;
+
+  const SupaNativeAuth({
+    super.key,
+    required this.authType,
+    required this.onSuccess,
+    this.onError,
+    this.showSuccessSnackBar = true,
+  });
+
+  @override
+  State<SupaNativeAuth> createState() => _SupaNativeAuthState();
+}
+
+class _SupaNativeAuthState extends State<SupaNativeAuth> {
+  /// Performs Google sign in on Android and iOS
+  Future<AuthResponse> _googleSignIn(webClientId, iosClientId) async {
+    final GoogleSignIn googleSignIn = GoogleSignIn(
+      clientId: iosClientId,
+      serverClientId: webClientId,
+    );
+
+    final googleUser = await googleSignIn.signIn();
+    final googleAuth = await googleUser!.authentication;
+    final accessToken = googleAuth.accessToken;
+    final idToken = googleAuth.idToken;
+
+    if (accessToken == null) {
+      throw 'No Access Token found.';
+    }
+    if (idToken == null) {
+      throw 'No ID Token found.';
+    }
+
+    return supabase.auth.signInWithIdToken(
+      provider: OAuthProvider.google,
+      idToken: idToken,
+      accessToken: accessToken,
+    );
+  }
+
+  /// Performs Apple sign in on iOS or macOS
+  Future<AuthResponse> _appleSignIn() async {
+    final rawNonce = supabase.auth.generateRawNonce();
+    final hashedNonce = sha256.convert(utf8.encode(rawNonce)).toString();
+
+    final credential = await SignInWithApple.getAppleIDCredential(
+      scopes: [
+        AppleIDAuthorizationScopes.email,
+        AppleIDAuthorizationScopes.fullName,
+      ],
+      nonce: hashedNonce,
+    );
+
+    final idToken = credential.identityToken;
+    if (idToken == null) {
+      throw const AuthException(
+          'Could not find ID Token from generated credential.');
+    }
+
+    return supabase.auth.signInWithIdToken(
+      provider: OAuthProvider.apple,
+      idToken: idToken,
+      nonce: rawNonce,
+    );
+  }
+
+  Widget _nativeAuthBtn(
+      {required Widget icon,
+      required String label,
+      required Color bgColor,
+      required Color textColor,
+      required Future Function() signInMethod}) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 4),
+      child: ElevatedButton.icon(
+        onPressed: () async {
+          try {
+            await signInMethod();
+          } on AuthException catch (error) {
+            if (widget.onError == null && context.mounted) {
+              context.showErrorSnackBar(error.message);
+            } else {
+              widget.onError?.call(error);
+            }
+          } catch (error) {
+            if (widget.onError == null && context.mounted) {
+              context
+                  .showErrorSnackBar('Unexpected error has occurred: $error');
+            } else {
+              widget.onError?.call(error);
+            }
+          }
+        },
+        icon: icon,
+        label: Text(label),
+        style: ElevatedButton.styleFrom(
+          backgroundColor: bgColor,
+          foregroundColor: textColor,
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(30),
+          ),
+        ),
+      ),
+    );
+  }
+
+  late final StreamSubscription<AuthState> _gotrueSubscription;
+
+  @override
+  void initState() {
+    super.initState();
+    _gotrueSubscription =
+        Supabase.instance.client.auth.onAuthStateChange.listen((data) {
+      final session = data.session;
+      if (session != null && mounted) {
+        widget.onSuccess.call(session);
+        if (widget.showSuccessSnackBar) {
+          context.showSnackBar('Successfully signed in!');
+        }
+      }
+    });
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+    _gotrueSubscription.cancel();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final provider = widget.authType;
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        if (provider.google != null)
+          _nativeAuthBtn(
+            icon: Image.asset(
+              'assets/logos/google_light.png',
+              package: 'supabase_auth_ui',
+              width: 36,
+              height: 36,
+            ),
+            label: 'Sign in with Google',
+            signInMethod: () => _googleSignIn(
+              provider.google!.webClientId,
+              provider.google!.iosClientId,
+            ),
+            bgColor: const Color.fromRGBO(242, 242, 242, 1),
+            textColor: Colors.black,
+          ),
+        if (provider.apple)
+          _nativeAuthBtn(
+            icon: const Icon(
+              FontAwesomeIcons.apple,
+            ),
+            label: 'Sign in with Apple',
+            signInMethod: _appleSignIn,
+            bgColor: Colors.black,
+            textColor: Colors.white,
+          ),
+      ],
+    );
+  }
+}

lib/src/components/supa_socials_auth.dart

@@ -20,7 +20,7 @@ extension on OAuthProvider {
         OAuthProvider.slack => FontAwesomeIcons.slack,
         OAuthProvider.spotify => FontAwesomeIcons.spotify,
         OAuthProvider.twitch => FontAwesomeIcons.twitch,
-        OAuthProvider.twitter => FontAwesomeIcons.x,
+        OAuthProvider.twitter => FontAwesomeIcons.xTwitter,
         _ => Icons.close,
       };
 
@@ -200,7 +200,6 @@ class _SupaSocialsAuthState extends State<SupaSocialsAuth> {
             );
             break;
           default:
-            // Handle other cases or provide a default behavior.
             break;
         }
 

lib/supabase_auth_ui.dart

@@ -6,5 +6,6 @@ export 'src/components/supa_reset_password.dart';
 export 'src/components/supa_socials_auth.dart';
 export 'src/components/supa_phone_auth.dart';
 export 'src/components/supa_verify_phone.dart';
+export 'src/components/supa_native_auth.dart';
 export 'src/utils/supa_auth_action.dart';
 export 'package:supabase_flutter/supabase_flutter.dart';

pubspec.yaml

@@ -2,18 +2,21 @@ name: supabase_auth_ui
 description: UI library to implement auth forms using Supabase and Flutter
 version: 0.4.0+1
 homepage: https://supabase.com
-repository: 'https://github.com/supabase-community/flutter-auth-ui'
+repository: "https://github.com/supabase-community/flutter-auth-ui"
 
 environment:
-  sdk: '>=3.0.0 <4.0.0'
-  flutter: '>=3.0.0'
+  sdk: ">=3.0.0 <4.0.0"
+  flutter: ">=3.0.0"
 
 dependencies:
   flutter:
     sdk: flutter
   supabase_flutter: ^2.0.1
   email_validator: ^2.0.1
   font_awesome_flutter: ^10.6.0
+  google_sign_in: ^6.2.1
+  sign_in_with_apple: ^5.0.0
+  crypto: ^3.0.3
 
 dev_dependencies:
   flutter_test:

text

@@ -0,0 +1,7 @@
+  url: 'https://xlvhpbcxavkjwhvvumjr.supabase.co',
+    anonKey:
+        'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiYW5vbiIsImlhdCI6MTYzOTIyNDEzNSwiZXhwIjoxOTU0ODAwMTM1fQ.HZ4d4SdD40txeDY71d010S914KgrKYJNAzkrRU0C07w',
+                webClientId:
+                    '586179364408-p0cloviile92cndu00sshbm3qjc0vugt.apps.googleusercontent.com',
+                iosClientId:
+                    '586179364408-9c4rhej5pdal0vggiteuqjcbsfuf8an8.apps.googleusercontent.com',