Flutter: Sign in with LinkedIn

Introduction

LinkedIn is the large and most trusted source of professional identities that uses OAuth 2.0 for user authorization and API authentication. After successful authentication, it provides an access token that can be used for retrieving member profile and email.

In this tutorial, I’ll walk you through setting up LinkedIn sign-in on your Flutter app and fetching relevant data using LinkedIn API.

login with Linkedin

We’ll be using the following package for the LinkedIn login implementation:

flutter_linkedin | Flutter Package

Step 1:

Create an app on https://www.linkedin.com/developers/apps/new and get clientId, clientSecret for the authentication process.

Step 2:

Add the following dependency in your pubspec.yaml file. Do make sure that you use the latest version of the package.

dependencies: 
  flutter_linkedin: ^1.0.2

and then

flutter pub get

Step 3:

Import the following package in your main.dart file:

import ‘package:flutter_linkedin/linkedloginflutter.dart’;

Step 4:

Initialize the LinkedInLogin class in initState of your page.

@override
void initState() {
  super.initState();
  LinkedInLogin.initialize(context,
      clientId: clientId,
      clientSecret: clientSecret,
      redirectUri: redirectUrl);
}

Step 5:

Get the access token from LinkedIn.

LinkedInLogin.loginForAccessToken(
        destroySession: true,
        appBar: AppBar(
          title: Text('Demo Login Page'),
        ))
    .then((accessToken) => print(accessToken))
    .catchError((error) {
  print(error.errorDescription);
});

TheLinkedInLogin.loginForAccessToken(...) throws AuthorizationResponse an object which has a property errorDescription.

Step 6:

Get the profile data of the user after successful sign in.

LinkedInLogin.getProfile(
        destroySession: true,
        forceLogin: true,
        appBar: AppBar(
          title: Text('Demo Login Page'),
        ))
    .then((profile) {
      print('First name : ${profile.firstName}');
      print('Last name : ${profile.lastName}');
      print('Avatar: ${profile.profilePicture.profilePictureDisplayImage
    .elements.first.identifiers.first.identifier}');
    })
    .catchError((error) {
  print(error.errorDescription);
});

Step 7:

Get the email of the user.

LinkedInLogin.getEmail(
    destroySession: true,
    forceLogin: true,
    appBar: AppBar(
      title: Text('Demo Login Page'),
    )).then((email) {
  print(
      'Email : ${email.elements.first.elementHandle.emailAddress}');
}).catchError((error) {
  print(error.errorDescription);
});

Conclusion

Now, our “Login with LinkedIn Tutorial” is complete. I hope that you have received some useful information from this article.

You can follow me on LinkedIn . Also, don’t forget to checkout our Website. Thank you for reading, if you enjoyed the article make sure to show me some love by hitting that clap (👏) button!

Happy coding…

Sunil Kumar