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.

We only collect analytics essential to ensuring smooth operation of our services. Learn more