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
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
Top comments (2)
Thanks for sharing! The props documentation is really helpful in understanding how to customize the LinkedIn Sign in button.
Thanks for your feedback.