Merge pull request #182 from authorizerdev/feat/add-linkedin-login

feat: add linkedin login

Author: lakhansamani

app/package-lock.json

@@ -11,7 +11,7 @@
 	"author": "Lakhan Samani",
 	"license": "ISC",
 	"dependencies": {
-		"@authorizerdev/authorizer-react": "^0.17.0",
+		"@authorizerdev/authorizer-react": "^0.23.0",
 		"@types/react": "^17.0.15",
 		"@types/react-dom": "^17.0.9",
 		"esbuild": "^0.12.17",

app/package.json

@@ -9,7 +9,7 @@ import {
 	Divider,
 	useMediaQuery,
 } from '@chakra-ui/react';
-import { FaGoogle, FaGithub, FaFacebookF } from 'react-icons/fa';
+import { FaGoogle, FaGithub, FaFacebookF, FaLinkedin } from 'react-icons/fa';
 import { TextInputType, HiddenInputType } from '../../constants';
 
 const OAuthConfig = ({
@@ -182,6 +182,44 @@ const OAuthConfig = ({
 							/>
 						</Center>
 					</Flex>
+					<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
+						<Center
+							w={isNotSmallerScreen ? '55px' : '35px'}
+							h="35px"
+							marginRight="1.5%"
+							border="1px solid #3b5998"
+							borderRadius="5px"
+						>
+							<FaLinkedin style={{ color: '#3b5998' }} />
+						</Center>
+						<Center
+							w={isNotSmallerScreen ? '70%' : '100%'}
+							mt={isNotSmallerScreen ? '0' : '3'}
+							marginRight="1.5%"
+						>
+							<InputField
+								borderRadius={5}
+								variables={envVariables}
+								setVariables={setVariables}
+								inputType={TextInputType.LINKEDIN_CLIENT_ID}
+								placeholder="LinkedIn Client ID"
+							/>
+						</Center>
+						<Center
+							w={isNotSmallerScreen ? '70%' : '100%'}
+							mt={isNotSmallerScreen ? '0' : '3'}
+						>
+							<InputField
+								borderRadius={5}
+								variables={envVariables}
+								setVariables={setVariables}
+								fieldVisibility={fieldVisibility}
+								setFieldVisibility={setFieldVisibility}
+								inputType={HiddenInputType.LINKEDIN_CLIENT_SECRET}
+								placeholder="LinkedIn Secret"
+							/>
+						</Center>
+					</Flex>
 				</Stack>
 			</Box>
 		</div>

dashboard/src/components/EnvComponents/OAuthConfig.tsx

@@ -7,6 +7,7 @@ export const TextInputType = {
 	GOOGLE_CLIENT_ID: 'GOOGLE_CLIENT_ID',
 	GITHUB_CLIENT_ID: 'GITHUB_CLIENT_ID',
 	FACEBOOK_CLIENT_ID: 'FACEBOOK_CLIENT_ID',
+	LINKEDIN_CLIENT_ID: 'LINKEDIN_CLIENT_ID',
 	JWT_ROLE_CLAIM: 'JWT_ROLE_CLAIM',
 	REDIS_URL: 'REDIS_URL',
 	SMTP_HOST: 'SMTP_HOST',
@@ -31,6 +32,7 @@ export const HiddenInputType = {
 	GOOGLE_CLIENT_SECRET: 'GOOGLE_CLIENT_SECRET',
 	GITHUB_CLIENT_SECRET: 'GITHUB_CLIENT_SECRET',
 	FACEBOOK_CLIENT_SECRET: 'FACEBOOK_CLIENT_SECRET',
+	LINKEDIN_CLIENT_SECRET: 'LINKEDIN_CLIENT_SECRET',
 	JWT_SECRET: 'JWT_SECRET',
 	SMTP_PASSWORD: 'SMTP_PASSWORD',
 	ADMIN_SECRET: 'ADMIN_SECRET',
@@ -99,6 +101,8 @@ export interface envVarTypes {
 	GITHUB_CLIENT_SECRET: string;
 	FACEBOOK_CLIENT_ID: string;
 	FACEBOOK_CLIENT_SECRET: string;
+	LINKEDIN_CLIENT_ID: string;
+	LINKEDIN_CLIENT_SECRET: string;
 	ROLES: [string] | [];
 	DEFAULT_ROLES: [string] | [];
 	PROTECTED_ROLES: [string] | [];

dashboard/src/constants.ts

@@ -26,7 +26,8 @@ export const EnvVariablesQuery = `
       GITHUB_CLIENT_SECRET,
       FACEBOOK_CLIENT_ID,
       FACEBOOK_CLIENT_SECRET,
-      ROLES,
+      LINKEDIN_CLIENT_ID,
+      LINKEDIN_CLIENT_SECRET,
       DEFAULT_ROLES,
       PROTECTED_ROLES,
       JWT_TYPE,

dashboard/src/graphql/queries/index.ts

@@ -46,6 +46,8 @@ const Environment = () => {
 		GITHUB_CLIENT_SECRET: '',
 		FACEBOOK_CLIENT_ID: '',
 		FACEBOOK_CLIENT_SECRET: '',
+		LINKEDIN_CLIENT_ID: '',
+		LINKEDIN_CLIENT_SECRET: '',
 		ROLES: [],
 		DEFAULT_ROLES: [],
 		PROTECTED_ROLES: [],
@@ -83,6 +85,7 @@ const Environment = () => {
 		GOOGLE_CLIENT_SECRET: false,
 		GITHUB_CLIENT_SECRET: false,
 		FACEBOOK_CLIENT_SECRET: false,
+		LINKEDIN_CLIENT_SECRET: false,
 		JWT_SECRET: false,
 		SMTP_PASSWORD: false,
 		ADMIN_SECRET: false,

dashboard/src/pages/Environment.tsx

@@ -73,6 +73,10 @@ const (
 	EnvKeyFacebookClientID = "FACEBOOK_CLIENT_ID"
 	// EnvKeyFacebookClientSecret key for env variable FACEBOOK_CLIENT_SECRET
 	EnvKeyFacebookClientSecret = "FACEBOOK_CLIENT_SECRET"
+	// EnvKeyLinkedinClientID key for env variable LINKEDIN_CLIENT_ID
+	EnvKeyLinkedInClientID = "LINKEDIN_CLIENT_ID"
+	// EnvKeyLinkedinClientSecret key for env variable LINKEDIN_CLIENT_SECRET
+	EnvKeyLinkedInClientSecret = "LINKEDIN_CLIENT_SECRET"
 	// EnvKeyOrganizationName key for env variable ORGANIZATION_NAME
 	EnvKeyOrganizationName = "ORGANIZATION_NAME"
 	// EnvKeyOrganizationLogo key for env variable ORGANIZATION_LOGO

server/constants/env.go

@@ -8,4 +8,7 @@ const (
 	FacebookUserInfoURL = "https://graph.facebook.com/me?fields=id,first_name,last_name,name,email,picture&access_token="
 	// Ref: https://docs.github.com/en/developers/apps/building-github-apps/identifying-and-authorizing-users-for-github-apps#3-your-github-app-accesses-the-api-with-the-users-access-token
 	GithubUserInfoURL = "https://api.github.com/user"
+	// Ref: https://docs.microsoft.com/en-us/linkedin/shared/integrations/people/profile-api
+	LinkedInUserInfoURL = "https://api.linkedin.com/v2/me?projection=(id,localizedFirstName,localizedLastName,emailAddress,profilePicture(displayImage~:playableStreams))"
+	LinkedInEmailURL    = "https://api.linkedin.com/v2/emailAddress?q=members&projection=(elements*(handle~))"
 )

server/constants/oauth_info_urls.go

@@ -11,4 +11,6 @@ const (
 	SignupMethodGithub = "github"
 	// SignupMethodFacebook is the facebook signup method
 	SignupMethodFacebook = "facebook"
+	// SignupMethodLinkedin is the linkedin signup method
+	SignupMethodLinkedIn = "linkedin"
 )

server/constants/signup_methods.go

@@ -68,6 +68,8 @@ func InitAllEnv() error {
 	osGithubClientSecret := os.Getenv(constants.EnvKeyGithubClientSecret)
 	osFacebookClientID := os.Getenv(constants.EnvKeyFacebookClientID)
 	osFacebookClientSecret := os.Getenv(constants.EnvKeyFacebookClientSecret)
+	osLinkedInClientID := os.Getenv(constants.EnvKeyLinkedInClientID)
+	osLinkedInClientSecret := os.Getenv(constants.EnvKeyLinkedInClientSecret)
 	osResetPasswordURL := os.Getenv(constants.EnvKeyResetPasswordURL)
 	osOrganizationName := os.Getenv(constants.EnvKeyOrganizationName)
 	osOrganizationLogo := os.Getenv(constants.EnvKeyOrganizationLogo)
@@ -345,6 +347,20 @@ func InitAllEnv() error {
 		envData[constants.EnvKeyFacebookClientSecret] = osFacebookClientSecret
 	}
 
+	if val, ok := envData[constants.EnvKeyLinkedInClientID]; !ok || val == "" {
+		envData[constants.EnvKeyLinkedInClientID] = osLinkedInClientID
+	}
+	if osFacebookClientID != "" && envData[constants.EnvKeyLinkedInClientID] != osFacebookClientID {
+		envData[constants.EnvKeyLinkedInClientID] = osLinkedInClientID
+	}
+
+	if val, ok := envData[constants.EnvKeyLinkedInClientSecret]; !ok || val == "" {
+		envData[constants.EnvKeyLinkedInClientSecret] = osLinkedInClientSecret
+	}
+	if osFacebookClientSecret != "" && envData[constants.EnvKeyLinkedInClientSecret] != osFacebookClientSecret {
+		envData[constants.EnvKeyLinkedInClientSecret] = osLinkedInClientSecret
+	}
+
 	if val, ok := envData[constants.EnvKeyResetPasswordURL]; !ok || val == "" {
 		envData[constants.EnvKeyResetPasswordURL] = strings.TrimPrefix(osResetPasswordURL, "/")
 	}