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