flutter-auth-ui 📱

A simple library of predefined widgets to easily and quickly create auth components using Flutter and Supabase.

⚠️ Developer Preview: This is a developer preview and there maybe some breaking changes until we release v1.0.0.

Email Auth

Use a SupaEmailAuth widget to create an email and password signin/ 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 signup form to pass as metadata to Supabase.

// Create a Email sign-in/sign-up form
SupaEmailAuth(
  redirectTo: kIsWeb ? null : 'io.mydomain.myapp://callback',
  onSignInComplete: (response) {
    // do something, for example: navigate('home');
  },
  onSignUpComplete: (response) {
    // do something, for example: navigate("wait_for_email");
  },
  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.supabase.flutter://reset-callback/',
  onSuccess: (Session response) {
    // do something, for example: navigate('home');
  },
  onError: (error) {
    // do something, for example: navigate("wait_for_email");
  },
),

Reset password

Use SupaResetPassword to create a password reset form.

SupaResetPassword(
  accessToken: supabase.auth.currentSession?.accessToken,
  onSuccess: (UserResponse response) {
    // do something, for example: navigate('home');
  },
  onError: (error) {
    // do something, for example: navigate("wait_for_email");
  },
),

Social Auth

Use SupaSocialsAuth to create list of social login buttons.

SupaSocialsAuth(
    socialProviders: [
        SocialProviders.apple,
        SocialProviders.google,
    ],
    colored: true,
    redirectUrl: kIsWeb
          ? null
          : 'io.supabase.flutter://reset-callback/',
    onSuccess: (Session response) { 
        // do something, for example: navigate('home');
    },
    onError: (error) {
        // do something, for example: navigate("wait_for_email");
    },
),

Theming

This library uses bare Flutter components so that you can control the appearance of the components using your own theme.