How to Fix LinkedIn Authentication in NextAuth.js: A Custom Provider Setup Guide

[Lomanu4]

A Quick Guide to Getting LinkedIn OAuth Working Correctly


LinkedIn authentication is a powerful feature to add to your Next.js application using NextAuth.js, but the default configuration can often lead to issues — especially when trying to fetch user details like email, name, and profile picture.

In this article, I’ll walk you through how I solved this issue by customizing the LinkedIn provider configuration in NextAuth.js.

? The Problem


Using the default LinkedInProvider setup from next-auth/providers/linkedin may not always return complete user information such as email or profile picture.

? Default Implementation


import LinkedInProvider from "next-auth/providers/linkedin";

providers: [
LinkedInProvider({
clientId: process.env.LINKEDIN_CLIENT_ID,
clientSecret: process.env.LINKEDIN_CLIENT_SECRET,
})
]

This basic setup often results in incomplete data being returned from LinkedIn.

The Fix


To overcome this, I had to dig into LinkedIn’s OAuth docs and customize the LinkedInProvider to manually specify scopes, endpoints, and userinfo configurations.

? Working LinkedInProvider Configuration


LinkedInProvider({
clientId: process.env.LINKEDIN_CLIENT_ID ?? "",
clientSecret: process.env.LINKEDIN_CLIENT_SECRET ?? "",
client: { token_endpoint_auth_method: "client_secret_post" },
scope: "r_liteprofile r_emailaddress",
issuer: "

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

",
userinfo: {
url: "

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

",
},
token: {
url: "

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

",
},
wellKnown: "

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

",
authorization: {
url: "

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

",
params: {
scope: "profile email openid",
prompt: "consent",
access_type: "offline",
response_type: "code",
},
},
jwks_endpoint: "

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

",
async profile(profile) {
return {
id: profile.sub,
name: profile.name,
firstname: profile.given_name,
lastname: profile.family_name,
email: profile.email,
image: profile.picture,
};
},
}),

This configuration ensures you:

• Request proper scopes like r_emailaddress
• Use the correct LinkedIn OAuth endpoints
• Get a complete profile object including email and picture

? Bonus Tip: Twitter Provider Email Issue


If you're using Twitter authentication as well, make sure you enable email access in your Twitter app settings. Without this, you won’t get the user’s email address.


TwitterProvider({
clientId: process.env.TWITTER_CLIENT_ID,
clientSecret: process.env.TWITTER_CLIENT_SECRET,
})

Tip: Enable "Request email address from users" in Twitter Developer Portal.

? TL;DR

• Default LinkedInProvider doesn’t return complete user info.
• Customize it with the right OAuth config to fix it.
• Twitter requires email permission to return user emails.

Thanks for reading! ?

If you found this helpful, consider following me on

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

and checking out my other projects like

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

.

Let me know if you’ve faced similar issues or need help with OAuth in your apps! ?

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.