oauth.md

Firebase UI OAuth

Google Sign In

To support Google as a provider, first install the official google_sign_in plugin to your project as described in the README.

❗️ Important: you need go through configuration steps for each platform as described on the README.

Next, enable the "Google" provider in the Firebase Console:

To ensure cross-platform support, please ensure you have followed installation instructions for both the google_sign_in package and the provider on the Firebase Console (such as adding a SHA1 fingerprint for Android applications).

You will also need to install firebase_ui_oauth_google:

flutter pub add firebase_ui_oauth_google

And add a provider to the configuration:

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);

  FirebaseUIAuth.configureProviders([
    GoogleProvider(clientId: GOOGLE_CLIENT_ID),
  ]);
}

Now all pre-built screens that support multiple providers (such as RegisterScreen, SignInScreen, ProfileScreen and others) will have a themed button.

The configuration requires the clientId property (which can be found in the Firebase Console) to be set for seamless cross-platform support.

For iOS and macOS, clientId can be found in the GoogleService-Info.plist file available in the Firebase console under Firebase project settings.

For example, if your GoogleService-Info.plist looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
  <key>CLIENT_ID</key>
  <string>your-client-id.apps.googleusercontent.com</string>
  <!-- more keys -->
</dict>

you should set clientId to your-client-id.apps.googleusercontent.com:

GoogleProvider(clientId: 'your-client-id.apps.googleusercontent.com'),

Additionally, you need to add the following to your Info.plist file:

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>com.googleusercontent.apps.your-client-id</string>
    </array>
  </dict>
</array>

For Linux and Windows, clientId should be set to a web client id:

const iOSClientId = 'your-client-id.apps.googleusercontent.com';
const webClientId = 'your-web-client-id.apps.googleusercontent.com';

String get googleClientId {
  return switch (defaultTargetPlatform) {
    TargetPlatform.iOS || TargetPlatform.macOS => iOSClientId,
    _ => webClientId,
  }
}

See Custom screens section to learn how to use a button on your custom screen.

Sign in with Apple

To support Apple as a provider, enable the "Apple" provider in the Firebase Console:

You will also need to install firebase_ui_oauth_apple:

flutter pub add firebase_ui_oauth_apple

And add a provider to the configuration:

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);

  FirebaseUIAuth.configureProviders([
    AppleProvider(),
  ]);
}

Now all pre-built screens that support multiple providers (such as RegisterScreen, SignInScreen, ProfileScreen and others) will have a themed button. See Custom screens section to learn how to use a button on your custom screen.

Flutter Facebook Auth

To support Facebook as a provider, first install the flutter_facebook_auth plugin to your project. Each platform requires that you follow the installation process as specified in the documentation.

Next, enable the "Facebook" provider in the Firebase Console & provide your created Facebook App ID and secret:

You will also need to install firebase_ui_oauth_facebook:

flutter pub add firebase_ui_oauth_facebook

And add a provider to the configuration:

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);

  FirebaseUIAuth.configureProviders([
    FacebookProvider(clientId: FACEBOOK_CLIENT_ID),
  ]);
}

Now all pre-built screens that support multiple providers (such as RegisterScreen, SignInScreen, ProfileScreen and others) will have a themed button.

The configuration requires the clientId property (which can be found in the Firebase Console) to be set for seamless cross-platform support.

See Custom screens section to learn how to use a button on your custom screen.

Twitter Login

To support Twitter as a provider, first install the twitter_login plugin to your project and make sure you've performed necessary configuration as described on README.

Next, enable the "Twitter" provider in the Firebase Console:

You will also need to install firebase_ui_oauth_twitter:

flutter pub add firebase_ui_oauth_twitter

And add a provider to the configuration:

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);

  FirebaseUIAuth.configureProviders([
    TwitterProvider(
      apiKey: TWITTER_API_KEY,
      apiSecretKey: TWITTER_API_SECRET_KEY,
    ),
  ]);
}

Now all pre-built screens that support multiple providers (such as RegisterScreen, SignInScreen, ProfileScreen and others) will have a themed button.

You can get the apiKey and apiSecretKey from the Firebase Console or twitter developer portal.

Providing the apiSecretKey directly is not advised if you are building for the web. Instead, you can use "dart-define" to ensure that the value is omitted from web builds:

flutter run --dart-define TWITTER_SECRET=<your-twitter-api-secret-key>

When building the app on platforms other than the web, the TWITTER_SECRET environment variable can be defined using:

apiSecretKey: String.fromEnvironment('TWITTER_SECRET', ''),

See Custom screens section to learn how to use a button on your custom screen.

Custom screens

If you want to use a button on your custom screen, use OAuthProviderButton:

class MyCustomScreen extends StatelessWidget {
  const MyCustomScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return AuthStateListener<OAuthController>(
      child: OAuthProviderButton(
        // or any other OAuthProvider
        provider: GoogleProvider(clientId: GOOGLE_CLIENT_ID),
      ),
      listener: (oldState, newState, ctrl) {
        if (newState is SignedIn) {
          Navigator.pushReplacementNamed(context, '/profile');
        }
        return null;
      },
    );
  }
}