Auth

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.

Flutter Auth UI

Add Flutter Auth UI

Add the latest version of the package supabase-auth-ui to pubspec.yaml:

1
flutter pub add supabase_auth_ui

Initialize the Flutter Auth package

1
import 'package:flutter/material.dart';
2
import 'package:supabase_auth_ui/supabase_auth_ui.dart';
3
4
void main() async {
5
  await Supabase.initialize(
6
    url: dotenv.get('SUPABASE_URL'),
7
    anonKey: dotenv.get('SUPABASE_PUBLISHABLE_KEY'),
8
  );
9
10
  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.

1
SupaEmailAuth(
2
  redirectTo: kIsWeb ? null : 'io.mydomain.myapp://callback',
3
  onSignInComplete: (response) {},
4
  onSignUpComplete: (response) {},
5
  metadataFields: [
6
    MetaDataField(
7
    prefixIcon: const Icon(Icons.person),
8
    label: 'Username',
9
    key: 'username',
10
    validator: (val) {
11
            if (val == null || val.isEmpty) {
12
            return 'Please enter something';
13
            }
14
            return null;
15
          },
16
        ),
17
    ],
18
)

Use SupaMagicAuth widget to create a magic link signIn form.

1
SupaMagicAuth(
2
  redirectUrl: kIsWeb ? null : 'io.mydomain.myapp://callback',
3
  onSuccess: (Session response) {},
4
  onError: (error) {},
5
)

Reset password

Use SupaResetPassword to create a password reset form.

1
SupaResetPassword(
2
  accessToken: supabase.auth.currentSession?.accessToken,
3
  onSuccess: (UserResponse response) {},
4
  onError: (error) {},
5
)

Phone Auth

Use SupaPhoneAuth to create a phone authentication form.

1
SupaPhoneAuth(
2
  authAction: SupaAuthAction.signUp,
3
  onSuccess: (AuthResponse response) {},
4
),

Social Auth

The package supports login with official social providers.

Use SupaSocialsAuth to create list of social login buttons.

1
SupaSocialsAuth(
2
  socialProviders: [
3
    OAuthProvider.apple,
4
    OAuthProvider.google,
5
  ],
6
  colored: true,
7
  redirectUrl: kIsWeb
8
    ? null
9
    : 'io.mydomain.myapp://callback',
10
  onSuccess: (Session response) {},
11
  onError: (error) {},
12
)

Theming

This package uses plain Flutter components allowing you to control the appearance of the components using your own theme.