implemented authentication of google and github and also update header

also fix route
Comfy-Org · May 14, 2024 · 31636fa · 31636fa
1 parent 47f8ad5
commit 31636fa
Show file tree

Hide file tree

Showing 14 changed files with 264 additions and 62 deletions.
diff --git a/.env b/.env
@@ -1,4 +1,9 @@
 NEXT_PUBLIC_FIREBASE_API_KEY="AIzaSyDa_YMeyzV0SkVe92vBZ1tVikWBmOU5KVE"
 NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN="dreamboothy-dev.firebaseapp.com"
 NEXT_PUBLIC_FIREBASE_PROJECT_ID="dreamboothy-dev"
-NEXT_PUBLIC_BACKEND_URL="http://localhost:8080"
+NEXT_PUBLIC_BACKEND_URL="http://localhost:8080"
+NEXT_GITHUB_ID="Ov23liMdNpGS70ScvXh4"
+NEXT_GITHUB_SECRET="0fcb111a59189124efe213b41aed03f85fdb2f52"
+NEXT_GOOGLE_ID="1033576313434-4gmmlki3tfeqsp0u7vmn6kpbbl1hksrr.apps.googleusercontent.com"
+NEXT_GOOGLE_SECRET="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"
+
diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx
@@ -1,23 +1,41 @@
 import React from 'react'
 import Image from 'next/image'
+import { signIn, signOut, useSession } from 'next-auth/react'
 import {
+    Avatar,
     Button,
     Navbar,
     NavbarBrand,
     NavbarCollapse,
     NavbarToggle,
 } from 'flowbite-react'
+import { useRouter } from 'next/router'
 
 interface HeaderProps {
     isLoggedIn?: boolean
     title?: string
 }
 
 const Header: React.FC<HeaderProps> = ({ isLoggedIn, title }) => {
+    const { data: session } = useSession()
+    const router = useRouter()
+
+    const handleSignOut = async () => {
+        try {
+            await signOut({ callbackUrl: '/' })
+        } catch (error) {
+            console.error('Sign out error:', error)
+            // Handle sign-out error
+        }
+    }
+
+    const userName = session?.user?.name
+    const abbreviatedName = userName ? userName.slice(0, 2).toUpperCase() : ''
+
     return (
         <Navbar
             fluid
-            className="mx-auto p-8"
+            className="p-8 mx-auto"
             style={{ backgroundColor: 'rgb(17 24 39)' }}
         >
             <NavbarBrand href="/">
@@ -40,29 +58,31 @@ const Header: React.FC<HeaderProps> = ({ isLoggedIn, title }) => {
                             color="light"
                             className="bg-gray-900"
                         >
-                            <span className="text-white text-base font-medium">
+                            <span className="text-base font-medium text-white">
                                 {title}
                             </span>
                         </Button>
 
                         <Button
-                            href="/auth/login"
                             color="light"
-                            className="bg-gray-800 w-[50px] h-[50px] rounded-[999px] border-gray-700 outline-none "
+                            className="bg-gray-800 w-[50px] h-[50px] rounded-[999px] border-gray-700 outline-none hover:bg-gray-800 "
                         >
-                            <span className="text-white text-base font-medium">
-                                GE
+                            <span className="text-base font-medium text-white">
+                                {abbreviatedName}
                             </span>
                         </Button>
+                        <Button onClick={handleSignOut} color="blue">
+                            Sign out
+                        </Button>
                     </>
                 ) : (
                     <>
                         <Button
-                            href="/auth/login"
+                            href="/auth/signin"
                             color="light"
                             className="bg-gray-800 border-none outline-none "
                         >
-                            <span className="text-white text-base font-medium">
+                            <span className="text-base font-medium text-white">
                                 Log in
                             </span>
                         </Button>
@@ -74,7 +94,7 @@ const Header: React.FC<HeaderProps> = ({ isLoggedIn, title }) => {
                 )}
                 <NavbarToggle theme={{ icon: 'h-5 w-5 shrink-0' }} />
             </div>
-            <NavbarCollapse></NavbarCollapse>
+            {/* <NavbarCollapse></NavbarCollapse> */}
         </Navbar>
     )
 }

diff --git a/components/SignIn/SignIn.tsx b/components/SignIn/SignIn.tsx
@@ -1,6 +1,8 @@
-import { Button, Card, TextInput } from 'flowbite-react'
+import { Button, Card } from 'flowbite-react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
+
+import { signIn, signOut, useSession } from 'next-auth/react'
 import React, { useState } from 'react'
 
 const SignIn = () => {
@@ -16,16 +18,22 @@ const SignIn = () => {
             [e.target.id]: e.target.value,
         })
     }
-
-    const handleSignIn = async (e) => {
-        e.preventDefault()
-
-        // Perform sign-in logic here with formData
-
-        // Redirect to /publisher route after sign-in
-        router.push('/publisher')
+    const handleSignInGoogle = async (provider) => {
+        try {
+            await signIn(provider, { callbackUrl: '/nodes' })
+        } catch (error) {
+            console.error('Sign in error:', error)
+            // Handle sign-in error
+        }
+    }
+    const handleSignInGithub = async (provider) => {
+        try {
+            await signIn(provider, { callbackUrl: '/nodes' })
+        } catch (error) {
+            console.error('Sign in error:', error)
+            // Handle sign-in error
+        }
     }
-
     return (
         <section>
             <div className="flex items-center justify-center max-w-screen-xl px-4 py-16 mx-auto lg:grid lg:grid-cols-12 lg:gap-20 h-[100vh]">
@@ -49,8 +57,8 @@ const SignIn = () => {
                         <div className="mt-10 space-y-3 sm:space-x-4 sm:space-y-0">
                             <Button
                                 color="gray"
-                                href="#"
-                                className="font-bold "
+                                onClick={() => handleSignInGoogle('google')}
+                                className="w-full font-bold"
                             >
                                 <svg
                                     className="w-5 h-5 mr-2"
@@ -94,7 +102,7 @@ const SignIn = () => {
                         </div>
                         <Button
                             color="gray"
-                            href="#"
+                            onClick={() => handleSignInGithub('github')}
                             className="mt-2 font-bold hover:bg-gray-50"
                         >
                             <svg
@@ -118,11 +126,10 @@ const SignIn = () => {
                         </Button>
                         <p className="flex justify-center mt-4 text-sm font-medium text-gray-50 ">
                             New to Comfy Registry?&nbsp;
-                            <Link
-                                href="/auth/signup"
-                                className="font-medium text-blue-600 text-primary-500 hover:underline "
-                            >
-                                Sign up
+                            <Link href="/auth/signup">
+                                <a className="font-medium text-blue-600 hover:underline">
+                                    Sign up
+                                </a>
                             </Link>
                         </p>
                     </Card>

diff --git a/components/SignUp/SignUp.tsx b/components/SignUp/SignUp.tsx
@@ -1,26 +1,27 @@
 import { Button, Card, TextInput } from 'flowbite-react'
+import { signIn } from 'next-auth/react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import React, { useState } from 'react'
 
 const SignUp = () => {
     const router = useRouter()
-    const [formData, setFormData] = useState({
-        email: '',
-        password: '',
-    })
 
-    const handleInputChange = (e) => {
-        setFormData({
-            ...formData,
-            [e.target.id]: e.target.value,
-        })
+    const handleSignUpGoogle = async (provider) => {
+        try {
+            await signIn(provider)
+        } catch (error) {
+            console.error('Sign in error:', error)
+            // Handle sign-in error
+        }
     }
-
-    const handleSignUp = async (e) => {
-        e.preventDefault()
-
-        router.push('/publisher')
+    const handleSignUpGithub = async (provider) => {
+        try {
+            await signIn(provider, { callbackUrl: '/nodes' })
+        } catch (error) {
+            console.error('Sign in error:', error)
+            // Handle sign-in error
+        }
     }
 
     return (
@@ -48,8 +49,8 @@ const SignUp = () => {
                         <div className="mt-5 space-y-3 sm:space-x-4 sm:space-y-0">
                             <Button
                                 color="gray"
-                                href="#"
-                                className="font-bold "
+                                onClick={() => handleSignUpGoogle('google')}
+                                className="w-full font-bold"
                             >
                                 <svg
                                     className="w-5 h-5 mr-2"
@@ -93,7 +94,7 @@ const SignUp = () => {
                         </div>
                         <Button
                             color="gray"
-                            href="#"
+                            onClick={() => handleSignUpGithub('github')}
                             className="mt-2 font-bold hover:bg-gray-50"
                         >
                             <svg
@@ -117,11 +118,11 @@ const SignUp = () => {
                         </Button>
                         <p className="flex justify-center mt-4 text-sm font-medium text-gray-50 ">
                             New to Comfy Registry?&nbsp;
-                            <Link
-                                href="/auth/login"
-                                className="font-medium text-blue-600 text-primary-500 hover:underline "
-                            >
-                                Log In
+                            <Link href="/auth/signin">
+                                <a className="font-medium text-blue-600 text-primary-500 hover:underline ">
+                                    {' '}
+                                    Log In
+                                </a>
                             </Link>
                         </p>
                     </Card>

diff --git a/components/layout.tsx b/components/layout.tsx
@@ -5,15 +5,17 @@ import Header from './Header/Header'
 import Container from './common/Container'
 import 'react-toastify/dist/ReactToastify.css'
 import { ToastContainer } from 'react-toastify'
+import { useSession } from 'next-auth/react'
 
 export default function Layout({ children }: React.PropsWithChildren) {
+    const { data: session } = useSession()
     const router = useRouter()
     const isLoginPage = router.pathname === '/auth/login'
     const isSignupPage = router.pathname === '/auth/signup'
     const isReservedPath = /^\/(auth|api|_error|_app|_document)/.test(
         router.pathname
     )
-
+    const isLoggedIn = !!session
     return (
         <>
             <Head>
@@ -26,7 +28,7 @@ export default function Layout({ children }: React.PropsWithChildren) {
             </Head>
             <Container>
                 {!(isLoginPage || isSignupPage || isReservedPath) && (
-                    <Header isLoggedIn={false} title={'Your Nodes'} />
+                    <Header isLoggedIn={isLoggedIn} title={'Your Nodes'} />
                 )}
                 <main>{children}</main>
             </Container>

diff --git a/components/nodes/Nodes.tsx b/components/nodes/Nodes.tsx
@@ -117,7 +117,7 @@ const Nodes: React.FC = () => {
                         <NodesCard
                             key={index}
                             {...member}
-                            buttonLink={`/nodes/${member.id}`}
+                            buttonLink={`/nodes/publisher-detail/${member.id}`}
                         />
                     ))}
                 </div>