mirror of
https://github.com/supabase/supabase.git
synced 2026-10-18 15:49:09 +03:00
Charis
c757fcab20
Pages were missing from the sitemap after the reorganization. Added them back in. Also added an optional priority that can be specified by including `sitemapPriority` in content metadata. Used on the deprecated Auth Helpers pages to see if we can tweak the relative SEO ranking for them.
123 lines
2.8 KiB
Plaintext
123 lines
2.8 KiB
Plaintext
---
|
|
id: 'flutter-auth-ui'
|
|
title: 'Flutter Auth UI'
|
|
description: 'Prebuilt, customizable Flutter widgets for authenticating users.'
|
|
sitemapPriority: 0.5
|
|
---
|
|
|
|
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](https://pub.dev/packages/supabase_auth_ui) to pubspec.yaml:
|
|
|
|
```bash
|
|
flutter pub add supabase_auth_ui
|
|
```
|
|
|
|
### Initialize the Flutter Auth package
|
|
|
|
```dart
|
|
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.
|
|
|
|
```dart
|
|
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.
|
|
|
|
```dart
|
|
SupaMagicAuth(
|
|
redirectUrl: kIsWeb ? null : 'io.mydomain.myapp://callback',
|
|
onSuccess: (Session response) {},
|
|
onError: (error) {},
|
|
)
|
|
```
|
|
|
|
### Reset password
|
|
|
|
Use SupaResetPassword to create a password reset form.
|
|
|
|
```dart
|
|
SupaResetPassword(
|
|
accessToken: supabase.auth.currentSession?.accessToken,
|
|
onSuccess: (UserResponse response) {},
|
|
onError: (error) {},
|
|
)
|
|
```
|
|
|
|
### Phone Auth
|
|
|
|
Use SupaPhoneAuth to create a phone authentication form.
|
|
|
|
```dart
|
|
SupaPhoneAuth(
|
|
authAction: SupaAuthAction.signUp,
|
|
onSuccess: (AuthResponse response) {},
|
|
),
|
|
```
|
|
|
|
### Social Auth
|
|
|
|
The package supports login with [official social providers](../../auth#providers).
|
|
|
|
Use SupaSocialsAuth to create list of social login buttons.
|
|
|
|
```dart
|
|
SupaSocialsAuth(
|
|
socialProviders: [
|
|
OAuthProvider.apple,
|
|
OAuthProvider.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.
|