Skip to content

feat(firebase_ui_auth): Add providerBuilder for sign in and register screen layout customization#640

Open
fabiocarneiro wants to merge 3 commits into
firebase:mainfrom
fabiocarneiro:feature/providerBuilder
Open

feat(firebase_ui_auth): Add providerBuilder for sign in and register screen layout customization#640
fabiocarneiro wants to merge 3 commits into
firebase:mainfrom
fabiocarneiro:feature/providerBuilder

Conversation

@fabiocarneiro
Copy link
Copy Markdown

This PR introduces a major flexibility enhancement for SignInScreen, RegisterScreen, and LoginView.

It adds a providersBuilder callback that gives developers full control over the layout, ordering, and grouping of provider buttons.

Before

Previously, you could only provide a list of providers, and they would be rendered in a fixed order (Email -> Phone -> Email Link -> OAuth) regardless of the order they were passed in the providers list.

SignInScreen(
  providers: [
    EmailAuthProvider(),
    GoogleProvider(clientId: '...'),
    AppleProvider(),
  ],
)

After

With the new optional providersBuilder, you can fully customize the layout, grouping, and ordering of the provider buttons.

SignInScreen(
  providers: [
    EmailAuthProvider(),
    GoogleProvider(clientId: '...'),
    AppleProvider(),
  ],
  // New: Custom layout builder
  providersBuilder: (context, providers, content) {
    return Column(
      children: [
        // Render the Email provider first
        providers.firstWhere((p) => p is EmailAuthProvider),

        const Padding(
          padding: EdgeInsets.symmetric(vertical: 16),
          child: Divider(child: Text("Or sign in with")),
        ),

        // Grouping OAuth providers horizontally
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            providers.firstWhere((p) => p is GoogleProvider),
            providers.firstWhere((p) => p is AppleProvider),
          ],
        ),
      ],
    );
  },
)

💉 Dependency Injection Support

  • Added FirebaseAuthProvider to facilitate better dependency injection of the FirebaseAuth instance throughout the widget tree, simplifying how auth state is accessed in child components.

📦 Changes

  • Added providersBuilder property to SignInScreen, RegisterScreen, and LoginView.
  • Refactored LoginView to use a default builder that preserves legacy behavior (fixed order) if no custom builder is provided.
  • Updated OAuth provider buttons to ensure they remain compatible with the new flexible layout system.
  • Added missing dependencies to OAuth packages to support the new architecture

Related Issues

None

Checklist

Before you create this PR confirm that it meets all requirements listed below by checking the relevant checkboxes ([x]).
This will ensure a smooth and quick review process. Updating the pubspec.yaml and changelogs is not required.

  • I read the [Contributor Guide] and followed the process outlined there for submitting PRs.
  • My PR includes unit or integration tests for all changed/updated/fixed behaviors (See [Contributor Guide]).
  • All existing and new tests are passing.
  • I updated/added relevant documentation (doc comments with ///).
  • The analyzer (melos run analyze) does not report any problems on my PR.
  • All unit tests pass (melos run test:unit:all doesn't fail).
  • I read and followed the [Flutter Style Guide].
  • I signed the [CLA].
  • I am willing to follow-up on review comments in a timely manner.

Breaking Change

Does your PR require plugin users to manually update their apps to accommodate your change?

  • Yes, this is a breaking change.
  • No, this is not a breaking change.

Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

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

Code Review

This pull request introduces FirebaseAuthProvider, an InheritedWidget for managing FirebaseAuth instances throughout the widget tree, and adds a providersBuilder to allow custom ordering and appearance of authentication providers. Feedback identifies a stale configuration issue in the Google sign-in button and regressions in OAuth buttons where custom callbacks and tap actions are currently bypassed. Additionally, it is recommended to use FlutterError for better debugging and to clarify the documentation regarding the ProvidersBuilder implementation.

Comment thread packages/firebase_ui_oauth_google/lib/firebase_ui_oauth_google.dart
Comment thread packages/firebase_ui_oauth_google/lib/firebase_ui_oauth_google.dart Outdated
Comment thread packages/firebase_ui_auth/lib/src/auth_controller.dart Outdated
Comment thread packages/firebase_ui_auth/lib/src/views/login_view.dart
…n web

On web, GoogleSignIn calls initWithParams eagerly in its constructor.
The provider getter previously created a new GoogleProvider (and thus a
new GoogleSignIn) on every access, and build() called it twice — once
for AuthFlowBuilder and once for OAuthProviderButtonBase. Both called
initWithParams on the singleton GoogleSignInPlugin, triggering a
'Future already completed' race condition.

Fix: convert _GoogleSignInButton to StatefulWidget and create the
GoogleProvider once in initState.
@fabiocarneiro fabiocarneiro force-pushed the feature/providerBuilder branch from 0802c2a to dea12ce Compare May 6, 2026 12:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant