认证

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组件,允许您通过自定义主题控制组件外观。