Use Oauth to verify user owns their github account

next.config.js

@@ -5,4 +5,9 @@ module.exports = {
   images: {
     domains: ['cdn.discordapp.com'],
   },
+  env: {
+    GITHUB_CLIENT_ID: process.env.GITHUB_CLIENT_ID,
+    GITHUB_CLIENT_SECRET: process.env.GITHUB_CLIENT_SECRET,
+    NEXTAUTH_URL: process.env.NEXTAUTH_URL,
+  },
 };

package.json

@@ -11,6 +11,7 @@
     "@walletconnect/web3-provider": "^1.7.0",
     "discord.js": "^13.5.1",
     "ethers": "^5.5.3",
+    "form-data": "^4.0.0",
     "next": "12.0.7",
     "next-auth": "^4.0.6",
     "react": "17.0.2",

pages/api/auth/[...nextauth].js

@@ -1,5 +1,4 @@
 import NextAuth from 'next-auth';
-import GithubProvider from 'next-auth/providers/github';
 import DiscordProvider from 'next-auth/providers/discord';
 
 export default NextAuth({
@@ -9,7 +8,7 @@ export default NextAuth({
       clientId: process.env.DISCORD_CLIENT_ID,
       clientSecret: process.env.DISCORD_CLIENT_SECRET,
       scope: ['identify guilds'],
-    }),
+    })
   ],
 
   callbacks: {

pages/api/github.js

@@ -0,0 +1,43 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+const FormData = require('form-data');
+
+export default async function handler(req, res) {
+  const { code } = await JSON.parse(req.body);
+  console.log('code: ', code);
+
+  const data = new FormData();
+
+  data.append('client_id', process.env.GITHUB_CLIENT_ID);
+  data.append('client_secret', process.env.GITHUB_CLIENT_SECRET);
+  data.append('code', code);
+  console.log('b');
+  data.append('redirect_uri', process.env.NEXTAUTH_URL + '/api/github');
+
+  console.log('data: ', data);
+
+  // Request to exchange code for an access token
+  fetch(`https://github.com/login/oauth/access_token`, {
+    method: 'POST',
+    body: data,
+  })
+    .then((response) => response.text())
+    .then((paramsString) => {
+      let params = new URLSearchParams(paramsString);
+      const access_token = params.get('access_token');
+      console.log('access_token: ', access_token);
+
+      // Request to return data of a user that has been authenticated
+      return fetch(`https://api.github.com/user`, {
+        headers: {
+          Authorization: `token ${access_token}`,
+        },
+      });
+    })
+    .then((response) => response.json())
+    .then((response) => {
+      return res.status(200).json(response);
+    })
+    .catch((error) => {
+      return res.status(400).json(error);
+    });
+}

pages/index.js

@@ -13,10 +13,11 @@ import { writeAddressbook } from '/helpers/github';
 
 export default function Home() {
   const [addBookEntry, setAddBookEntry] = useState({});
+  const [isLoading, setIsLoading] = useState(false);
+  const [githubUsername, setGithubUsername] = useState('');
 
   const { connect, address } = useWeb3Modal();
   const { data: session, status } = useSession({ required: true });
-  console.log('session: ', session);
   const { addressbook } = useAddressbook(session.user.id);
 
   const onSubmit = async (ethAddress, githubUsername) => {
@@ -29,12 +30,39 @@ export default function Home() {
     ? '✅ BrightID is Connected'
     : '❌ Go back to Discord and connect BrightID';
 
-  // useEffect(() => {
-  //   async function fetchData() {
-
-  //   }
-  //   fetchData();
-  // }, [session]);
+  useEffect(() => {
+    const fetchGithub = async () => {
+      const url = window.location.href;
+      const hasCode = url.includes('?code=');
+
+      // If Github API returns the code parameter
+      if (hasCode) {
+        setIsLoading(true);
+        const newUrl = url.split('?code=');
+
+        const requestData = {
+          code: newUrl[1],
+        };
+
+        const proxy_url = process.env.NEXTAUTH_URL + '/api/github';
+
+        // Use code parameter and other parameters to make POST request to proxy_server
+        try {
+          const response = await fetch(proxy_url, {
+            method: 'POST',
+            body: JSON.stringify(requestData),
+          });
+          const { login } = await response.json();
+
+          setGithubUsername(login);
+          setIsLoading(false);
+        } catch (error) {
+          setIsLoading(false);
+        }
+      }
+    };
+    fetchGithub();
+  }, []);
 
   useEffect(() => {
     addressbook.find((addBookEntry) => {
@@ -57,7 +85,7 @@ export default function Home() {
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
-      <main className={`${styles.main} bg-white`}>
+      <main className={`${styles.main} bg-white`} >
         <div className="absolute top-10 flex row justify-around items-center w-60	">
           <Image
             className=" rounded-full"
@@ -96,14 +124,22 @@ export default function Home() {
                   `New Address: ${formatAddress(address)}`
                 ) : (
                   <button
-                    className="w-60 text-white p-2 text-xl font-bold bg-cornflowerblue rounded"
+                    className="h-12 px-3.5 text-white p-2 text-xl  bg-cornflowerblue rounded shadow"
                     onClick={connect}
                   >
                     Link Ethereum to SHE
                   </button>
                 )}
                 <div className="w-60 p-2">
-                  <GithubLoginButton text="Link Github to SHE" />
+                  {githubUsername ? (
+                    <GithubLoginButton className="m-0" text={githubUsername} />
+                  ) : (
+                    <a
+                      href={`https://github.com/login/oauth/authorize?scope=user&client_id=${process.env.GITHUB_CLIENT_ID}`}
+                    >
+                      <GithubLoginButton className="m-0" text="Link Github to SHE" />
+                    </a>
+                  )}
                 </div>
               </div>
             </div>