Integrating social logins like Google and Facebook into your Next.js project can significantly enhance user experience by simplifying the authentication process. This guide provides step-by-step instructions to implement social login functionalities effectively.

Prerequisites

  • Basic knowledge of Next.js and React
  • Node.js and npm installed
  • Google and Facebook developer accounts
  • OAuth 2.0 credentials from Google and Facebook

Setting Up OAuth Credentials

Register your application with Google and Facebook to obtain OAuth credentials. For Google:

  • Go to the Google Cloud Console.
  • Create a new project or select an existing one.
  • Navigate to "APIs & Services" > "Credentials".
  • Click "Create Credentials" > "OAuth client ID".
  • Select "Web application" and specify authorized redirect URIs.

For Facebook:

  • Visit Facebook for Developers.
  • Create a new app or select an existing one.
  • Navigate to "Settings" > "Basic".
  • Configure "Valid OAuth Redirect URIs".

Installing Necessary Packages

Use npm or yarn to install the required packages for social login integration.

  • next-auth: Simplifies authentication in Next.js.
  • next-auth/providers: Includes providers for Google and Facebook.

Run the following command:

npm install next-auth @next-auth/providers

Configuring NextAuth.js

Create a file named [...nextauth].js inside pages/api/auth.

Configure providers with your OAuth credentials:

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import FacebookProvider from "next-auth/providers/facebook";

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
    FacebookProvider({
      clientId: process.env.FACEBOOK_CLIENT_ID,
      clientSecret: process.env.FACEBOOK_CLIENT_SECRET,
    }),
  ],
});

Managing Environment Variables

Store your OAuth credentials securely in a .env.local file:

GOOGLE_CLIENT_ID=your-google-client-id

GOOGLE_CLIENT_SECRET=your-google-client-secret

FACEBOOK_CLIENT_ID=your-facebook-app-id

FACEBOOK_CLIENT_SECRET=your-facebook-app-secret

Adding Authentication Buttons

In your React components, add login buttons using signIn from next-auth/react.

import { signIn, signOut, useSession } from "next-auth/react";

export default function AuthButtons() {
  const { data: session } = useSession();

  if (session) {
    return (
      

        
Welcome, {session.user.name}

        
      

    );
  }
  return (
    

      
      
    

  );
}

Handling Authentication State

Use useSession hook to manage user state and display user information accordingly.

Testing Your Implementation

Run your Next.js application:

npm run dev

Navigate to your login page and test signing in with Google and Facebook. Ensure OAuth redirects are correctly configured and credentials are valid.

Conclusion

Integrating social logins in Next.js enhances user experience and simplifies registration. Using next-auth makes the process straightforward, handling most complexities internally. Remember to keep your OAuth credentials secure and test thoroughly across different devices and browsers.