Skip to content

Latest commit

 

History

History
192 lines (132 loc) · 6.91 KB

oauth.md

File metadata and controls

192 lines (132 loc) · 6.91 KB

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:

Enable Google Provider

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.

Google app client ID

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:

Enable Apple Provider

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:

Enable Facebook Provider

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.

Facebook client id

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:

Enable Twitter Provider

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.

Twitter app id

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;
      },
    );
  }
}

Other topics