feat: authenticate with github (#22)

Add `passport-github2` strategy

README.md

@@ -2,6 +2,28 @@
 
 A directory of Nation3 Citizens and their profiles
 
+## Environment Variables
+
+### GitHub
+
+How to create a new OAuth App:
+
+1. Go to https://github.com/organizations/nation3/settings/applications
+
+1. Click "New OAuth App"
+
+   - Application name: Nation3 Citizen Directory
+
+   - Homepage URL: https://citizens.nation3.org
+
+   - Authorization callback URL: https://citizens.nation3.org
+
+Add the environment variables to `.env.local`:
+
+```
+cp .env.local.sample .env.local
+```
+
 ## Build
 
 ```

package.json

@@ -18,6 +18,7 @@
     "eslint": "8.38.0",
     "eslint-config-next": "13.3.0",
     "next": "13.3.0",
+    "next-connect": "^1.0.0",
     "papaparse": "^5.4.1",
     "passport": "^0.6.0",
     "passport-github2": "^0.1.12",
@@ -32,6 +33,7 @@
     "wagmi": "^1.4.2"
   },
   "devDependencies": {
-    "@types/papaparse": "^5.3.7"
+    "@types/papaparse": "^5.3.7",
+    "dotenv": "^16.3.1"
   }
 }

src/components/ProfileDetailsGitHub.tsx

@@ -4,14 +4,14 @@ import GitHub from "../../abis/GitHub.json"
 import { useIsMounted } from "../../hooks/useIsMounted"
 import Link from "next/link"
 
-export default function ProfileDetailsGitHub({ address }: any) {
+export default function ProfileDetailsGitHub({ citizen }: any) {
     console.info('ProfileDetailsGitHub')
 
     const { data, isError, isLoading } = useContractRead({
         address: '0xb989c0c17a3bce679d7586d9e55b6eab11c18687',
         abi: GitHub.abi,
         functionName: 'usernames',
-        args: [ address ]
+        args: [ citizen.ownerAddress ]
     })
     console.info('data:', data)
     console.info('isError:', isError)
@@ -29,7 +29,8 @@ export default function ProfileDetailsGitHub({ address }: any) {
             return (
                 <>
                     <code>Not linked</code>
-                    <Link href={`https://etherscan.io/address/0xb989c0c17a3bce679d7586d9e55b6eab11c18687#writeContract#F1`} target="_blank" className="border rounded-full px-2 ml-8 font-bold text-transparent bg-clip-text bg-gradient-to-br from-sky-400 to-green-400">
+                    {/* <Link href={`https://etherscan.io/address/0xb989c0c17a3bce679d7586d9e55b6eab11c18687#writeContract#F1`} target="_blank" className="border rounded-full px-2 ml-8 font-bold text-transparent bg-clip-text bg-gradient-to-br from-sky-400 to-green-400"> */}
+                    <Link href={`/${citizen.passportId}/auth/github`} className="border rounded-full px-2 ml-8 font-bold text-transparent bg-clip-text bg-gradient-to-br from-sky-400 to-green-400">
                         Link my GitHub account 🔗
                     </Link>
                 </>

src/pages/[passportId].tsx

@@ -88,7 +88,7 @@ export default function ProfilePage({ citizen, nationCred, veNation, dework, sou
                     </li>
                     <li className='mt-2'>
                       <span className='text-gray-400 '>GitHub account</span><br />
-                      <ProfileDetailsGitHub address={citizen.ownerAddress} />
+                      <ProfileDetailsGitHub citizen={citizen} />
                     </li>
                     <li className='mt-2'>
                       <span className='text-gray-400 '>Discord account</span><br />

src/pages/[passportId]/auth/github.tsx

@@ -0,0 +1,42 @@
+import Menu from "@/components/Menu"
+import { NextPage } from "next"
+import Link from "next/link"
+import { useRouter } from "next/router"
+
+const GitHubPage: NextPage = () => {
+  console.info('GitHubPage')
+
+  const router = useRouter()
+
+  return (
+    <>
+      <main className='flex-column lg:flex'>
+        <Menu />
+
+        <div className='w-full lg:w-3/4 p-8'>
+          <div className="flex">
+            <div className="font-bold">
+                <h2 className="text-2xl text-gray-400">
+                    Citizen #{router.query.passportId}
+                </h2>
+            </div>
+          </div>
+
+          <div className='mt-8'>
+            <h2 className="text-2xl">Link My GitHub Account</h2>
+            <div className="mt-4">
+                <Link
+                    href={`/api/${router.query.passportId}/auth/github`} 
+                    className="bg-sky-400 hover:bg-sky-500 p-2 px-4 rounded-lg text-white"
+                >
+                    Authenticate With GitHub
+                </Link>
+            </div>
+          </div>
+        </div>
+      </main>
+    </>
+  )
+}
+
+export default GitHubPage

src/pages/api/[passportId]/auth/github.ts

@@ -0,0 +1,44 @@
+import nc, { createEdgeRouter } from "next-connect"
+import { NextFetchEvent, NextRequest } from "next/server"
+const passport = require('passport')
+const GitHubStrategy = require('passport-github2').Strategy
+
+const callbackBaseUrl = process.env['GITHUB_CALLBACK_BASE_URL']
+console.info('callbackBaseUrl:', callbackBaseUrl)
+
+const callbackUrl = `${callbackBaseUrl}/api/233/auth/github-callback` // TODO: get [passportId]
+console.info('callbackUrl:', callbackUrl)
+
+const router = createEdgeRouter<NextRequest, NextFetchEvent>()
+router.use(async (request, event, next) => {
+    // logging request example
+    console.log(`${request.method} ${request.url}`);
+    return next();
+});
+
+// Configure strategy
+passport.use(new GitHubStrategy(
+  {
+    clientID: process.env['GITHUB_CLIENT_ID'],
+    clientSecret: process.env['GITHUB_CLIENT_SECRET'],
+    callbackURL: callbackUrl
+  },
+  function(accessToken: any, refreshToken: any, profile: any, done: any) {
+    console.info('accessToken:', accessToken)
+    console.info('refreshToken:', refreshToken)
+    console.info('profile:', profile)
+    console.info('profile.username:', profile.username)
+    console.info('done:', done)
+    return done(null, profile)
+  }
+))
+
+// // Redirect to GitHub authentication
+// const handler = nc()
+//   .get(
+//     passport.authenticate('github', {
+//       scope: ['user:email']
+//     })
+//   )
+
+// export default handler