Flutter Auth UI
Flutter Auth UI is a Flutter package containing pre-built widgets for authenticating users. It is unstyled and can match your brand and aesthetic.
Add Flutter Auth UI
Add the latest version of the package supabase-auth-ui to pubspec.yaml:
_10flutter pub add supabase_auth_ui
Initialize the Flutter Auth package
_11import 'package:flutter/material.dart';_11import 'package:supabase_auth_ui/supabase_auth_ui.dart';_11_11void main() async {_11 await Supabase.initialize(_11 url: dotenv.get('SUPABASE_URL'),_11 anonKey: dotenv.get('SUPABASE_ANON_KEY'),_11 );_11_11 runApp(const MyApp());_11}
Email Auth
Use a SupaEmailAuth widget to create an email and password signin and signup form. It also contains a button to toggle to display a forgot password form.
You can pass metadataFields to add additional fields to the form to pass as metadata to Supabase.
_18SupaEmailAuth(_18 redirectTo: kIsWeb ? null : 'io.mydomain.myapp://callback',_18 onSignInComplete: (response) {},_18 onSignUpComplete: (response) {},_18 metadataFields: [_18 MetaDataField(_18 prefixIcon: const Icon(Icons.person),_18 label: 'Username',_18 key: 'username',_18 validator: (val) {_18 if (val == null || val.isEmpty) {_18 return 'Please enter something';_18 }_18 return null;_18 },_18 ),_18 ],_18)
Magic link Auth
Use SupaMagicAuth widget to create a magic link signIn form.
_10SupaMagicAuth(_10 redirectUrl: kIsWeb ? null : 'io.mydomain.myapp://callback',_10 onSuccess: (Session response) {},_10 onError: (error) {},_10)
Reset password
Use SupaResetPassword to create a password reset form.
_10SupaResetPassword(_10 accessToken: supabase.auth.currentSession?.accessToken,_10 onSuccess: (UserResponse response) {},_10 onError: (error) {},_10)
Phone Auth
Use SupaPhoneAuth to create a phone authentication form.
_10SupaPhoneAuth(_10 authAction: SupaAuthAction.signUp,_10 onSuccess: (AuthResponse response) {},_10),
Social Auth
The package supports login with official social providers.
Use SupaSocialsAuth to create list of social login buttons.
_12SupaSocialsAuth(_12 socialProviders: [_12 OAuthProvider.apple,_12 OAuthProvider.google,_12 ],_12 colored: true,_12 redirectUrl: kIsWeb_12 ? null_12 : 'io.mydomain.myapp://callback',_12 onSuccess: (Session response) {},_12 onError: (error) {},_12)
Theming
This package uses plain Flutter components allowing you to control the appearance of the components using your own theme.