linkedin-auth

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-sign

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>

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>

Support me

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

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

License

MIT