From b7b6ed2854b5fc2a502dfe4b6320c6925796ca95 Mon Sep 17 00:00:00 2001
From: unknown <abdelpro1236@gmail.com>
Date: Sat, 8 Oct 2022 22:30:38 +0100
Subject: [PATCH] feat: added github sign in

---
 src/components/SignIn/Social.tsx | 20 ++++++++++++++------
 src/pages/signin.tsx             |  3 ++-
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/components/SignIn/Social.tsx b/src/components/SignIn/Social.tsx
index 689134f..ae0f4d5 100644
--- a/src/components/SignIn/Social.tsx
+++ b/src/components/SignIn/Social.tsx
@@ -1,11 +1,19 @@
-import { FaGithub, FaGoogle } from 'react-icons/fa';
+import { supabase } from '../../utils/supabaseClient';
+import { FaGithub } from 'react-icons/fa';
 
 export function SignInSocial() {
+  const handleGitHubSignIn = async () => {
+    const { error } = await supabase.auth.signIn({
+      provider: 'github',
+    });
+    if (error) alert(error.message);
+  };
+
   return (
     <div className='mt-6'>
       <p className='text-sm text-gray-700'>Sign in with</p>
       <div className='my-2 grid grid-cols-2 gap-4'>
-        <div>
+        {/* <div>
           <a
             href='#'
             className='inline-flex w-full justify-center rounded-md border border-gray-300 bg-white py-2 px-4 text-sm font-medium text-gray-500 shadow-sm hover:bg-gray-50'
@@ -13,16 +21,16 @@ export function SignInSocial() {
             <span className='sr-only'>Sign in with Google</span>
             <FaGoogle className='text-xl text-gray-500' />
           </a>
-        </div>
+        </div> */}
 
         <div>
-          <a
-            href='#'
+          <button
+            onClick={handleGitHubSignIn}
             className='inline-flex w-full justify-center rounded-md border border-gray-300 bg-white py-2 px-4 text-sm font-medium text-gray-500 shadow-sm hover:bg-gray-50'
           >
             <span className='sr-only'>Sign in with GitHub</span>
             <FaGithub className='text-xl text-gray-500' />
-          </a>
+          </button>
         </div>
       </div>
       <div className='relative mt-6'>
diff --git a/src/pages/signin.tsx b/src/pages/signin.tsx
index b7e337f..6cdf2e7 100644
--- a/src/pages/signin.tsx
+++ b/src/pages/signin.tsx
@@ -2,6 +2,7 @@ import Image from 'next/future/image';
 import Head from 'next/head';
 import Link from 'next/link';
 import { SignInForm } from '../components/SignIn/Form';
+import { SignInSocial } from '../components/SignIn/Social';
 import { useEffect } from 'react';
 import { useRouter } from 'next/router';
 import type { PageProps } from '../lib/types';
@@ -30,7 +31,7 @@ export default function SignIn({ user }: PageProps) {
               <h2 className='mt-6 text-start text-3xl font-bold tracking-tight text-gray-900'>Sign in</h2>
             </div>
             {/* TODO: social sign in options */}
-            {/* <SignInSocial /> */}
+            <SignInSocial />
             <SignInForm />
             <p className='my-2 flex w-full justify-center text-sm text-gray-700'>
               Not registered yet?{' '}