Linkedin Sign In Vue3

#vue #oauth #linkedin #javascript

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>