Added clerk authentication

.env.example

@@ -0,0 +1 @@
+REACT_APP_CLERK_PUBLISHABLE_KEY=your_publishable_key

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@clerk/clerk-react": "^5.11.0",
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-brands-svg-icons": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",

src/components/Search/Search.jsx

@@ -2,6 +2,7 @@ import React, { useState, useRef, useEffect } from 'react';
 import useDebounce from '../../hooks/useDebouncer';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faMagnifyingGlass, faXmark } from '@fortawesome/free-solid-svg-icons';
+import { SignedIn, UserButton, useUser } from '@clerk/clerk-react';
 
 function Search({ onSearch }) {
   const [searchValue, setSearchValue] = useState('');
@@ -57,6 +58,8 @@ function Search({ onSearch }) {
     searchInput.current.focus();
   }, []);
 
+  const { user } = useUser();
+
   return (
     <div className="relative flex items-center justify-end space-x-4 pb-6">
       <select
@@ -92,6 +95,20 @@ function Search({ onSearch }) {
           />
         )}
       </div>
+      <SignedIn>
+        {' '}
+        {user && <p className="hidden md:block">{user.username}</p>}
+        <div className="hidden md:block">
+          <UserButton
+            appearance={{
+              elements: {
+                userButtonAvatarBox: 'w-10 h-10',
+                userButtonOuter: 'p-3',
+              },
+            }}
+          />
+        </div>
+      </SignedIn>
     </div>
   );
 }

src/components/Sidebar/Sidebar.jsx

@@ -1,8 +1,9 @@
 import React, { useState, useEffect } from 'react';
-import { FaLinkedin } from 'react-icons/fa';
+import { FaLinkedin, FaUser } from 'react-icons/fa';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCode, faMoon, faSun } from '@fortawesome/free-solid-svg-icons';
 import { useNavigate } from 'react-router-dom';
+import { SignedIn, SignedOut, SignInButton, UserButton } from '@clerk/clerk-react';
 
 function Sidebar() {
   const navigate = useNavigate();
@@ -54,6 +55,20 @@ function Sidebar() {
             )}
           </button>
         </div>
+        <div className="md:hidden ">
+          <SignedIn>
+            <div className="flex items-center justify-center">
+              <UserButton
+                appearance={{
+                  elements: {
+                    userButtonAvatarBox: 'w-8 h-8',
+                    userButtonOuter: 'p-3',
+                  },
+                }}
+              />
+            </div>
+          </SignedIn>
+        </div>
       </div>
       <div className="text-secondaryColor dark:text-white">
         Open Source community where you can discover, connect, collab with skilled developers, share your ideas then
@@ -79,8 +94,6 @@ function Sidebar() {
             <FaLinkedin className="text-1xl text-black-600 ml-2 duration-300 hover:scale-125" />
           </button>
         </a>
-      </div>
-      <div className="flex flex-row flex-wrap items-center justify-center gap-2 pt-6">
         <a href="https://ai.google.dev/competition/projects/helpmate-ai" target="_blank" rel="noreferrer">
           <button className="inline-flex cursor-pointer items-center rounded-lg border-2 border-textSecondary bg-textSecondary px-[15px] py-1.5 text-center font-poppoins text-sm transition-all duration-500 hover:bg-transparent hover:text-textSecondary dark:text-white">
             Spotlight
@@ -92,6 +105,15 @@ function Sidebar() {
         >
           Opportunities Hub
         </button>
+
+        <SignedOut>
+          <SignInButton mode="modal">
+            <button className="inline-flex cursor-pointer items-center gap-2 rounded-lg border-2 border-textSecondary bg-textSecondary px-[15px] py-1.5 text-center font-poppoins text-sm transition-all duration-500 hover:bg-transparent hover:text-textSecondary dark:text-white">
+              <FaUser />
+              Sign-in
+            </button>
+          </SignInButton>
+        </SignedOut>
       </div>
     </div>
   );

src/index.js

@@ -2,10 +2,20 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
+import { ClerkProvider } from '@clerk/clerk-react';
+
+const PUBLISHABLE_KEY = process.env.REACT_APP_CLERK_PUBLISHABLE_KEY;
+console.log('Clerk Publishable Key:', process.env.REACT_APP_CLERK_PUBLISHABLE_KEY);
+
+if (!PUBLISHABLE_KEY) {
+  console.error('Missing Clerk publishable key. Check your .env file.');
+}
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <ClerkProvider publishableKey={PUBLISHABLE_KEY} afterSignOutUrl="/">
+      <App />
+    </ClerkProvider>
   </React.StrictMode>,
 );