NimaPrmi

First ADD Provider to the app

import "@/styles/globals.css";

import { SessionProvider } from "next-auth/react"; // @here




import 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;