DEV Community

Mayank
Mayank

Posted on

Linkedin Sign In Vue3

Linkedin Sign in ✅

Vue 3

It's client side package for rendering Linkined In Button for any vue app.

To learn more about linked in oAuth2 sign in (https://developer.linkedin.com/)

Install

npm install linkinedin-auth
Enter fullscreen mode Exit fullscreen mode

Live Demo

Check out the live demo of the component in action.

Props

Prop Default Description
clientId *required Client provided when you sign up for linkinedin developer account and create app.
css To override the default button class
redirectUri Default is origin app url window.location.origin Valid redirect uri follow linkedin developer doc.
scope r_emailaddress r_liteprofile To know more follow linkedin developer doc.
state default is current date timestamp A unique string value of your choice that is hard to guess. Used to prevent CSRF. For example, state=DCEeFWf45A53sdfKef424.

How it works?

  • Import package and add button into your component
  • Make sure all props are valid.
  • Someone click on the button it will redirect to linkedin account get the code for you and redirect back to redirect uri. followed with query string.
  • Take the code and pass it to your backend to validate and grab the user information.

Usage

<template>
    <LinkedInSignin
        :client-id="linkediInClientId"
        css="flex justify-center py-2 px-2 border border-slate-300 rounded shadow-sm bg-white text-sm font-medium text-slate-500 hover:!bg-slate-50 cursor-pointer"
    />
</template>

<script setup>
    import { LinkedInSignin } from "linkedin-auth";
    const linkediInClientId = process.env.LINKINED_AUTH_CLIENT_ID;
</script>
Enter fullscreen mode Exit fullscreen mode

Usage - Update default slot

<template>
    <LinkedInSignin
        :client-id="linkediInClientId"
        css="flex justify-center py-2 px-2 border border-slate-300 rounded shadow-sm bg-white text-sm font-medium text-slate-500 hover:!bg-slate-50 cursor-pointer"
    >
        Login with LinkedIn
    </LinkedInSignin>
</template>

<script setup>
    import { LinkedInSignin } from "linkedin-auth";
    const linkediInClientId = process.env.LINKINED_AUTH_CLIENT_ID;
</script>
Enter fullscreen mode Exit fullscreen mode

Support me

You can buy me coffee ☕️
https://www.buymeacoffee.com/mayankjhawar

Support me at Patreon
https://patreon.com/mayank120

License

MIT

Top comments (2)

Collapse
 
bkpecho profile image
Bryan King Pecho

Thanks for sharing! The props documentation is really helpful in understanding how to customize the LinkedIn Sign in button.

Collapse
 
mayank30 profile image
Mayank

Thanks for your feedback.