Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: add cache explanation to Flutter Firebase Login Tutorial #4339

Closed
wants to merge 3 commits into from
Closed
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
150 changes: 150 additions & 0 deletions docs/src/content/docs/tutorials/flutter-firebase-login.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,36 @@ We need to follow the [firebase_auth usage instructions](https://pub.dev/package
Remember to update the `google-services.json` on Android and the `GoogleService-Info.plist` & `Info.plist` on iOS, otherwise the application will crash.
:::

## Caching Implementation

### Purpose of Caching

The caching mechanism in this login flow provides several key benefits:

- **Improved User Experience**: By caching the user's authentication state, we eliminate unnecessary sign-in prompts and provide seamless transitions between app sessions.
- **Offline Support**: The cached authentication state allows the application to function even with intermittent internet connectivity.
- **Performance Optimization**: Caching reduces authentication checks, improving app responsiveness.

### Caching Details

#### Caching Mechanism

- Implementation using shared preferences for persistent storage
- Secure storage of authentication tokens
- User state management through local caching

#### Caching Strategy

- When cache is updated: After successful login, registration, and token refresh
- When cache is read: App startup and authentication state checks
- Cache invalidation rules and refresh policies

#### Error Handling

- Handling expired cached credentials
- Cache corruption recovery
- Fallback mechanisms for cache failures
Comment on lines +113 to +141
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think this fits in with the rest of the tutorial and a lot of this information doesn't apply to the cache usage in this tutorial.


## Project Dependencies

We can replace the generated `pubspec.yaml` at the root of the project with the following:
Expand All @@ -129,6 +159,28 @@ Then install all of the dependencies:
We are depending on the `authentication_repository` package via path which will allow us to iterate quickly while still maintaining a clear separation.
:::

## Package Documentation

### Firebase Packages

- **firebase_auth**: Core authentication package for Firebase integration

- User authentication management
- Authentication state tracking
- Various sign-in method support

- **firebase_core**: Base Firebase functionality

- Firebase initialization
- Platform-specific configurations
- Core Firebase services setup

### Installation Guide

- Package version compatibility matrix
- Step-by-step installation process
- Required configuration for each package

## main.dart

The `main.dart` file can be replaced with the following:
Expand Down Expand Up @@ -201,6 +253,36 @@ A [`BlocObserver`](/bloc-concepts/#blocobserver-1) is great for logging Bloc eve
title="lib/app/bloc/app_bloc.dart"
/>

## Project Structure Overview

### BLoC Pattern Implementation

- Separation of business logic from UI
- State management architecture
- Event handling and state emissions

### Directory Structure

```
lib/
├── blocs/
│ ├── authentication/
│ └── login/
├── models/
│ ├── user.dart
│ └── authentication_status.dart
├── repositories/
│ └── authentication_repository.dart
└── utils/
└── validators.dart
```

### Key Files

- **auth_bloc.dart**: Manages authentication state
- **auth_repository.dart**: Firebase authentication interface
- **user_repository.dart**: User data management

## Models

An `Email` and `Password` input model are useful for encapsulating the validation logic and will be used in both the `LoginForm` and `SignUpForm` (later in the tutorial).
Expand Down Expand Up @@ -336,6 +418,74 @@ A `widgets` directory was created alongside the `view` directory within the `hom
When the logout `IconButton` is tapped, an `AuthenticationLogoutRequested` event is added to the `AuthenticationBloc` which signs the user out and navigates them back to the `LoginPage`.
:::

## Detailed Setup Guide

### Firebase Project Configuration

1. Creating Firebase project

- Project setup in Firebase Console
- Application registration
- Authentication service enablement

2. Required configurations

- API key setup
- OAuth consent configuration
- Allowed domains and redirect URIs

### Platform Configuration

#### Android Setup

1. google-services.json

- Proper file placement
- Configuration verification

2. Gradle configuration

- Required dependencies
- Plugin configuration

3. Manifest updates

- Internet permissions
- OAuth redirects
- Required metadata

#### iOS Setup

1. GoogleService-Info.plist

- File placement
- Configuration verification

2. Info.plist configuration

- URL schemes
- Required permissions

3. CocoaPods setup

- Pod installation
- Platform configuration
- Required dependencies

### Troubleshooting

#### Common Issues

1. Firebase initialization failures
2. Authentication state inconsistencies
3. Platform-specific integration problems

#### Solutions and Best Practices

- Verification steps for each integration point
- Debug logging implementation
- Error handling strategies

At this point we have a pretty solid login implementation using Firebase and we have decoupled our presentation layer from the business logic layer by using the Bloc Library.

The full source for this example can be found [here](https://github.com/felangel/bloc/tree/master/examples/flutter_firebase_login).