Flutter SignIn with LinkedIn

If you are using Flutter as a framework for development and you need LinkedIn to sign in, this is an article for you.

LinkedIn OAuth form

I will explain to you from scratch how to implement login with a LinkedIn for Flutter mobile applications.

Creating an app on LinkedIn developers

1. Go to https://www.linkedin.com/developers/apps/new

Creating a new LinkedIn app

2. After clicking on “Create app”, go to the tab “Products” and click on the “Select” button inside the “Sign In with LinkedIn” card. The verification process takes a few moments, and then r_emailaddress and r_liteprofile should appear under your permission. You can check this if you go to the tab “Auth”, and under “OAuth 2.0 scopes” section, r_emailaddress and r_liteprofile should be listed.

LinkedIn app — Auth tab

3. In some of the next steps, you will need a Client ID and Client Secret. You should keep these a secret, but currently, I will not, because I am planning to delete this app anyway in the end.

Flutter integration

Please include this linkedin_login package to your pubspec.yaml:

1. Add the latest version

dependencies: 
   linkedin_login: ^x.x.x

2. Pull your packages, by running this command inside your terminal

flutter pub get

3. Go to the file where you will use it, and include this import

import 'package:linkedin_login/linkedin_login.dart';

4. Use the LinkedIn widget:

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (BuildContext context) => LinkedInUserWidget(
      appBar: AppBar(
        title: Text('OAuth User'),
      ),
      destroySession: logoutUser,
      redirectUrl: YOURS_REDIRECT_URL,
      clientId: YOURS_CLIENT_ID,
      clientSecret: YOURS_CLIENT_SECRET,
      projection:  [
        ProjectionParameters.id,
        ProjectionParameters.localizedFirstName,
        ProjectionParameters.localizedLastName,
        ProjectionParameters.firstName,
        ProjectionParameters.lastName,
        ProjectionParameters.profilePicture,
      ],
      onGetUserProfile: (LinkedInUserModel linkedInUser) {


       user = UserObject(
          firstName: linkedInUser?.firstName?.localized?.label,
          lastName: linkedInUser?.lastName?.localized?.label,
          email: linkedInUser
              ?.email?.elements[0]?.handleDeep?.emailAddress,
          profileImageUrl: linkedInUser?.profilePicture?.displayImageContent?.elements[0]?.identifiers[0]?.identifier,
        );

        Navigator.pop(context);
      },
    ),
    fullscreenDialog: true,
  ),
);

5. That’s it.

Important notes

• Please replace the values below with values from your application. (Please see LinkedIn app — Auth tab image).

 redirectUrl: YOURS_REDIRECT_URL,
 clientId: YOURS_CLIENT_ID,
 clientSecret: YOURS_CLIENT_SECRET,

• Your redirect URL shouldn’t have some javascript code. Otherwise, your redirection will probably not work, which means that your users will not be able to log in. For instance, if you use:

https://youtube.com — it will not work, because there is some javascript which is redirecting users to some other parts of the page

https://youtube.com/callback — will work

• Errors will be logged inside the console, only when the app is running in debug mode.
• You can always see the example project as a reference
• Be aware that all the properties can contain null values. This can be a case if you didn’t provide a projection parameter, or if the user didn’t set or he has forbid some field for his account.
• The library has 90+% test coverage, but of course, there is a possibility that there is something wrong, so please open a Bug report whenever you think that there is something wrong with the implementation. But please, first, clone the example project, run it, and try to reproduce it.

LinkedIn API issues:

• Not getting data — user gonharry
• Retrieving Connections — user edoardoc
• Scripts on redirect URL — user Avrgebro

Documentation

This library is using OAuth V2 from LinkedIn. This means, that there is no more SDK for iOS or Android. Everything should be done via the REST API.
For a detailed flow of API called by this library, you can use this link.

So if you want to go fast, if you want to get done quickly, if you want your code to be easy to write, make it easy to read.”

― Robert C. Martin, Clean Code: A Handbook of Agile Software Craftsmanship

— — — — — — — — — - — Cheers and all the best. — — — — — — — — — — —