NimaPrmi

First ADD Provider to the app

import "@/styles/globals.css";import { SessionProvider } from "next-auth/react"; // @hereimport type { AppProps } from "next/app";export default function App({ Component, pageProps }: AppProps) {  return (    <SessionProvider session={pageProps.session}> // @here      <Component {...pageProps} />    </SessionProvider> // @here  );}

Then Configure the configuration file in […nextAuth].ts or .js

import NextAuth from "next-auth";import GithubProvider from "next-auth/providers/github";export default NextAuth({  providers: [    GithubProvider({      clientId: "Ov23liB3gz5neQWIP7Si",      clientSecret: "47a79a36d57f483909e22ce5b8194d99281db6c0",    }),  ],  // Add any additional configuration options here});

Also generate a secrect key from github

Then call the signIn, signOut and useSession. you can can get user data from useSession

import { signIn, signOut, useSession } from "next-auth/react";import React, { useEffect } from "react";const GithubLoginPage = () => {  const { data } = useSession();  const signInhandler = () => {    signIn("github");  };  const signOutHandler = () => {    signOut();  };  useEffect(() => {    console.log(data);  }, [data]);  return (    <div>      <h1>Next-Auth Github</h1>      <button onClick={signInhandler}>Login using github</button>      <button onClick={signOutHandler}>Logout</button>    </div>  );};export default GithubLoginPage;