How to use LinkedIn Login with Okta in a React App

Questions
1

Hello everyone, I would like some help if anyone know what’s going on in this example code I have.

We are a group of 5 students at Lambda School working on a project that utilizes Okta/LinkedIn for authentication. We want our users to login our application with their LinkedIn accounts, save those users in Okta app, and authorize them to edit certain entries in our application.

So far, I installed @okta/okta-react npm package in an empty project following the guidelines on Okta React Quickstart page. I am able to login/signup to Okta app and receive authState object with idToken, isAuthenticated properties from useOktaAuth hook. I am trying to do the same flow for a LinkedIn login feature.

So far, I created the Login with LinkedIn link following Okta’s guidelines on Social Login page. When user clicks “Login with LinkedIn” it redirects user to login form on LinkedIn. If it’s a new user, authorization page shows up as well. After accepting, the user shows up on Okta dashboard as registered. When user logs in and is redirected back to /implicit/callback address (which renders LoginCallback component from @okta/okta-react library), #id_token shows up in the address bar. But I have two problems at this point:

  1. I receive this error: AuthSdkError: Unable to retrieve OAuth redirect params cookie
  2. authState.isAuthenticated is still false, authState.idToken is null.

I would appreciate any help solving this issue. Here is my code (Everything in one file):

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import { Security, LoginCallback, useOktaAuth } from "@okta/okta-react";

const config = {
  issuer: "https://dev-123123.okta.com/oauth2/default",
  clientId: "XXXXXXXX",
  redirectUri: "http://localhost:3000/implicit/callback",
  pkce: true,
  responseType: "id_token",
  responseMode: "fragment",
  scope: "openid",
  state: "ANYVALUE",
  nonce: "ANYVALUE",
};

const App = () => {
  return (
    <Router>
      <Security {...config}>
        <Route path="/" component={Home} />
        <Route path="/implicit/callback" component={LoginCallback} />
      </Security>
    </Router>
  );
};

const Home = () => {
  const { authState, authService } = useOktaAuth();

  const login = async () => {
    authService.login("/");
  };

  const logout = async () => {
    authService.logout("/");
  };

  if (authState.isPending) {
    return <div>Loading...</div>;
  }

  return authState.isAuthenticated ? (
    <button onClick={logout}>Logout</button>
  ) : (
    <>
      <button onClick={login}>Login</button>
      <a href={`https://dev-123123.okta.com/oauth2/v1/authorize?idp=LINKEDIN_APP_CLIENT_ID&client_id=${config.clientId}&response_type=id_token&response_mode=fragment&scope=openid&redirect_uri=http://localhost:3000/implicit/callback&state=ANYVALUE&nonce=ANYVALUE`}>
        Login with LinkedIn
      </a>
    </>
  );
};

export default App;
2

I want to know if you success on login through LinkedIn… If so please reply I want to know the steps