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:

flutter pub add supabase_auth_ui

Initialize the Flutter Auth package

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_ANON_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.

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.

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

Reset password

Use SupaResetPassword to create a password reset form.

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

Phone Auth

Use SupaPhoneAuth to create a phone authentication form.

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.

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.