Login component for next-auth

Login.js

// components/login.js

import React from 'react'
import { signIn } from "next-auth/react"

export default function SignIn({ providers }) {
    return (
        <>
            <div className="container mb-5">
                <div className="col-md-6 mx-auto text-center">
                    <div className="header-title">
                        <h1 className="wv-heading--title">
                           Signup and Signin with Social Media
                        </h1>
                    </div>
                </div>
                <div className="row">
                    <div className="col-md-4 mx-auto">
                        <div className="myform form ">
                          <LoginButtons providers={providers} />
                        </div>
                    </div>
                </div>
            </div>
        </>
    )

}


function LoginButtons({ providers }) {
    return Object.values(providers).map((provider) => <button key={provider.name} type="button" className="btn btn-block send-button" onClick={() => signIn(provider.id)} >
        Connect with  {provider.name}
    </button>
    )
}