Vue3 Login with LinkedIn

This is a Vue3 package that provides a simple way to authenticate users with LinkedIn. It uses the LinkedIn OAuth2 protocol for user authentication and the LinkedIn API to retrieve the user's profile and other information.

Installation

npm install --save vue3-linkedin-login

We will trigger linkedInLogin by using useLinkedIn after click on Sign in with LinkedIn button, a popup window will show up and ask for the permission. After we accepted, the pop up window will redirect to redirectUri (should be LinkedInCallback component) then notice its opener about the authorization code Linked In provides us.

Usage

<template>
  <button @click="linkedInLogin">test</button>
</template>

<script setup>
  import { onMounted } from "vue";
  import { useLinkedIn, LinkedInCallback } from "vue3-linkedin-login";

  const { linkedInLogin, exchangeCodeForToken, getAccount, getMail } =
    useLinkedIn({
      clientId: "",
      clientSecret: "",
      redirectUri: "",
      onSuccess: async (code) => {
        const exchangeCode = await exchangeCodeForToken(code);
        const account = await getAccount(exchangeCode.access_token);
        const email = await getMail(exchangeCode.access_token);

        if (!account || !email) {
          return;
        }

        const firstName = account.localizedFirstName;
        const lastName = account.localizedLastName;
        const emailAddress = email.elements[0]["handle~"].emailAddress;

        const user = {
          firstName,
          lastName,
          emailAddress,
        };

        console.log(user);
      },
      scope: "r_emailaddress,r_liteprofile",
      onError: (error) => {
        console.log(error);
      },
    });

  onMounted(() => {
    LinkedInCallback();
  });
</script>

Props

Parameter	Value	Is Required	Default
clientId	string	true	-
clientSecret	string	true	-
redirectUri	string	true	-
onSuccess	function	true	-
onError	function	true	-
scope	string	true	r_liteprofile
state	string	false	-

This repo is inspired by the https://github.com/nvh95/react-linkedin-login-oauth2/ repo.