mirror of
https://github.com/supabase/supabase.git
synced 2026-10-16 06:39:09 +03:00
Stojan DimitrovskiandChris Chinchilla
93ba2a312c
* docs: indicate publishable key instead of anon in many examples * replace your-anon-key to string indicating publishable or anon * fix your_... * apply suggestion from @ChrisChinchilla Co-authored-by: Chris Chinchilla <chris@chrischinchilla.com> * Update keys in code examples * Prettier fix * Update apps/docs/content/guides/functions/schedule-functions.mdx --------- Co-authored-by: Chris Chinchilla <chris@chrischinchilla.com>
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_PUBLISHABLE_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.
|