feat: Bring back state

Author: nvh95

src/LinkedIn.tsx

@@ -7,6 +7,7 @@ export function LinkedIn({
   clientId,
   onSuccess,
   onError,
+  state,
   scope,
   closePopupMessage,
 }: LinkedInType) {
@@ -15,6 +16,7 @@ export function LinkedIn({
     clientId,
     onSuccess,
     onError,
+    state,
     scope,
     closePopupMessage,
   });

src/types.ts

@@ -9,6 +9,7 @@ export interface useLinkedInType {
     error: string;
     errorMessage: string;
   }) => void;
+  state?: string;
   scope?: string;
   closePopupMessage?: string;
 }

src/useLinkedIn.tsx

@@ -25,26 +25,27 @@ export function useLinkedIn({
   onSuccess,
   onError,
   scope = 'r_emailaddress',
+  state = '',
   closePopupMessage = 'User closed the popup',
 }: useLinkedInType) {
   const popupRef = useRef<Window>(null);
   const popUpIntervalRef = useRef<number>(null);
 
   const receiveMessage = useCallback(
     (event: MessageEvent) => {
-      const state = localStorage.getItem(LINKEDIN_OAUTH2_STATE);
+      const savedState = localStorage.getItem(LINKEDIN_OAUTH2_STATE);
       if (event.origin === window.location.origin) {
         if (event.data.errorMessage && event.data.from === 'Linked In') {
           // Prevent CSRF attack by testing state
-          if (event.data.state !== state) {
+          if (event.data.state !== savedState) {
             popupRef.current && popupRef.current.close();
             return;
           }
           onError && onError(event.data);
           popupRef.current && popupRef.current.close();
         } else if (event.data.code && event.data.from === 'Linked In') {
           // Prevent CSRF attack by testing state
-          if (event.data.state !== state) {
+          if (event.data.state !== savedState) {
             console.error('State does not match');
             popupRef.current && popupRef.current.close();
             return;
@@ -81,9 +82,9 @@ export function useLinkedIn({
 
   const getUrl = () => {
     const scopeParam = `&scope=${encodeURI(scope)}`;
-    const state = generateRandomString();
-    localStorage.setItem(LINKEDIN_OAUTH2_STATE, state);
-    const linkedInAuthLink = `https://www.linkedin.com/oauth/v2/authorization?response_type=code&client_id=${clientId}&redirect_uri=${redirectUri}${scopeParam}&state=${state}`;
+    const generatedState = state || generateRandomString();
+    localStorage.setItem(LINKEDIN_OAUTH2_STATE, generatedState);
+    const linkedInAuthLink = `https://www.linkedin.com/oauth/v2/authorization?response_type=code&client_id=${clientId}&redirect_uri=${redirectUri}${scopeParam}&state=${generatedState}`;
     return linkedInAuthLink;
   };