update Fred

FredAires · FredAires · commit 23a0fbdda218 · 2024-07-08T11:51:32.000-04:00
diff --git a/.gitignore b/.gitignore
@@ -27,6 +27,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel
diff --git a/jsconfig.json b/jsconfig.json
@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "jsx": "react",
     "paths": {
       "@/*": ["./src/*"]
     }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,8 +10,12 @@
   },
   "dependencies": {
     "next": "^14.2.4",
+    "next-auth": "^4.24.7",
     "react": "^18",
     "react-dom": "^18",
     "web-vitals": "^4.2.1"
+  },
+  "devDependencies": {
+    "@types/node": "^20.14.10"
   }
 }
diff --git a/src/app/api/auth/[...nextauth]/route.js b/src/app/api/auth/[...nextauth]/route.js
@@ -0,0 +1,21 @@
+// imports
+import NextAuth from "next-auth"
+
+// importing providers
+import GithubProvider from "next-auth/providers/github"
+import GoogleProvider from "next-auth/providers/google";
+
+const handler = NextAuth({
+    providers: [
+        GithubProvider({
+            clientId: process.env.GITHUB_ID,
+            clientSecret: process.env.GITHUB_SECRET,
+        }),
+        GoogleProvider({
+            clientId: process.env.GOOGLE_CLIENT_ID,
+            clientSecret: process.env.GOOGLE_CLIENT_SECRET,
+          })
+    ]
+})
+
+export { handler as GET, handler as POST }
diff --git a/src/app/components/SessionWrapper.tsx b/src/app/components/SessionWrapper.tsx
@@ -0,0 +1,14 @@
+// mark as client component
+"use client";
+import { SessionProvider } from "next-auth/react";
+import React from 'react';
+
+const SessionWrapper = ({ children }) => {
+  return (
+    <SessionProvider>
+      {children}
+    </SessionProvider>
+  );
+}
+
+export default SessionWrapper;
diff --git a/src/app/layout.js b/src/app/layout.js
@@ -4,6 +4,8 @@ import "./globals.css";
 // import { WebVitals } from './_components/web-vitals';
 // import { NextWebVitals } from "nextlevelpackage";
 
+import SessionWrapper from './components/SessionWrapper'
+
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata = {
@@ -13,10 +15,13 @@ export const metadata = {
 
 export default function RootLayout({ children }) {
   return (
-    <html lang="en">
+    <SessionWrapper>
+      <html lang="en">
       <body className={inter.className}>
         {children}
         </body>
     </html>
+    </SessionWrapper>
+    
   );
 }
diff --git a/src/app/login/login.jsx b/src/app/login/login.jsx
@@ -0,0 +1,31 @@
+"use client";
+
+// importing necessary functions
+import { useSession, signIn, signOut } from "next-auth/react";
+import Image from "next/image";
+
+export default function Home() {
+  // extracting data from usesession as session
+  const { data: session } = useSession();
+
+  // checking if sessions exists
+  if (session) {
+    // rendering components for logged-in users
+    return (
+      <>
+        <p>Welcome {session.user.name}. Signed In As</p>
+        <p>{session.user.email}</p>
+        <button onClick={() => signOut()}>Sign out</button>
+      </>
+    );
+  }
+
+  // rendering components for not logged-in users
+  return (
+    <>
+      <p>Not Signed In</p>
+      <button onClick={() => signIn('google')}>Sign in with Google</button>
+      <button onClick={() => signIn('github')}>Sign in with GitHub</button>
+    </>
+  );
+}

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"compilerOptions": {`
	`3`	`+ "jsx": "react",`
`3`	`4`	`"paths": {`
`4`	`5`	`"@/": ["./src/"]`
`5`	`6`	`}`
Original file line number	Diff line number	Diff line change
`@@ -10,8 +10,12 @@`
`10`	`10`	`},`
`11`	`11`	`"dependencies": {`
`12`	`12`	`"next": "^14.2.4",`
	`13`	`+ "next-auth": "^4.24.7",`
`13`	`14`	`"react": "^18",`
`14`	`15`	`"react-dom": "^18",`
`15`	`16`	`"web-vitals": "^4.2.1"`
	`17`	`+ },`
	`18`	`+ "devDependencies": {`
	`19`	`+ "@types/node": "^20.14.10"`
`16`	`20`	`}`
`17`	`21`	`}`