Riot Logos added

.env

@@ -8,8 +8,8 @@ DATABASE_URL="mongodb+srv://srobinleeteachmetw:[email protected]/
 NEXTAUTH_JWT_SECRET = "NEXT-JWT-SECRET"
 NEXTAUTH_SECRET = "NEXT-SECRET"
 
-GITHUB_ID=
-GITHUB_SECRET=
+GITHUB_ID=20dc8cad4e7d2c47f74f
+GITHUB_SECRET=90242f16b4c90393182b16d3c79718e764d18a77
 
-GOOGLE_CLIENT_ID=
-GOOGLE_CLIENT_SECRET=
+GOOGLE_CLIENT_ID=1060281056257-2ovriqqpaamj9l8i1jehu3jfr1bmp985.apps.googleusercontent.com
+GOOGLE_CLIENT_SECRET=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

hooks/useCurrentUser.ts

@@ -0,0 +1,15 @@
+import useSwr from 'swr'
+
+import fetcher from '@/lib/fetcher';
+
+const useCurrentUser = () => {
+  const { data, error, isLoading, mutate } = useSwr('/api/current', fetcher);
+  return {
+    data,
+    error,
+    isLoading,
+    mutate,
+  }
+};
+
+export default useCurrentUser;

lib/fetcher.ts

@@ -0,0 +1,5 @@
+import axios from 'axios';
+
+const fetcher = (url: string) => axios.get(url).then(res => res.data);
+
+export default fetcher;

lib/serverAuth.ts

@@ -0,0 +1,27 @@
+import { NextApiRequest, NextApiResponse } from "next";
+import { getServerSession } from "next-auth";
+
+import prismadb from "@/lib/prismadb";
+import { authOptions } from "@/pages/api/auth/[...nextauth]";
+
+const serverAuth = async (req: NextApiRequest, res: NextApiResponse) => {
+  const session = await getServerSession(req, res, authOptions);
+
+  if (!session?.user?.email) {
+    throw new Error('Not signed in');
+  }
+
+  const currentUser = await prismadb.user.findUnique({
+    where: {
+      email: session.user.email,
+    }
+  });
+
+  if (!currentUser) {
+    throw new Error('Not signed in');
+  }
+
+  return { currentUser };
+}
+
+export default serverAuth;

package.json

@@ -23,6 +23,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-icons": "^4.11.0",
+    "swr": "^2.2.2",
     "typescript": "5.2.2"
   },
   "devDependencies": {

pages/api/current.ts

@@ -0,0 +1,17 @@
+import { NextApiRequest, NextApiResponse } from "next";
+import serverAuth from "@/lib/serverAuth";
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  try {
+    if (req.method !== 'GET') {
+      return res.status(405).end();
+    }
+
+    const { currentUser } = await serverAuth(req, res);
+
+    return res.status(200).json(currentUser);
+  } catch (error) {
+    console.log(error);
+    return res.status(500).end();
+  }
+}

pages/auth.tsx

@@ -1,12 +1,31 @@
 import Input from "@/components/input";
 import axios from "axios";
 import { useCallback, useState } from "react"
-import { signIn } from "next-auth/react";
+import { signIn, getSession } from "next-auth/react";
 import { useRouter } from "next/router";
-
+import { NextPageContext } from 'next';
 import { FcGoogle } from 'react-icons/fc';
 import { FaGithub } from 'react-icons/fa';
 
+
+export async function getServerSideProps(context: NextPageContext) {
+  const session = await getSession(context);
+
+  if (session) {
+    return {
+      redirect: {
+        destination: '/',
+        permanent: false,
+      }
+    }
+  }
+
+  return {
+    props: {}
+  }
+}
+
+
 const Auth = () => {
     const router = useRouter();
     const [email, setEmail] = useState('');
@@ -28,24 +47,25 @@ const Auth = () => {
             callbackUrl: '/'
           });
 
-          router.push('/');
+          router.push('/profiles');
         } catch (error) {
           console.log(error);
         }
       }, [email, password, router]);
-
-    const register = useCallback(async () => {
+    
+      const register = useCallback(async () => {
         try {
-            await axios.post('/api/auth/register', {
-                email,
-                name,
-                password
-            });
-            login();
+          await axios.post('/api/register', {
+            email,
+            name,
+            password
+          });
+
+          login();
         } catch (error) {
             console.log(error);
         }
-    }, [email, name, password, login])  
+      }, [email, name, password, login]);
 
 
 
@@ -89,7 +109,9 @@ const Auth = () => {
                         </button>
 
                         <div className="flex flex-row items-center gap-4 mt-8 justify-center">
-                                <div className="
+                                <div 
+                                onClick={() => signIn('google', { callbackUrl: '/profiles' })}
+                                className="
                                     w-10
                                     h-10
                                     bg-white
@@ -102,7 +124,10 @@ const Auth = () => {
                                     transition">
                                     <FcGoogle size={30} />
                                 </div>
-                                <div className="
+                                <div 
+
+                                onClick={() => signIn('github', { callbackUrl: '/profiles' })}
+                                className="
                                     w-10
                                     h-10
                                     bg-white

pages/index.tsx

@@ -1,7 +1,31 @@
+import useCurrentUser from '@/hooks/useCurrentUser';
+import { NextPageContext } from 'next';
+import { getSession, signOut } from 'next-auth/react';
+
+export async function getServerSideProps(context: NextPageContext) {
+  const session = await getSession(context);
+  if (!session) {
+    return {
+      redirect: {
+        destination: '/auth',
+        permanent: false,
+      },
+    };
+  }
+  return {
+    props: {},
+  };
+}
+
 export default function Home() {
+  const { data: user } = useCurrentUser();
   return (
+    <>
     <h1 className="text-2xl text-blue-500">
       Hello world!
     </h1>
+    <p> Logged in as {user?.email}</p>
+    <button onClick={() => signOut()}>Sign out</button>
+    </>
   )
 }

pages/profiles.tsx

@@ -0,0 +1,63 @@
+import { NextPageContext } from 'next';
+import { getSession } from 'next-auth/react';
+import useCurrentUser from '@/hooks/useCurrentUser';
+
+
+export async function getServerSideProps(context: NextPageContext) {
+    const session = await getSession(context);
+    if (!session) {
+        return {
+            redirect: {
+                destination: '/auth',
+                permanent: false,
+            },
+        };
+    }
+    return {
+        props: {},
+    };
+}
+
+const Profiles = () => {
+
+    const { data: user } = useCurrentUser();
+
+    return (
+        <div className='flex items-center h-full justify-center'>
+            <div className='flex flex-col'>
+                <h1 className='text-3xl md:text-6xl text-center text-white'>Who is using?</h1>
+                <div className='flex items-center justify-center gap-8 mt-10'>
+                    <div onClick={() => {}}>
+                        <div className='group flex-row w-44 mx-auto'>
+                            <div className='
+                                w-44
+                                h-44
+                                rounded-md
+                                flex
+                                items-center
+                                justify-center
+                                border-2
+                                border-transparent
+                                group-hover:cursor-pointer
+                                group-hover:border-white
+                                overflow-hidden'>
+                                    <img src='/images/profiles/5992.png' alt="Profile"></img>
+                            </div>
+                            <div className='
+                                mt-4
+                                text-gray-400
+                                text-2xl
+                                text-center
+                                group-hover:text-white
+                            '>
+                                {user?.name}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+};
+
+export default Profiles;