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

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

Use SupaMagicAuth widget to create a magic link signIn form.

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

Reset password

Use SupaResetPassword to create a password reset form.

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

Phone Auth

Use SupaPhoneAuth to create a phone authentication form.

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

Social Auth

The package supports login with official social providers.

Use SupaSocialsAuth to create list of social login buttons.

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

Theming

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