This is a sample project for using Supabase Authentication
with Flutter.
To get started, Please create your own Supabase project and provide project url
and anonKey
to main methods.
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await Supabase.initialize(
url: 'https://<your_project_id>.supabase.co', // add
anonKey: '<your_anon_key>', // add
);
runApp(const MyApp());
}
Supabase is an open source mBaaS intended alternate Firebase. It features a RelationalDataBase (RDB) based on Postgres and also offers a variety of features that are comparable to Firebase, including real-time updates, authentication, storage, and serverless functions.
The biggest difference between Firebase and Supabase is that Firebase is a NoSQL-based DB, while Supabase is an RDB-based DB. While many commercial services are based on RDBs, adopting Firebase required the cost of learning a new paradigm, NoSQL. But with Supabase, developers can easily construct an mobile infrastructure based on good old RDB that they are familiar with.
flutter pub add supabase_flutter
https://pub.dev/packages/supabase_flutter
You can find your url
and anonKey
from your project's setting.
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized(); // add
await Supabase.initialize( // add
url: 'https://<your_project_id>.supabase.co',
anonKey: '<your_anon_key>',
);
runApp(const MyApp());
}
All of the methods and properties provided by the package is accessed through this client class.
final supabase = Supabase.instance.client;
Most simple example of signing up is done by passing email and password to Supabase.instance.client.auth.signUp()
method.
if you want to register extra metadata, you can do it by passing Map<String, dynamic>
data to data
field.
Future<void> _signUp({
required String email,
required String userName,
required String password,
}) async {
try {
await supabase.auth.signUp(
email: email,
password: password,
data: {'user_name': userName}, // pass Map<String,dynamic> to register user metadata.
);
} on AuthException catch (error) {
...
} on Exception catch (error) {
...
}
}
Signing in with email/password is done through Supabase.instance.client.auth.signInWithPassword()
method.
It will return a AuthResponse
class which contains User
class and Session
class.
Future<void> _loginWithPassword({
required String email,
required String password,
}) async {
try {
final response = await Supabase.instance.client.auth.signInWithPassword(
email: email,
password: password,
);
if (response.user != null) {
...
}
} on AuthException catch (error) {
...
} on Exception catch (e) {
...
}
}
class AuthResponse {
final Session? session;
final User? user;
AuthResponse({
this.session,
User? user,
}) : user = user ?? session?.user;
/// Instanciates an `AuthResponse` object from json response.
AuthResponse.fromJson(Map<String, dynamic> json)
: session = Session.fromJson(json),
user = User.fromJson(json) ?? Session.fromJson(json)?.user;
}
You can get current User
through Supabase.instance.client.auth.currentUser
getter. If user is not signed in, null
will be returned.
final User? user = Supabase.instance.client.auth.currentUser;
You can listen to AuthState change through Supabase.instance.client.auth.onAuthStateChange
which returns a Stream for AuthState.
AuthState
contains AuthStateChange
class and Session
class. If you want to listen to User class according to AuthStateChange
, you can receive it from Session
class.
listenAuthStateChange() {
// Listen to AuthState stream
Supabase.instance.client.auth.onAuthStateChange.listen((AuthState state) {
if (state.event == AuthChangeEvent.signedIn) {
// action on signed in
final userData = state.session!.user; // get User through Session class
...
} else if (state.event == AuthChangeEvent.signedOut) {
// action on signed out
...
}
});
}
You can access user information as in below.
if you want to access information within metada, you can access them by User.userMetadata[<key>]
final userID = user.id;
final email = user.email;
final userName = user.userMetadata!['username']; // access metadata with userMetadata[<key>]
You can simply signout with Supabase.instance.client.auth.signOut()
Future<void> _logout() async {
try {
await Supabase.instance.client.auth.signOut();
} on AuthException catch (error) {
...
} on Exception catch (error) {
...
}
}