diff --git a/web/docs/guides/with-flutter.mdx b/web/docs/guides/with-flutter.mdx index b1bcf43468d..93ab0e5acda 100644 --- a/web/docs/guides/with-flutter.mdx +++ b/web/docs/guides/with-flutter.mdx @@ -22,7 +22,7 @@ By the end of this guide you'll have an app which allows users to login and upda Supabase User Management example ### Github -Whenever you get stuck at any point, take a look at [this repo](https://github.com/dshukertjr/flutter_supabase_quickstart). +Whenever you get stuck at any point, take a look at [this repo](https://github.com/supasquad/supabase-flutter-quickstart). ## Project set up @@ -161,7 +161,7 @@ Then let's install the only additional dependency: [supabase-flutter](https://gi Open the app and copy and paste the following inside `pubspec.yaml` under `dependencies`. ```yaml -supabase_flutter: ^0.0.4 +supabase_flutter: ^0.0.6 ``` Run `flutter pub get` to install the dependencies. @@ -283,6 +283,26 @@ class AuthState extends SupabaseAuthState { } ``` +### Set up AuthRequiredState + +We might want to show certain pages to the users only if they are signed in. +For that we can create a handy `AuthRequiredState` class that we can inherit from for pages where the users need to be authenticated. +`AuthRequiredState` will inherit `SupabaseAuthRequiredState` which is provided by `supabase_flutter` package. + +```dart title="lib/components/auth_required_state.dart" +import 'package:flutter/material.dart'; +import 'package:supabase_flutter/supabase_flutter.dart'; + +class AuthRequiredState + extends SupabaseAuthRequiredState { + @override + void onUnauthenticated() { + /// Users will be sent back to the LoginPage if they sign out. + Navigator.of(context).pushNamedAndRemoveUntil('/login', (route) => false); + } +} +``` + Let's also create a constant file to make it easier to use Supabase client. ```dart title="lib/utils/constants.dart" @@ -412,13 +432,14 @@ class _LoginPageState extends AuthState { ### Set up Account page After a user is signed in we can allow them to edit their profile details and manage their account. -Let's create a new component for that called `account_page.dart`. -Note that this page will also inherit `AuthState` as it will handle user sign out. +Let's create a new widget called `account_page.dart` for that. +Note that this page will inherit `AuthRequiredState` as user needs to be authenticated to view this page. ```dart title="lib/pages/account_page.dart" import 'package:flutter/material.dart'; -import 'package:supabase_flutter_guide/components/auth_state.dart'; +import 'package:supabase_flutter_guide/components/auth_required_state.dart'; import 'package:supabase_flutter_guide/utils/constants.dart'; +import 'package:supabase/supabase.dart'; class AccountPage extends StatefulWidget { const AccountPage({Key? key}) : super(key: key); @@ -427,20 +448,19 @@ class AccountPage extends StatefulWidget { _AccountPageState createState() => _AccountPageState(); } -class _AccountPageState extends AuthState { +class _AccountPageState extends AuthRequiredState { late final _usernameController = TextEditingController(); late final _websiteController = TextEditingController(); var _loading = false; - Future _getProfile() async { + Future _getProfile(String userId) async { setState(() { _loading = true; }); - final user = supabase.auth.user()!; final response = await supabase .from('profiles') .select() - .eq('id', user.id) + .eq('id', userId) .single() .execute(); if (response.error != null && response.status != 406) { @@ -496,9 +516,16 @@ class _AccountPageState extends AuthState { } @override - void initState() { - _getProfile(); - super.initState(); + void onAuthenticated(Session session) { + final user = session.user; + if (user != null) { + _getProfile(user.id); + } + } + + @override + void onUnauthenticated() { + Navigator.of(context).pushReplacementNamed('/login'); } @override @@ -538,7 +565,6 @@ class _AccountPageState extends AuthState { ``` - ### Launch! Now that we have all the components in place, let's update `lib/main.dart`: diff --git a/web/static/img/deeplink-setting.png b/web/static/img/deeplink-setting.png index ebfa4cce24a..2bd335fd5ed 100644 Binary files a/web/static/img/deeplink-setting.png and b/web/static/img/deeplink-setting.png differ