Docs
Set-up Authentication

Set-up Authentication

Config to authenticate your app's users in our templates.

User authentication is managed via the auth_client local package. It has two implementations:

  • The FakeAuthClient is used when the app runs with the development flavor. It's used to simulate the behavior of a real authentication client without actually interacting with a real backend or authentication service.
  • The FirebaseAuthClient is used when the app runs with the production flavor. It helps the app to connect with Firebase.
# The structure of the auth client
├── packages
│   ├── auth_client
│   │   ├── lib
│   │   │   ├── src
│   │   │   │   ├── auth_client.dart
│   │   │   │   ├── fake_auth_client.dart
│   │   │   │   ├── firebase_auth_client.dart

Before you can use the FirebaseAuthClient, there is some set-up required on your side.

Set-up Firebase in your Project

The first step is to set-up Firebase into your application. Head to your Flutter project:

  • Add Firebase to your application. You can follow the official step-by-step docs
  • After completing the Firebase set-up (as described in the official docs), make sure you have the lib/firebase_options.dart file with your Firebase app configuration.
  • Modify the lib/main_production.dart file to initialize Firebase in the project.
...
void main() async {
  unawaited(
    bootstrap(
      () async {
        WidgetsFlutterBinding.ensureInitialized();
        await Firebase.initializeApp(
          options: DefaultFirebaseOptions.currentPlatform,
        );
        ...
      }
    )
  )
}

Set-up the Auth Providers

Congrats, your app is now connected with your Firebase project. It's time to set-up one or more auth providers.

Depending on which template you have purchased, you might need to set-up one or more authentication providers:

  • Email & Password Login: DocFinder, DynaMart, Vibe, Wanderly.
  • Phone Number Login: EchoLink.
  • Google Login: DocFinder, DynaMart, Hungry, Vibe, Wanderly.
  • Apple Login: DocFinder, DynaMart, Hungry, Vibe, Wanderly.
  • Facebook Login: Not implemented yet.

Login with Email & Password

Go to your Firebase console and select your project:

  • Navigate to the Authentication section and go to the Sign-in method tab.
  • Find and enable the Email/Password sign-in provider.

Save and you're done with the Email and Password provider.

Login with Apple

The templates utilize the sign_in_with_apple package to implement the Apple SignIn feature. Check it on pub.dev

To get started, go to your Firebase console and select your project:

  • Navigate to the Authentication section and then go to the Sign-in method tab.
  • Find and enable the Apple sign-in provider.

As a next step, you must have an account on the Apple Developer Program. Without an account, it won't be possible to integrate the Apple Sign In.

  • Create or login into your Apple Developer account.
  • Register a new App ID for the project. Go to "Identifiers" and register a new App ID.

Apple Identifiers

As you register the app:

  • You should utilize the same bundle ID of your app. If you haven't replaced the default bundle ID of the template (e.g. com.atomsbox.), yet, you should replace it before continuing.
  • You should check the "Sign In with Apple" capability from the list.

After creating the new Identifier, you should also enable the Sign In with Apple capability in Xcode.

  • Open the Runner.xcworkspace file in Xcode
  • Go to the Signing & Capabilities tab. You should be logged in with your Apple Developer account.

Xcode Signing & Capabilities

  • Click on + Capability and select the Sign In with Apple option.

Apple Sign In Signing & Capabilities

Login with Google

The templates utilize the google_sign_in package to implement the Google SignIn feature. Check it on pub.dev or take a look at the Firebase official docs.

To get started, go to your Firebase console and select your project:

  • Navigate to the Authentication section and then go to the Sign-in method tab.
  • Find and enable the Google sign-in provider.

After you enable the Google sign-in provider, you will have to update the GoogleService-Info file ios/Runner/GoogleService-Info.plist.

  • Delete the current version of the file
  • Get the updated version of the GoogleService-Info.plist from the Firebase console: Settings --> General --> Apple Apps.

Firebase Settings iOS App

  • After downloading it, add it into the same folder as the original one (ios/Runner)

As a next step, you'll have to configure the CFBundleURLTypes in the Info.plist file as shown below. You'll just have to replace the "REVERSED_CLIENT_ID_HERE". Your reverse client ID is in the GoogleService-Info.plist file.

<key>CFBundleURLTypes</key>
	<array>
		<dict>
			<key>CFBundleTypeRole</key>
			<string>Editor</string>
			<key>CFBundleURLSchemes</key>
			<array>
        <!-- Get the reversed client ID from the GoogleService-Info file -->
        <string>REVERSED_CLIENT_ID_HERE</string>
			</array>
		</dict>
	</array>

On Android, you have to generate and register a SHA-1 key in your Firebase project either with Play App Signing or by self-signing your app. The official documentation from Google guides you step-by-step on how to generate the SHA-1 key.

Once you create the SHA-1 key:

  1. Register the key in the Firebase console: Settings --> General --> Android Apps
  2. Select your Android app and click on "Add fingerprint"
  3. Add your SHA-1 key and save.

Firebase Settings Android Fingerprint

Login with Facebook

👷 Not implemented yet, in progress...