Merge pull request #368 from aulianza/feat/add-login-with-github

feat: add login with github
aulianza · Apr 26, 2024 · 3e6c2e0 · 3e6c2e0
2 parents f0dd6a5 + 084c8ce
commit 3e6c2e0
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 13 deletions.
diff --git a/.env.example b/.env.example
@@ -42,4 +42,6 @@ NEXT_PUBLIC_FIREBASE_CHAT_DB=
 # Next-Auth SSO
 NEXTAUTH_URL=http://localhost:3000
 GOOGLE_CLIENT_ID=
-GOOGLE_CLIENT_SECRET=
+GOOGLE_CLIENT_SECRET=
+GITHUB_ID=
+GITHUB_SECRET=
diff --git a/src/modules/chat/components/Chat.tsx b/src/modules/chat/components/Chat.tsx
@@ -68,7 +68,7 @@ const Chat = ({ isWidget = false }: { isWidget?: boolean }) => {
       {session ? (
         <ChatInput onSendMessage={handleSendMessage} isWidget={isWidget} />
       ) : (
-        <ChatAuth />
+        <ChatAuth isWidget={isWidget} />
       )}
     </>
   );

diff --git a/src/modules/chat/components/ChatAuth.tsx b/src/modules/chat/components/ChatAuth.tsx
@@ -1,21 +1,52 @@
+import clsx from 'clsx';
 import { signIn } from 'next-auth/react';
+import { BsGithub as GithubIcon } from 'react-icons/bs';
 import { FcGoogle as GoogleIcon } from 'react-icons/fc';
 
 import Button from '@/common/components/elements/Button';
 
-const ChatAuth = () => {
+const Providers = [
+  {
+    id: 'google',
+    icon: <GoogleIcon size={18} />,
+    bgColor: '!bg-white',
+    textColor: 'text-black',
+    label: 'Sign in with Google',
+  },
+  {
+    id: 'github',
+    icon: <GithubIcon size={18} />,
+    bgColor: '!bg-black',
+    textColor: 'text-white',
+    label: 'Sign in with Github',
+  },
+];
+
+const ChatAuth = ({ isWidget = false }: { isWidget?: boolean }) => {
   return (
-    <div className='flex flex-col border-t border-neutral-300 dark:border-neutral-900'>
-      <div className='mb-1 space-y-3 px-4 py-3 text-center text-neutral-700 dark:text-neutral-400'>
-        <p className='text-sm'>Please sign in to typing</p>
-        <Button
-          onClick={() => signIn('google')}
-          className='mb-2 mt-2 flex w-full items-center justify-center border !bg-white shadow-sm transition duration-300 hover:scale-[101%]'
-          data-umami-event='Sign In to Chat: Google'
+    <div className='flex flex-col border-t border-neutral-300 py-1 dark:border-neutral-900'>
+      <div className='mb-1 space-y-5 px-4 py-3 text-center text-neutral-700 dark:text-neutral-400'>
+        <p className='text-sm'>
+          Please sign in to start. Don't worry, your data is safe.
+        </p>
+        <div
+          className={clsx(
+            'flex flex-col items-center justify-center gap-4 lg:flex-row lg:gap-5',
+            isWidget && '!flex-col !gap-4',
+          )}
         >
-          <GoogleIcon size={18} />
-          <span className='text-black'>Sign in with Google</span>
-        </Button>
+          {Providers?.map((button) => (
+            <Button
+              key={button.id}
+              onClick={() => signIn(button.id)}
+              className={`flex w-full items-center justify-center border ${button.bgColor} py-2.5 shadow-sm transition duration-300 hover:scale-[101%] lg:w-fit ${isWidget && '!w-full'}`}
+              data-umami-event={`Sign In to Chat: ${button.label}`}
+            >
+              {button.icon}
+              <span className={button.textColor}>{button.label}</span>
+            </Button>
+          ))}
+        </div>
       </div>
     </div>
   );

diff --git a/src/pages/api/auth/[...nextauth].ts b/src/pages/api/auth/[...nextauth].ts
@@ -1,4 +1,5 @@
 import NextAuth from 'next-auth';
+import GitHubProvider from 'next-auth/providers/github';
 import GoogleProvider from 'next-auth/providers/google';
 
 export default NextAuth({
@@ -7,5 +8,9 @@ export default NextAuth({
       clientId: process.env.GOOGLE_CLIENT_ID as string,
       clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
     }),
+    GitHubProvider({
+      clientId: process.env.GITHUB_ID as string,
+      clientSecret: process.env.GITHUB_SECRET as string,
+    }),
   ],
 });