3-Step Guide to Add LinkedIn OpenID Sign-In to Your App (2025 Edition) 🚀

import { Component } from "react";

class LinkedIn extends Component {
  componentDidMount() {
    this.handleRedirect();
  }

  handleRedirect = () => {
    const urlParams = new URLSearchParams(window.location.search);
    const redirectUri = localStorage.getItem("linkedInRedirectUri");
    const savedState = localStorage.getItem("linkedInState");

    localStorage.removeItem("linkedInState");
    localStorage.removeItem("linkedInRedirectUri");

    const state = urlParams.get("state");
    const code = urlParams.get("code");
    const error = urlParams.get("error");

    // Clear URL parameters after handling
    let newURL = window.location.pathname;
    urlParams.delete("state");
    urlParams.delete("error");
    urlParams.delete("error_description");
    urlParams.delete("code");
    if (urlParams.toString()) {
      newURL = `${newURL}?${urlParams.toString()}`;
    }
    window.history.replaceState(null, null, newURL);

    if (error) {
      this.props.callback(error, null, null);
    } else if (redirectUri && code && savedState === state) {
      this.props.callback(null, code, redirectUri);
    }
  };

  startLogin = () => {
    const { clientId, scope } = this.props;
    const state = Math.random().toString(36).substring(7);
    localStorage.setItem("linkedInState", state);
    localStorage.setItem("linkedInRedirectUri", window.location.href);

    const loginUrl = getURL(clientId, state, scope);
    window.location.href = loginUrl; // Redirect to LinkedIn OAuth
  };

  render() {
    return (
      <button
        className={`linkedin-button ${this.props.className}`}
        onClick={this.startLogin}
      >
        <img
          src="/src/assets/images/Sign-In-Small---Active.png"
          alt="Sign in with LinkedIn"
          className="linkedin-icon"
        />
      </button>
    );
  }
}

export default LinkedIn;

const getURL = (clientId, state, scope) => {
  const redirectUri = encodeURIComponent(window.location.href);
  const base =
    "https://www.linkedin.com/oauth/v2/authorization?response_type=code&";
  const fullScope = scope?.length
    ? `&scope=${encodeURIComponent(scope.join(" "))}`
    : "";

  return `${base}client_id=${clientId}&redirect_uri=${redirectUri}&state=${state}${fullScope}`;
};

.linkedin-button {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.linkedin-icon {
  height: auto;
}

.linkedin-button:hover .linkedin-icon {
  content: url("/src/assets/images/Sign-In-Small---Hover.png");
}

import "./assets/styles/main.scss";
import { useState } from "react";
import LinkedIn from "./linkedin"; 

const Linkedin_ClientID = "867mq7ml7hx0gm"; 

function LinkedinPage() {
  const [authData, setAuthData] = useState(null);

  const handleLinkedInCallback = async (error, code, redirectUri) => {
    if (error) {
      console.error("LinkedIn login error:", error);
      return;
    }
    setAuthData(code);
    console.log("LinkedIn code:", code);
    console.log("Redirect URI:", redirectUri);

    // Prepare token exchange request
    // Send the code to the backend from here
  };

  return ( 
      <div
        style={{
          backgroundColor: "white", 
        }}
      >
        <div style={{ maxWidth: "1000px", wordWrap: "break-all" }}>
          <LinkedIn
            clientId={Linkedin_ClientID}
            scope={["openid", "profile", "email"]}
            callback={handleLinkedInCallback}
            state={"DCEeFWf45A53sdfKef424"}
            className="linkedin-button"
            text="Sign in with LinkedIn"
          />
          <p style={{ maxWidth: "1000px", overflowWrap: "break-word" }}>
            Credential: {authData}
          </p>
        </div>
      </div> 
  );
}

export default LinkedinPage;

const LINKEDIN_CLIENT_ID = "867mq7ml7hm";
const LINKEDIN_CLIENT_SECRET = "WPL_FAKE_=";
const LINKEDIN_ACCESS_TOKEN_URL = "https://www.linkedin.com/oauth/v2/accessToken";
const LINKEDIN_USERINFO = "https://api.linkedin.com/v2/userinfo";
const LINKEDIN_REDIRECTION_URI = "http://localhost:5173/";

async function exchangeLinkedInCodeForToken(code) {
  const myHeaders = new Headers();
  myHeaders.append("Content-Type", "application/x-www-form-urlencoded");

  const urlencoded = new URLSearchParams();
  urlencoded.append("grant_type", "authorization_code");
  urlencoded.append("code", code);
  urlencoded.append("redirect_uri", LINKEDIN_REDIRECTION_URI);
  urlencoded.append("client_id", LINKEDIN_CLIENT_ID);
  urlencoded.append("client_secret", LINKEDIN_CLIENT_SECRET);

  const requestOptions = {
    method: "POST",
    headers: myHeaders,
    body: urlencoded,
    redirect: "follow",
  };

  try {
    const response = await fetch(LINKEDIN_ACCESS_TOKEN_URL, requestOptions);
    const result = await response.text();
    console.log(result);
    const res = JSON.parse(result);
    return res.access_token;
  } catch (error) {
    console.error(error);
    throw error;
  }
}

async function retrieveMemberDetails(accessToken) {
  const myHeaders = new Headers();
  myHeaders.append("Authorization", `Bearer ${accessToken}`);

  const requestOptions = {
    method: "GET",
    headers: myHeaders,
    redirect: "follow",
  };

  try {
    const response = await fetch(LINKEDIN_USERINFO, requestOptions);
    const result = await response.json();
    console.log(result);
    return {
      name: result.name,
      profile: result.picture,
      email: result.email,
    };
  } catch (error) {
    console.error(error);
    throw error;
  }
}