Flutter 认证界面组件

Flutter Auth UI 是一个 Flutter 包，包含用于用户认证的预构建组件。它是无样式的，可以匹配您的品牌和美学风格。

Flutter Auth UI

添加 Flutter Auth UI

将最新版本的 supabase-auth-ui 包添加到 pubspec.yaml 文件中：

1
flutter pub add supabase_auth_ui

初始化 Flutter Auth 包

1
2
3
4
5
6
7
8
9
10
11
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());}

邮箱认证

使用 SupaEmailAuth 组件创建邮箱和密码的登录与注册表单。它还包含一个按钮用于切换显示忘记密码表单。

您可以通过 metadataFields 参数向表单添加额外字段，这些字段将作为元数据传递给 Supabase。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
SupaEmailAuth(  redirectTo: kIsWeb ? null : 'io.mydomain.myapp://callback',  onSignInComplete: (response) {},  onSignUpComplete: (response) {},  metadataFields: [    MetaDataField(    prefixIcon: const Icon(Icons.person),    label: '用户名',    key: 'username',    validator: (val) {            if (val == null || val.isEmpty) {            return '请输入内容';            }            return null;          },        ),    ],)

魔法链接认证

使用 SupaMagicAuth 组件创建魔法链接登录表单。

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

重置密码

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

1
2
3
4
5
SupaResetPassword(  accessToken: supabase.auth.currentSession?.accessToken,  onSuccess: (UserResponse response) {},  onError: (error) {},)

电话认证

使用 SupaPhoneAuth 创建电话认证表单。

1
2
3
4
SupaPhoneAuth(  authAction: SupaAuthAction.signUp,  onSuccess: (AuthResponse response) {},),

社交认证

该包支持通过官方社交提供商登录。

使用 SupaSocialsAuth 创建社交登录按钮列表。

1
2
3
4
5
6
7
8
9
10
11
12
SupaSocialsAuth(  socialProviders: [    OAuthProvider.apple,    OAuthProvider.google,  ],  colored: true,  redirectUrl: kIsWeb    ? null    : 'io.mydomain.myapp://callback',  onSuccess: (Session response) {},  onError: (error) {},)

主题定制

本包使用原生Flutter组件，允许您通过自定义主题控制组件外观。