replace twitter auth provider for github (vercel#33)

* replace twitter auth provider for github * removed producthunt badge * stashed some changes * added back twitter oauth to account for previous users * added comments * added some more comments, accounted for both gh and twitter links in blog <a> tag * add gh oauth docs link to env file * removed twitter auth entirely just realized that it might make more sense to keep things simple and only have GH auth. Will keep the logic for having different links on [slug].js pages but for now let's get rid of the twitter next-auth provider and sign in button Co-authored-by: Steven Tey <[email protected]>
axshaykp · Jan 26, 2022 · b330256 · b330256
1 parent d8ffd29
commit b330256
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 88 deletions.
diff --git a/.env.example b/.env.example
@@ -9,10 +9,9 @@ NEXTAUTH_URL=http://app.localhost:3000
 DATABASE_URL="mysql://[email protected]:3309/platforms"
 SHADOW_DATABASE_URL="mysql://[email protected]:3310/platforms"
 
-# Twitter OAuth
-TWITTER_ID=
-TWITTER_SECRET=
-TWITTER_AUTH_TOKEN=
+# Github OAuth https://docs.github.com/en/developers/apps/building-oauth-apps/creating-an-oauth-app
+GITHUB_CLIENT_ID=
+GITHUB_CLIENT_SECRET=
 
 # Secret key (generate one here: https://generate-secret.vercel.app/32)
 SECRET=

diff --git a/components/sites/Layout.js b/components/sites/Layout.js
@@ -61,68 +61,22 @@ export default function Layout({ meta, children, subdomain }) {
           scrolled ? "drop-shadow-md" : ""
         }  top-0 left-0 right-0 h-16 bg-white z-30 transition-all ease duration-150 flex`}
       >
-        {" "}
         <div className="flex justify-center items-center space-x-5 h-full max-w-screen-xl mx-auto px-10 sm:px-20">
-          {subdomain == "demo" ? (
-            <>
-              <Link href="/">
-                <a className="flex justify-center items-center">
-                  <div className="h-8 w-8 inline-block rounded-full overflow-hidden align-middle">
-                    <Image
-                      src={meta?.logo}
-                      width={40}
-                      height={40}
-                      alt={meta?.title}
-                    />
-                  </div>
-                  <span className="inline-block ml-3 font-medium truncate">
-                    {meta?.title}
-                  </span>
-                </a>
-              </Link>
-              <a
-                href="https://www.producthunt.com/posts/platforms-starter-kit?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-platforms-starter-kit"
-                target="_blank"
-                className="mt-1 sm:block hidden flex-shrink-0"
-              >
+          <Link href="/">
+            <a className="flex justify-center items-center">
+              <div className="h-8 w-8 inline-block rounded-full overflow-hidden align-middle">
                 <Image
-                  src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=327608&theme=light"
-                  alt="Platforms Starter Kit - Build the fastest multi-tenant apps with custom domains | Product Hunt"
-                  width={250}
-                  height={44}
+                  src={meta?.logo}
+                  width={40}
+                  height={40}
+                  alt={meta?.title}
                 />
-              </a>
-              <a
-                href="https://www.producthunt.com/posts/platforms-starter-kit?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-platforms-starter-kit"
-                target="_blank"
-                className="mt-2 sm:hidden flex-shrink-0"
-              >
-                <Image
-                  src="/producthunt.png"
-                  alt="Platforms Starter Kit - Build the fastest multi-tenant apps with custom domains | Product Hunt"
-                  width={30}
-                  height={30}
-                  className="sm:hidden"
-                />
-              </a>
-            </>
-          ) : (
-            <Link href="/">
-              <a className="flex justify-center items-center">
-                <div className="h-8 w-8 inline-block rounded-full overflow-hidden align-middle">
-                  <Image
-                    src={meta?.logo}
-                    width={40}
-                    height={40}
-                    alt={meta?.title}
-                  />
-                </div>
-                <span className="inline-block ml-3 font-medium truncate">
-                  {meta?.title}
-                </span>
-              </a>
-            </Link>
-          )}
+              </div>
+              <span className="inline-block ml-3 font-medium truncate">
+                {meta?.title}
+              </span>
+            </a>
+          </Link>
         </div>
       </div>
 

diff --git a/next.config.js b/next.config.js
@@ -5,6 +5,7 @@ module.exports = {
       "abs.twimg.com",
       "pbs.twimg.com",
       "api.producthunt.com",
+      "avatars.githubusercontent.com",
     ],
   },
 };
diff --git a/pages/_sites/[site]/[slug].js b/pages/_sites/[site]/[slug].js
@@ -54,7 +54,12 @@ export default function Post(props) {
         </div>
         <a
           target="_blank"
-          href={`https://twitter.com/${data.site.user.username}`}
+          // if you are using Github OAuth, you can get rid of the Twitter option
+          href={
+            data.site.user.username
+              ? `https://twitter.com/${data.site.user.username}`
+              : `https://github.com/${data.site.user.gh_username}`
+          }
         >
           <div className="my-8">
             <div className="relative w-8 h-8 md:w-12 md:h-12 rounded-full overflow-hidden inline-block align-middle">

diff --git a/pages/api/auth/[...nextauth].js b/pages/api/auth/[...nextauth].js
@@ -1,23 +1,20 @@
 import NextAuth from "next-auth";
-import TwitterProvider from "next-auth/providers/twitter";
+import GitHubProvider from "next-auth/providers/github";
 import { PrismaAdapter } from "@next-auth/prisma-adapter";
 import prisma from "@/lib/prisma";
 
 export const authOptions = {
   providers: [
-    TwitterProvider({
-      clientId: process.env.TWITTER_ID,
-      clientSecret: process.env.TWITTER_SECRET,
+    GitHubProvider({
+      clientId: process.env.GITHUB_ID,
+      clientSecret: process.env.GITHUB_SECRET,
       profile(profile) {
         return {
-          id: profile.id_str,
-          name: profile.name,
-          username: profile.screen_name,
-          email: profile.email && profile.email != "" ? profile.email : null,
-          image: profile.profile_image_url_https.replace(
-            /_normal\.(jpg|png|gif)$/,
-            ".$1"
-          ),
+          id: profile.id.toString(),
+          name: profile.name || profile.login,
+          gh_username: profile.login,
+          email: profile.email,
+          image: profile.avatar_url,
         };
       },
     }),
@@ -29,11 +26,14 @@ export const authOptions = {
   },
   adapter: PrismaAdapter(prisma),
   callbacks: {
-    async session({ session, user }) {
-      session.user.id = user.id;
-      session.user.username = user.username;
-      return session;
-    },
+    session: ({ session, user }) => ({
+      ...session,
+      user: {
+        ...session.user,
+        id: user.id,
+        username: user.username,
+      },
+    }),
   },
 };
 

diff --git a/pages/app/login.js b/pages/app/login.js
@@ -60,28 +60,31 @@ export default function Login() {
         </p>
       </div>
 
-      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
+      <div className="mt-8 mx-auto sm:w-full w-11/12 sm:max-w-md">
         <div className="bg-white py-8 px-4 shadow-md sm:rounded-lg sm:px-10">
           <button
             disabled={loading}
             onClick={() => {
               setLoading(true);
-              signIn("twitter");
+              signIn("github");
             }}
             className={`${
-              loading ? "cursor-not-allowed bg-[#1da0f285]" : "bg-[#1da1f2]"
-            } group flex justify-center items-center space-x-5 w-full sm:px-4 h-16 rounded-md focus:outline-none`}
+              loading ? "cursor-not-allowed bg-gray-600" : "bg-black"
+            } group flex justify-center items-center space-x-5 w-full sm:px-4 h-16 my-2 rounded-md focus:outline-none`}
           >
             {loading ? (
               <LoadingDots color="#fff" />
             ) : (
               <svg
-                className="w-6 h-6 group-hover:animate-wiggle"
+                className="w-8 h-8 group-hover:animate-wiggle"
                 aria-hidden="true"
                 fill="white"
-                viewBox="0 0 20 20"
+                viewBox="0 0 24 24"
               >
-                <path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84" />
+                <path
+                  path
+                  d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
+                />
               </svg>
             )}
           </button>

diff --git a/prisma/migrations/20220126001309_init/migration.sql b/prisma/migrations/20220126001309_init/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE `User` ADD COLUMN `gh_username` VARCHAR(191) NULL;
diff --git a/prisma/migrations/20220126002115_init/migration.sql b/prisma/migrations/20220126002115_init/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE `Account` ADD COLUMN `refresh_token_expires_in` INTEGER NULL;
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
@@ -17,7 +17,9 @@ generator client {
 model User {
   id            String        @id @default(cuid())
   name          String?
+  // if you are using Github OAuth, you can get rid of the username attribute (that is for Twitter OAuth)
   username      String?
+  gh_username   String?
   email         String?       @unique
   emailVerified DateTime?
   image         String?
@@ -35,6 +37,7 @@ model Account {
   provider           String
   providerAccountId  String
   refresh_token      String?
+  refresh_token_expires_in Int?
   access_token       String?
   expires_at         Int?
   token_type         String?
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		-- AlterTable
		ALTER TABLE `User` ADD COLUMN `gh_username` VARCHAR(191) NULL;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		-- AlterTable
		ALTER TABLE `Account` ADD COLUMN `refresh_token_expires_in` INTEGER NULL;