Remix Auth Linkedin Strategy

Common errors

• Error: Missing or invalid client ID/secret

  cause The `clientID` or `clientSecret` provided to `LinkedinStrategy` is incorrect or missing, preventing successful authentication with the LinkedIn API.
  fix Verify your `clientID` and `clientSecret` values against your LinkedIn developer application settings. Ensure they are correctly passed to the `LinkedinStrategy` constructor and are loaded from secure environment variables.

• Error: Invalid redirect_uri

  cause The `callbackURL` configured in `LinkedinStrategy` does not precisely match one of the authorized redirect URIs configured in your LinkedIn developer application.
  fix Ensure the `callbackURL` passed to `LinkedinStrategy` (e.g., `https://example.com/auth/linkedin/callback`) exactly matches an authorized redirect URI in your LinkedIn developer application settings, including protocol, domain, and path.

• TypeError: authenticator.authenticate is not a function

  cause The `Authenticator` instance was not properly initialized, the `linkedinStrategy` was not correctly `use`d with the authenticator, or the strategy name ('linkedin') is misspelled in the `authenticate` call.
  fix Confirm that `export const authenticator = new Authenticator(...)` is executed, that `authenticator.use(linkedinStrategy, 'linkedin')` is called, and that the strategy name 'linkedin' is consistently used in all `authenticator.authenticate` calls.

Warnings

• breaking Version 2.0.0 of `remix-auth-linkedin` migrated from LinkedIn's traditional OAuth 2.0 implementation to OpenID Connect. This is a breaking change that requires re-evaluation of how user profile data is structured and potentially changes to your LinkedIn application settings.
  Fix: Update your LinkedIn application configuration to support OpenID Connect and adjust your strategy callback function to handle the new `LinkedinProfile` structure and returned data.
• gotcha The `callbackURL` provided to the `LinkedinStrategy` must be a complete, absolute URL (e.g., `https://example.com/auth/linkedin/callback`), not a relative path. LinkedIn's API expects a fully qualified URL for redirects.
  Fix: Ensure `callbackURL` is configured with a full URL like `https://your-domain.com/auth/linkedin/callback` and registered correctly in your LinkedIn developer application settings.
• gotcha Client ID and Client Secret should never be hardcoded or exposed directly in client-side code. Always retrieve them from secure environment variables or a secrets management service to prevent security vulnerabilities.
  Fix: Use environment variables (e.g., `process.env.LINKEDIN_CLIENT_ID` and `process.env.LINKEDIN_CLIENT_SECRET`) to securely provide these credentials to the `LinkedinStrategy` constructor.
• gotcha The `secrets` array for `createCookieSessionStorage` must contain robust, unique, and long-lived secret strings. Using placeholder values like `THISSHOULDBESECRET_AND_NOT_SHARED` in production is a significant security vulnerability.
  Fix: Generate a strong, random, and unique secret string for production environments, ideally loaded from an environment variable (e.g., `process.env.SESSION_SECRET`) and ensure it's kept confidential.

Install

• npm install remix-auth-linkedin npm
• yarn add remix-auth-linkedin yarn
• pnpm add remix-auth-linkedin pnpm

Imports

• LinkedinStrategy
  wrong:

  const { LinkedinStrategy } = require("remix-auth-linkedin");

  correct:

  import { LinkedinStrategy } from "remix-auth-linkedin";

  The `LinkedinStrategy` class is a named export, typically used in modern Remix applications with ESM. Avoid CommonJS `require`.
• Authenticator
  wrong:

  import Authenticator from "remix-auth";

  correct:

  import { Authenticator } from "remix-auth";

  This is a named export from the core `remix-auth` library, not a default export.
• createCookieSessionStorage
  wrong:

  import { createCookieSessionStorage } from 'remix';

  correct:

  import { createCookieSessionStorage } from '@remix-run/node';

  While `remix` can be used as a shortcut, it's best practice to import from the specific runtime package like `@remix-run/node` or `@remix-run/cloudflare` for clarity and better tree-shaking.

Quickstart

This code snippet demonstrates the setup of `LinkedinStrategy` with `remix-auth`, including session storage configuration and the essential authentication callback, providing a foundation for user login workflows.

import { createCookieSessionStorage } from '@remix-run/node';
import { Authenticator } from 'remix-auth';
import { LinkedinStrategy } from "remix-auth-linkedin";

// Personalize this options for your usage.
const cookieOptions = {
	path: '/',
	httpOnly: true,
	sameSite: 'lax' as const,
	maxAge: 24 * 60 * 60 * 1000 * 30,
	secrets: [process.env.SESSION_SECRET ?? 'fallback_secret_for_dev_only'], // Use env variable for production
	secure: process.env.NODE_ENV !== 'development',
};

const sessionStorage = createCookieSessionStorage({
	cookie: cookieOptions,
});

export const authenticator = new Authenticator<string>(sessionStorage, {
	throwOnError: true,
});

const linkedinStrategy = new LinkedinStrategy(
   {
      clientID: process.env.LINKEDIN_CLIENT_ID ?? 'YOUR_CLIENT_ID_FROM_ENV',
      clientSecret: process.env.LINKEDIN_CLIENT_SECRET ?? 'YOUR_CLIENT_SECRET_FROM_ENV',
      callbackURL: process.env.LINKEDIN_CALLBACK_URL ?? 'https://example.com/auth/linkedin/callback',
   },
   async ({accessToken, refreshToken, extraParams, profile, context}) => {
      // In a real application, you would interact with your database or API here
      // For example, finding or creating a user based on the LinkedIn profile
      console.log('LinkedIn Profile:', profile.id, profile.displayName, profile.emails[0].value);
      console.log('Access Token:', accessToken);
      // Simulate user data storage
      return { id: profile.id, email: profile.emails[0].value, name: profile.displayName };
   }
);

authenticator.use(linkedinStrategy, 'linkedin');

// app/routes/login.tsx
// export default function Login() {
//    return (
//       <form action="/auth/linkedin" method="post">
//          <button>Login with Linkedin</button>
//       </form>
//    )
// }

// app/routes/auth/linkedin.tsx
// import { ActionFunction } from '@remix-run/node';
// import { authenticator } from '~/linkedin.server'; // Adjust path
//
// export let loader: ActionFunction = () => { throw new Response(null, { status: 404 }); }; // Loader is not strictly needed here
// export let action: ActionFunction = ({ request }) => {
//    return authenticator.authenticate('linkedin', request);
// };

// app/routes/auth/linkedin/callback.tsx
// import { LoaderFunction } from '@remix-run/node';
// import { authenticator } from '~/linkedin.server'; // Adjust path
//
// export let loader: LoaderFunction = ({ request }) => {
//    return authenticator.authenticate('linkedin', request, {
//       successRedirect: '/dashboard',
//       failureRedirect: '/login',
//    });
// };