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:

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

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;
          },
        ),
    ],
)

Magic Link Auth#

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) {},
  ),

The package supports login with official social providers.

Use SupaSocialsAuth to create list of social login buttons.

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

Edit this page on GitHub