The code for my sign in are:

[...nextauth.js]

import NextAuth from "next-auth"
import GoogleProvider from "next-auth/providers/google"

export default NextAuth({
  // Configure one or more authentication providers
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
      authorizationUrl: 'https://accounts.google.com/o/oauth2/v2/auth?prompt=consent&access_type=offline&response_type=code',
    }),
    // ...add more providers here
  ],
  pages:{
    signIn: "/auth/signin"
  }
})

signin.js

import React from "react";
import { getProviders, signIn } from "next-auth/react";
import Header from "../../components/Header";
const signin = ({ providers }) => {
  console.log(Object.values(providers));
  return (
    <React.Fragment>
      <Header />
      <div className="mt-40">
        {Object.values(providers).map((provider) => (
          <div key={provider.name} className="flex flex-col items-center">
            <img src="https://cdn.vox-cdn.com/thumbor/Pkmq1nm3skO0-j693JTMd7RL0Zk=/0x0:2012x1341/1200x800/filters:focal(0x0:2012x1341)/cdn.vox-cdn.com/uploads/chorus_image/image/47070706/google2.0.0.jpg" />
            <button onClick={() => signIn(provider.id, { callbackUrl: "/" })}> Sign in with {provider.name}</button>
          </div>
        ))}
      </div>
    </React.Fragment>
  );
};

export async function getServerSideProps() {
  const providers = await getProviders();
  return {
    props: {
      providers
    },
  };
}

export default signin;

And my credentials in google cloud is:

redirect uri http://localhost:3000/api/auth/callback/google javascript origin uri http://localhost:3000

Still I am getting back my home screen and

http://localhost:3000/auth/signin?callbackUrl=http%3A%2F%2Flocalhost%3A3000%2F&error=OAuthSignin

in my url of redirection on clicking signin button. Can someone help me?