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-signLive 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
Support me at Patreon https://patreon.com/mayank120
License
MIT