Adding social authentications

Before you start

Authentication with social logins can be a bit tricky to setup.

Firebase makes it easier so if you are not really experiemented and wants to get started quickly I recommend you to use firebase.

Using firebase

You have to go to your console and add the social login you want to use.

Go to your project > Authentication > Sign-in method > Add provider

Providers like facebook or twitter will require you to create an app on their platform and get the app id and secret.

Standard backend API

If you are using a standard backend API you will have to implement the social login on your backend. I won't explain how to do it here as it depends on your backend and it is not the purpose of this documentation.

Using CLI

We provide a tools that will generate some code for you.

If you are using firebase and have activated correctly the social logins you want... basically you don't need to do anything else.

Command line

dart run cli/bin/apparence_cli.dart auth --provider=PROVIDER

Where provider is one of the following:

  • google
  • facebook
  • apple
  • googlePlay (Others are not supported yet but you can still do it manually)

Doing it manually

  1. edit the following file to add your social login:
lib/modules/authentication/api/authentication_api.dart

And implement the methods for the provider you want to use.

Most of those providers use Oauth2.
If you don't know what it is, you can watch this great video from ByteByteGo here.

2. Add the repository method

lib/modules/authentication/repositories/authentication_repository.dart
  1. Call the repository method in the Signin Page State notifier
lib/modules/authentication/providers/signin_state_provider.dart

(You can see how it is done for google signin for example)

  1. Call the method from your view

Social logins

Let's see how to setup some social login.

Google

Google is the easiest to setup if you are using firebase. But this is the same for facebook or other providers.

Setup on firebase

  1. Open the console and go to your project > Authentication > Sign-in method > Google
  2. activate it
  3. copy the client id (configure web SDK > ID client Web)

Setup on mobile

You will receive this error

People API has not been used in project

open the lib/authentication/api/authentication_api.dart file and check you have configured the desired scopes and provided clientId again:

@override
  Future<Credentials> signinWithGoogle() async {
    final loginResult = await GoogleSignIn(
        clientId: env.googleClientId,
        scopes: [
          'email',
          'https://www.googleapis.com/auth/contacts.readonly',
        ]).signIn();
    final googleAuth = await loginResult?.authentication;
    final credentials = GoogleAuthProvider.credential(
      accessToken: googleAuth?.accessToken,
      idToken: googleAuth?.idToken,
    );
    return _auth.signInWithCredential(credentials).then(
          (value) => Credentials(
            id: value.user!.uid,
            token: value.credential?.token.toString() ?? '',
          ),
        );
  }

prefer adding the GOOGLE_CLIENT_ID as an environment variable in your IDE or in your CI. Else you can directly add it in the environment and access it here.

The first time you will request an authentication it will fails because you need to activate the People API. Click on the link in the error message and activate the API.

Add your project client ID to your environment variables (GOOGLE_CLIENT_ID) or direclty in the code (lib/authentication/api/authentication_api.dart)

I strongly recommend you to use environment variables as it will be easier to manage and you will be able to use the same code for web and mobile. Also for security reasons you should not commit your client id in your code.

Setup on web

Add your project client ID in the index.html file (web/index.html)

<meta name="google-signin-client_id" content="YOUR_GOOGLE_OATH_KEY.apps.googleusercontent.com">

YOUR_GOOGLE_OATH_KEY is the client id you copied from the console.