|
| 1 | +# Navigation |
| 2 | + |
| 3 | +Firebase UI uses Flutter navigation capabilities to navigate between pages. |
| 4 | + |
| 5 | +By default, it uses "Navigator 1." when a new screen needs to be shown as a result of user interaction (`Navigator.push(context, route)` is used). |
| 6 | + |
| 7 | +For applications using the standard navigation APIs, navigation will work out of the box and require no intervention. However, for applications using |
| 8 | +a custom routing package, you will need to override the default navigation actions to integrate with your routing strategy. |
| 9 | + |
| 10 | +## Custom routing |
| 11 | + |
| 12 | +For this example, the application will create [named routes](https://docs.flutter.dev/cookbook/navigation/named-routes). Within the UI logic, we can |
| 13 | +override the default actions (e.g. signing in or signing out) the UI performs to instead integrate with those named routes. |
| 14 | + |
| 15 | +First, we define the root route that checks for authentication state and renders a `SignInScreen` or `ProfileScreen`: |
| 16 | + |
| 17 | +```dart |
| 18 | +class MyApp extends StatelessWidget { |
| 19 | + @override |
| 20 | + Widget build(BuildContext context) { |
| 21 | + const providers = [EmailProvider()]; |
| 22 | +
|
| 23 | + return MaterialApp( |
| 24 | + initialRoute: FirebaseAuth.instance.currentUser == null ? '/sign-in' : '/profile', |
| 25 | + routes: { |
| 26 | + '/sign-in': (context) => SignInScreen(providers: providers), |
| 27 | + '/profile': (context) => ProfileScreen(providers: providers), |
| 28 | + }, |
| 29 | + ); |
| 30 | + } |
| 31 | +} |
| 32 | +``` |
| 33 | + |
| 34 | +By default, when a user triggers a sign-in via the `SignInScreen`, no action default occurs. Since we are not subscribing to the authentication |
| 35 | +state (via the `authStateChanges` API), we need to manually force the navigator to push to a new screen (the `/profile` route). |
| 36 | + |
| 37 | +To do this, add a `AuthStateChangeAction` action to the `actions` property of the widget, for example for a successful sign in: |
| 38 | + |
| 39 | +```dart |
| 40 | +SignInScreen( |
| 41 | + actions: [ |
| 42 | + AuthStateChangeAction<SignedIn>((context, _) { |
| 43 | + Navigator.of(context).pushReplacementNamed('/profile'); |
| 44 | + }), |
| 45 | + ], |
| 46 | + // ... |
| 47 | +) |
| 48 | +``` |
| 49 | + |
| 50 | +You could also react to the user signing out in a similar manner: |
| 51 | + |
| 52 | +```dart |
| 53 | +ProfileScreen( |
| 54 | + actions: [ |
| 55 | + SignedOutAction((context, _) { |
| 56 | + Navigator.of(context).pushReplacementNamed('/sign-in'); |
| 57 | + }), |
| 58 | + ], |
| 59 | + // ... |
| 60 | +) |
| 61 | +``` |
| 62 | + |
| 63 | +Some UI widgets also come with internal actions which triggers navigation to a new screen. For example the `SignInScreen` widget allows users to |
| 64 | +reset their password by pressing the "Forgot Password" button, which internally navigates to a `ForgotPasswordScreen`. To override this action and |
| 65 | +navigate to a named route, provide the `actions` list with a `ForgotPasswordAction`: |
| 66 | + |
| 67 | +```dart |
| 68 | +class MyApp extends StatelessWidget { |
| 69 | + @override |
| 70 | + Widget build(BuildContext context) { |
| 71 | + const providers = [EmailProvider()]; |
| 72 | +
|
| 73 | + return MaterialApp( |
| 74 | + initialRoute: FirebaseAuth.instance.currentUser == null ? '/sign-in' : '/profile', |
| 75 | + routes: { |
| 76 | + '/sign-in': (context) { |
| 77 | + return SignInScreen( |
| 78 | + providers: providers, |
| 79 | + actions: [ |
| 80 | + ForgotPasswordAction((context, email) { |
| 81 | + Navigator.of(context).pushNamed( |
| 82 | + '/forgot-password', |
| 83 | + arguments: {'email': email}, |
| 84 | + ); |
| 85 | + }), |
| 86 | + ], |
| 87 | + ); |
| 88 | + }, |
| 89 | + '/profile': (context) => ProfileScreen(providers: providers), |
| 90 | + '/forgot-password': (context) => MyCustomForgotPasswordScreen(), |
| 91 | + }, |
| 92 | + ); |
| 93 | + } |
| 94 | +} |
| 95 | +``` |
| 96 | + |
| 97 | +To learn more about the available actions, check out the [FirebaseUIActions API reference](https://pub.dev/documentation/firebase_ui_auth/latest/firebase_ui_auth/FirebaseUIActions-class.html). |
| 98 | + |
| 99 | +## Other topics |
| 100 | + |
| 101 | +## Other topics |
| 102 | + |
| 103 | +- [EmaiAuthProvider](./providers/email.md) - allows registering and signing using email and password. |
| 104 | +- [EmailLinkAuthProvider](./providers/email-link.md) - allows registering and signing using a link sent to email. |
| 105 | +- [PhoneAuthProvider](./providers/phone.md) - allows registering and signing using a phone number |
| 106 | +- [UniversalEmailSignInProvider](./providers/universal-email-sign-in.md) - gets all connected auth providers for a given email. |
| 107 | +- [OAuth](./providers/oauth.md) |
| 108 | +- [Localization](../../firebase_ui_localizations/README.md) |
| 109 | +- [Theming](./theming.md) |
0 commit comments