Flutter认证UI插件supabase_auth_ui的使用

简介

Supabase Auth UI 提供了一套预定义的组件，可以快速地创建与 Supabase 集成的身份验证界面。它支持多种身份验证方式，包括电子邮件/密码登录、魔法链接登录、社交账号登录等，并且提供了重置密码的功能。

使用方法

初始化Supabase

在开始之前，需要先初始化 Supabase 客户端：

import 'package:supabase_flutter/supabase_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  /// TODO: replace with your credentials
  await Supabase.initialize(
    url: 'https://your-supabase-url.supabase.co',
    anonKey: 'your-anon-key',
  );
  runApp(const MyApp());
}

Email Auth

SupaEmailAuth 组件用于创建电子邮件和密码的登录/注册表单。可以通过 metadataFields 参数添加额外字段作为元数据传递给 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;
      },
    ),
    BooleanMetaDataField(
      label: 'I wish to receive marketing emails',
      key: 'marketing_consent',
      checkboxPosition: ListTileControlAffinity.leading,
    ),
    BooleanMetaDataField(
      key: 'terms_agreement',
      isRequired: true,
      checkboxPosition: ListTileControlAffinity.leading,
      richLabelSpans: [
        const TextSpan(text: 'I have read and agree to the '),
        TextSpan(
          text: 'Terms and Conditions',
          style: const TextStyle(color: Colors.blue),
          recognizer: TapGestureRecognizer()
            ..onTap = () {
              // 处理条款点击事件
            },
        ),
      ],
    ),
  ],
)

Magic Link Auth

SupaMagicAuth 组件用于创建魔法链接登录表单。需要注意的是，使用魔法链接时需要配置深度链接（deep links）。

SupaMagicAuth(
  redirectUrl: kIsWeb ? null : 'io.supabase.flutter://reset-callback/',
  onSuccess: (Session response) {
    // 成功后的处理逻辑
  },
  onError: (error) {
    // 错误处理逻辑
  },
)

Reset Password

SupaResetPassword 组件用于创建密码重置表单。

SupaResetPassword(
  accessToken: supabase.auth.currentSession?.accessToken,
  onSuccess: (UserResponse response) {
    // 成功后的处理逻辑
  },
  onError: (error) {
    // 错误处理逻辑
  },
)

Social Auth

SupaSocialsAuth 组件用于创建社交账号登录按钮列表。同样需要配置深度链接。

SupaSocialsAuth(
  socialProviders: [OAuthProvider.apple, OAuthProvider.google],
  colored: true,
  redirectUrl: kIsWeb ? null : 'io.supabase.flutter://reset-callback/',
  onSuccess: (Session response) {
    // 成功后的处理逻辑
  },
  onError: (error) {
    // 错误处理逻辑
  },
)

主题定制

该库使用了基础的 Flutter 组件，因此你可以通过自定义主题来控制组件的外观。例如，在 MaterialApp 中设置 theme 属性：

MaterialApp(
  theme: ThemeData(
    inputDecorationTheme: const InputDecorationTheme(
      border: OutlineInputBorder(),
    ),
  ),
  ...
)

示例项目结构

以下是一个完整的示例项目结构，展示了如何将上述组件集成到应用程序中：

import 'package:flutter/material.dart';
import 'package:supabase_auth_ui/supabase_auth_ui.dart';

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        inputDecorationTheme: const InputDecorationTheme(
          border: OutlineInputBorder(),
        ),
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => const SignUp(),
        '/magic_link': (context) => const MagicLink(),
        '/update_password': (context) => const UpdatePassword(),
        '/phone_sign_in': (context) => const PhoneSignIn(),
        '/phone_sign_up': (context) => const PhoneSignUp(),
        '/verify_phone': (context) => const VerifyPhone(),
        '/home': (context) => const Home(),
      },
      onUnknownRoute: (settings) {
        return MaterialPageRoute<void>(
          settings: settings,
          builder: (context) => Scaffold(
            body: Center(
              child: Text(
                'Not Found',
                style: TextStyle(fontSize: 42, fontWeight: FontWeight.bold),
              ),
            ),
          ),
        );
      },
    );
  }
}

// 各个页面的具体实现可以根据需求进行编写

以上内容涵盖了 Supabase Auth UI 插件的主要功能及用法，希望对你有所帮助！如果有任何问题或需要进一步的帮助，请随时提问。