Search code examples
next.jsnext-auth

Facebook login with NextJS next-auth

I'm trying to connect my app with facebook login. currently i'm using the developer environment under meta developers account.

I have a login component which looks like below -

import Image from "next/image"
import { signIn } from "next-auth/react"

function Login() {
  return (
    <div className="grid place-items-center">
      <Image
      src="https://upload.wikimedia.org/wikipedia/commons/4/44/Facebook_Logo.png?20170210095314" 
      width={300} 
      height={300} 
      style={{objectFit:"contain"}} 
      alt="logo"
       />
       <h1 
       className="p-5 m-5 bg-blue-500 rounded-full text-white text-center cursor-pointer" 
       onClick={signIn}>Login with Facebook</h1>
    </div>
  )
}

export default Login

and here is my code from [...nextauth.js]

import NextAuth from "next-auth"
import FacebookProvider from "next-auth/providers/facebook";
export const authOptions = {
  
  providers: [
      FacebookProvider({
      clientId: process.env.FACEBOOK_CLIENT_ID,
      clientSecret: process.env.FACEBOOK_CLIENT_SECRET,
    }),
    
  ],
}
export default NextAuth(authOptions)

When i click on login with facebook button it throws error

enter image description here Any help .....

Solution

  • If anyone encountered the same problem below solution works for me.

    I made a silly mistake. The Problem was with NEXT_AUTH_URL.

    The url was pointing to https://localhost:3000 which is creating the issue.

    I have updated url to http://localhost:3000.

    And everything working fine.