Upgrade to Remix Auth v4 for React Router 7

[ttpss930141011]

Upgrade to Remix Auth v4 for React Router 7

This PR upgrades the LinkedIn strategy to support Remix Auth v4 and React Router 7, bringing major improvements and modern architecture.

Key Changes

• Rewrote strategy implementation using Arctic OAuth library
• Updated types to match Remix Auth v4 API
• Migrated to Bun for testing
• Improved documentation with detailed examples
• Added new authors section

API Changes

• Constructor option names updated:
  • clientID → clientId
  • clientSecret (unchanged)
  • callbackURL → redirectURI
  • scope → scopes (array or string)
• Verify callback now receives { profile, tokens, request } object
• Tokens accessed via methods: tokens.accessToken() and tokens.refreshToken()
• Session management must be handled manually in callback routes

Migration Example (v2.x to v3.x)

new LinkedInStrategy(
  {
-    clientID: "YOUR_CLIENT_ID",
+    clientId: "YOUR_CLIENT_ID",
-    callbackURL: "https://example.com/callback",
+    redirectURI: "https://example.com/callback",
-    scope: "r_emailaddress r_liteprofile",
+    scopes: "r_emailaddress r_liteprofile",
  },
-  async ({ accessToken, refreshToken, profile }) => {
+  async ({ profile, tokens }) => {
    return {
      ...user,
-     accessToken,
+     accessToken: tokens.accessToken(),
-     refreshToken,
+     refreshToken: tokens.refreshToken ? tokens.refreshToken() : null,
    };
  }
)

Routes must now manually handle session management:

export async function loader({ request }) {
-  return authenticator.authenticate("linkedin", request, {
-    successRedirect: "/dashboard",
-    failureRedirect: "/login",
-  });
+  try {
+    const user = await authenticator.authenticate("linkedin", request);
+    const session = await sessionStorage.getSession(request.headers.get("cookie"));
+    session.set("user", user);
+    const headers = new Headers();
+    headers.append("Set-Cookie", await sessionStorage.commitSession(session));
+    return redirect("/dashboard", { headers });
+  } catch (error) {
+    return redirect("/login?error=auth_failed");
+  }
}

Version Compatibility

• v3.x → Remix Auth v4.x and React Router 7
• v2.x → Remix Auth v3.x
• v1.x → Remix Auth v1.x and v2.x

Issue

#6

[gielcobben]

Hello, I wanted to check on the status of this PR. Could you provide an update on when we might expect the merge to be completed? Looking forward to this.

[ttpss930141011]

Hello, I wanted to check on the status of this PR. Could you provide an update on when we might expect the merge to be completed? Looking forward to this.

During the time for waiting review, I've push this version to npm for my personal development work. Welcome to take it a try.

npm i remix-auth-linkedin-next

[gielcobben]

Thank you! It works like a charm.