Authentication setup
The Flutter News Toolkit comes pre-configured to support authentication using passwordless email, Google login, Apple ID, and social authentication using Facebook and Twitter login. To set this up for your news app, use the following instructions for each Firebase project and app.
Email
The news toolkit supports passwordless login. This means a deep link is sent to the user's email address, that when clicked will open your app and log the user in.
Firebase configuration
In your Firebase Console, go to Firebase -> Authentication -> Sign-in-method -> Add new provider -> Email/Password to set up your email authentication method. The toolkit currently supports a passwordless login flow, so be sure to enable this setting as well.
Passwordless authentication with an email link requires additional configuration steps. Please follow the steps for authentication on Apple platforms and authentication on Android configurations.
Once the email authentication method is set up, go to Firebase -> Engage -> Dynamic links. Set up a new dynamic link URL prefix (for example, yourApplicationName.page.link) with a dynamic link URL of "/email_login".
Once the dynamic link is set up, replace the placeholder value for FLAVOR_DEEP_LINK_DOMAIN inside the launch.json
file with the dynamic link URL prefix you just created. This enviroment variable will be used inside firebase_authentication_client.dart
to generate the dynamic link URL that will be sent to the user.
In addition, replace the placeholder value for every FLAVOR_DEEP_LINK_DOMAIN key within your project.pbxproj
file with the dynamic link URL prefix you just created.
Google
Firebase configuration
In your Firebase Console, go to Firebase -> Authentication -> Sign-in-method -> Add new provider -> Google to set up your Google authentication method. Add your (Google) web ID and web client secret under the Web SDK Configuration dropdown menu. You can find your web client ID for existing projects by selecting your project and OAuth 2.0 entry on the Google API Console.
Apple
Firebase configuration
In your Firebase Console, go to Firebase -> Authentication -> Sign-in-method -> Add new provider -> Apple to set up your Apple authentication method. Enable this in your app by following the additional configuration steps for Apple authentication and Apple authentication on Android.
Complete the setup
To complete setup, add this authorization callback URL to your app configuration in the Apple Developer Console. Additional steps might be needed to verify ownership of this web domain to Apple. To learn more, check out the Firebase authentication page.
Facebook
Create an app
Log in or create an account in the Facebook Developer Portal to get started. Once logged in, create a new app to support your development project. In the same portal, enable the Facebook Login product (Products -> Facebook Login). Next, go to Roles -> Roles and add your developer team so the team can customize the app configuration for Android and iOS. Finally, go to Settings -> Advanced and enable App authentication, native or desktop app?
Firebase configuration
After setting up your Firebase project, go to Firebase -> Authentication -> Sign-in-method -> Add new provider -> Facebook to set up your Facebook authentication method. Fill in the app ID and secret from the created Facebook app.
Complete the setup
To complete your setup, add the OAuth redirect URI listed in your Firebase Authentication Sign-in Method to your Facebook app configuration.
In addition, replace the placeholder value for every FACEBOOK_APP_ID , FACEBOOK_CLIENT_TOKEN and FACEBOOK_DISPLAY_NAME keys within your project.pbxproj
file with their corresponding values.
For additional details, check out the Firebase authentication page.
Twitter
Create an app
Log in or create an account in the Twitter Developer Portal. Once logged in, create both a project and an app to enable Twitter authentication in your news app. Enable OAuth 2.0 authentication by setting "yourapp://" as the callback URI and "Native app" as the type of the app. If possible, add your full team as developers of the Twitter app, so everyone has access to the app's ID and secret.
Enable elevated access
Within Twitter products, be sure to enable Twitter API v2 with "Elevated" access. Twitter needs this for authentication to work.
You might need to fill out a form to apply for "Elevated" access.
Firebase configuration
After setting up your Firebase project, go to Firebase -> Authentication -> Sign-in-method -> Add new provider -> Twitter to set up your Twitter authentication method. Fill in the app ID and secret from the created Twitter app.
Complete the setup
To complete your setup, add the OAuth redirect URI listed in your Firebase Authentication Sign-in Method to your Twitter app configuration.
In addition, replace the placeholder values for TWITTER_API_KEY and TWITTER_API_SECRET inside the launch.json
file. You must also replace the placeholder value for every TWITTER_REDIRECT_URI_SCHEME key within your project.pbxproj
file with their corresponding values.
For more information, check out the Firebase authentication page.