NextAuth Social Login Setup Guide

In this guide, we'll walk you through the process of setting up social logins for GitHub, Google, Facebook, LinkedIn, and Apple using NextAuth (opens in a new tab) in your project.

• GitHub
• Google
• Facebook
• LinkedIn
• Apple

GitHub

1. Create a new GitHub OAuth App:

   • Go to GitHub Developer Settings (opens in a new tab).
   • Create a new OAuth App.
   • Set the "Homepage URL" and "Authorization callback URL" to your application's URL. Learn More (opens in a new tab)
   • Take note of the "Client ID" and "Client Secret".

2. Configure NextAuth for GitHub:

• Add the GitHub credentials to your .env file:

  GITHUB_ID=your-client-id
  GITHUB_SECRET=your-client-secret

• Integrate GitHubProvider in your NextAuth configuration:

  GithubProvider({
    clientId: process.env.GITHUB_ID as string,
    clientSecret: process.env.GITHUB_SECRET as string,
  })

Google

1. Create a new Google OAuth Project:

   • Go to Google Cloud Console (opens in a new tab).
   • Create a new project.
   • Enable the "Google+ API" for your project.
   • Create OAuth 2.0 credentials.
   • Set the authorized redirect URI to your application's URL. Learn More (opens in a new tab)
   • Note the "Client ID" and "Client Secret".

2. Configure NextAuth for Google:

• Add the Google credentials to your .env file:

  GOOGLE_ID=your-client-id
  GOOGLE_SECRET=your-client-secret

• Integrate GoogleProvider in your NextAuth configuration:

GoogleProvider({
  clientId: process.env.GOOGLE_ID ?? '',
  clientSecret: process.env.GOOGLE_SECRET ?? '',
});

Facebook

1. Create a new Facebook App:

   • Go to Facebook Developers (opens in a new tab).
   • Create a new app.
   • Configure the OAuth settings, including the redirect URI. Learn More (opens in a new tab)
   • Note the "App ID" and "App Secret".

2. Configure NextAuth for Facebook:

• Add the Facebook credentials to your .env file:

  FACEBOOK_CLIENT_ID=your-client-id
  FACEBOOK_CLIENT_SECRET=your-client-secret

• Integrate FacebookProvider in your NextAuth configuration:

  FacebookProvider({
    clientId: process.env.FACEBOOK_CLIENT_ID as string,
    clientSecret: process.env.FACEBOOK_CLIENT_SECRET as string,
  })

LinkedIn

1. Create a new LinkedIn App:

   • Go to LinkedIn Developer Console (opens in a new tab).
   • Create a new app.
   • Set the "Authorized Redirect URLs" to your application's URL. Learn More (opens in a new tab)
   • Note the "Client ID" and "Client Secret".

2. Configure NextAuth for LinkedIn:

• Add the LinkedIn credentials to your .env file:

  LINKEDIN_CLIENT_ID=your-client-id
  LINKEDIN_CLIENT_SECRET=your-client-secret

• Integrate LinkedInProvider in your NextAuth configuration:

  LinkedInProvider({
    clientId: process.env.LINKEDIN_CLIENT_ID as string,
    clientSecret: process.env.LINKEDIN_CLIENT_SECRET as string,
    authorization: {
      params: {
        scope: 'openid profile email',
      },
    },
  })

Apple

1. Create a new Apple Developer Account:

   • Go to Apple Developer (opens in a new tab).
   • Create a new Apple ID if you don't have one.
   • Create an App ID and configure Sign in with Apple.
   • Generate the "Client ID" and "Client Secret". Learn More (opens in a new tab)

2. Configure NextAuth for Apple:

• Add the Apple credentials to your .env file:

  APPLE_ID=your-client-id
  APPLE_SECRET=your-client-secret

• Integrate AppleProvider in your NextAuth configuration:

  AppleProvider({
    clientId: process.env.APPLE_ID as string,
    clientSecret: process.env.APPLE_SECRET as string,
  })

Now you've successfully set up social logins for GitHub, Google, Facebook, LinkedIn, and Apple in your NextAuth project. Test each login provider to ensure everything is working as expected.