Home

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:


_10
dependencies:
_10
flutter:
_10
sdk: flutter
_10
supabase_auth_ui: ^0.1.0+2

Initialize the Flutter Auth Package#


_11
import 'package:flutter/material.dart';
_11
import 'package:supabase_auth_ui/supabase_auth_ui.dart';
_11
_11
void 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.


_18
SupaEmailAuth(
_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
)

Use SupaMagicAuth widget to create a magic link signIn form.


_10
SupaMagicAuth(
_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.


_10
SupaResetPassword(
_10
accessToken: supabase.auth.currentSession?.accessToken,
_10
onSuccess: (UserResponse response) {},
_10
onError: (error) {},
_10
)

Phone Auth#

Use SupaPhoneAuth to create a phone authentication form.


_10
SupaPhoneAuth(
_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.


_12
SupaSocialsAuth(
_12
socialProviders: [
_12
SocialProviders.apple,
_12
SocialProviders.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.