Add login with LinkedIn in dev environment

pbteja1998 · pbteja1998 · commit 259094c51259 · 2021-02-18T16:52:14.000+05:30
diff --git a/src/components/HomePageFeed.tsx b/src/components/HomePageFeed.tsx
@@ -225,12 +225,11 @@ export default function HomePageFeed({
 }) {
   const [session] = useSession()
   return (
-    <div className="min-h-screen bg-gray-100">
+    <div className="min-h-screen bg-gray-100 flex flex-col">
       <header className="bg-white shadow-sm lg:static lg:overflow-y-visible">
         <AppNavBar />
       </header>
-
-      <div className="py-10">
+      <div className="py-10 flex-1">
         <div className="max-w-3xl mx-auto sm:px-6 lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-12 lg:gap-8">
           <div className="hidden lg:block lg:col-span-3 xl:col-span-2">
             <HomePageSideNavBar />
diff --git a/src/pages/api/auth/[...nextauth].ts b/src/pages/api/auth/[...nextauth].ts
@@ -5,6 +5,7 @@ import Fauna from '@/adapters'
 
 import faunadb from 'faunadb'
 import { User } from 'src/pages/members'
+import slugify from 'slugify'
 const isProduction = process.env.NODE_ENV === 'production'
 const faunaClient = new faunadb.Client({
   secret: process.env.FAUNADB_SECRET ?? 'secret',
@@ -33,6 +34,45 @@ const options: InitOptions = {
         }
       },
     }),
+    ...(isProduction
+      ? []
+      : [
+          Providers.LinkedIn({
+            clientId: process.env.LINKEDIN_ID,
+            clientSecret: process.env.LINKEDIN_SECRET,
+            scope: 'r_liteprofile',
+            // @ts-ignore
+            profileUrl:
+              'https://api.linkedin.com/v2/me?projection=(id,localizedFirstName,localizedLastName,profilePicture(displayImage~digitalmediaAsset:playableStreams))',
+            // @ts-ignore
+            profile: (profileData) => {
+              const profileImage =
+                profileData?.profilePicture?.['displayImage~']?.elements?.[3]
+                  ?.identifiers?.[0]?.identifier ??
+                profileData?.profilePicture?.['displayImage~']?.elements?.[2]
+                  ?.identifiers?.[0]?.identifier ??
+                profileData?.profilePicture?.['displayImage~']?.elements?.[1]
+                  ?.identifiers?.[0]?.identifier ??
+                profileData?.profilePicture?.['displayImage~']?.elements?.[0]
+                  ?.identifiers?.[0]?.identifier ??
+                ''
+              const name =
+                profileData.localizedFirstName +
+                ' ' +
+                profileData.localizedLastName
+              const username = slugify(name + ' ' + profileData.id, {
+                lower: true,
+              })
+              return {
+                id: profileData.id,
+                name,
+                email: null,
+                image: profileImage,
+                username,
+              }
+            },
+          }),
+        ]),
   ],
   adapter: Fauna.Adapter({ faunaClient }),
 
diff --git a/src/pages/join.tsx b/src/pages/join.tsx
@@ -1,5 +1,5 @@
 import { Button } from '@/ui'
-import { IconBrandGithub } from 'tabler-icons'
+import { IconBrandGithub, IconBrandLinkedin } from 'tabler-icons'
 import { signIn, useSession } from 'next-auth/client'
 import { GetServerSideProps } from 'next'
 import { useEffect } from 'react'
@@ -8,6 +8,7 @@ import { Logo } from '@/components'
 
 export default function Login({ callbackUrl }) {
   const router = useRouter()
+  const isProduction = process.env.NODE_ENV === 'production'
   const [session, loading] = useSession()
 
   useEffect(() => {
@@ -44,6 +45,19 @@ export default function Login({ callbackUrl }) {
                   GitHub
                 </Button>
               </div>
+              {!isProduction && (
+                <div className="grid grid-cols-1 gap-3 mt-6">
+                  <Button
+                    className="flex justify-center w-full"
+                    leadingIcon={IconBrandLinkedin}
+                    variant="solid"
+                    variantColor="brand"
+                    onClick={() => signIn('linkedin')}
+                  >
+                    LinkedIn
+                  </Button>
+                </div>
+              )}
             </div>
           </div>
         </div>
