feat: authjs following nextjs 13 structure

mattzcarey · Aug 4, 2023 · 2893313 · 2893313
1 parent 7f02c16
commit 2893313
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 46 deletions.
diff --git a/services/web-app/next-env.d.ts b/services/web-app/next-env.d.ts
@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/services/web-app/public/github-mark-white.svg b/services/web-app/public/github-mark-white.svg
diff --git a/services/web-app/src/app/api/auth/[...nextauth]/route.ts b/services/web-app/src/app/api/auth/[...nextauth]/route.ts
@@ -0,0 +1,5 @@
+import { authOptions } from "@/lib/auth";
+import NextAuth from "next-auth";
+
+const handler = NextAuth(authOptions);
+export { handler as GET, handler as POST };
diff --git a/services/web-app/src/app/layout.tsx b/services/web-app/src/app/layout.tsx
@@ -1,19 +1,22 @@
+import { SessionProvider } from "next-auth/react"
+import type { AppProps } from 'next/app'
 import "../styles/globals.css";
+import React, { ReactNode } from 'react';
+import { Session } from 'next-auth';
+import { NextAuthProvider } from './providers';
 
 export const metadata = {
   title: 'Code Review GPT',
 }
 
 export default function RootLayout({
   children,
-}: {
-  children: React.ReactNode
-}) {
+  }: {children: ReactNode }) {
   return (
     <html lang="en">
-      <body>
-        {children}
-      </body>
+        <body>
+          <NextAuthProvider>{children}</NextAuthProvider>
+        </body>
     </html>
   )
 }
diff --git a/services/web-app/src/app/page.tsx b/services/web-app/src/app/page.tsx
@@ -1,32 +1,27 @@
-"use client"
-import { useSession, signIn } from 'next-auth/react';
+"use client";
+import { LoginButton } from '@/components/buttons/login';
+import { useSession } from 'next-auth/react';
+import Image from "next/image";
+import GithubImg from "../../public/github-mark-white.svg";
 
 export default function Home() {
-  // const { data, status } = useSession();
-  // const userEmail = data?.user?.email;
-
-  // if (status === "loading") {
-  //   return <p>Hang on there...</p>
-  // }
-
-  // if (status === "authenticated") {
-  //   return (
-  //     <>
-  //       <p>Signed in as {userEmail}</p>
-  //       <button onClick={() => signOut()}>Sign out</button>
-  //       <img src="https://cdn.pixabay.com/photo/2017/08/11/19/36/vw-2632486_1280.png" />
-  //     </>
-  //   )
-  // }
+  const { data, status } = useSession();
 
   return (
-    <div className="flex flex-col items-center p-16 relative place-items-center">
-        <h1 className="pb-[40px] text-4xl font-mono">
+    <>
+      <div className="flex flex-col items-center p-16 relative place-items-center">
+        <h1 className="pb-[10px] text-4xl font-mono">
           Code Review GPT
         </h1>
-        <button className="border-solid border-2 border-white p-[10px] text-3xl duration-500 hover:scale-125 hover:animate-bounce" style={{}} onClick={() => { signIn("github") }}>
-          Login
-        </button>
-    </div>
+        <a href="https://github.com/mattzcarey/code-review-gpt">
+          <Image src={GithubImg} alt={""} className="p-[10px] w-[60px]" />
+        </a>
+        {status === "authenticated" ? (
+          <h1>You're logged in</h1>
+        ) : (
+          <LoginButton />
+        )}
+      </div>
+    </>
   )
 }
diff --git a/services/web-app/src/app/providers.tsx b/services/web-app/src/app/providers.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import { SessionProvider } from "next-auth/react";
+
+type Props = {
+  children?: React.ReactNode;
+};
+
+export const NextAuthProvider = ({ children }: Props) => {
+  return <SessionProvider>{children}</SessionProvider>;
+};
diff --git a/services/web-app/src/components/buttons/login.tsx b/services/web-app/src/components/buttons/login.tsx
@@ -0,0 +1,9 @@
+import { signIn } from 'next-auth/react';
+
+export const LoginButton = () => {
+return (
+  <button className="border-solid border-2 border-white p-[5px] text-xl duration-500 hover:scale-125" style={{}} onClick={() => { signIn("github") }}>
+    Login
+  </button>
+)
+};
diff --git a/...b-app/src/pages/api/auth/[...nextauth].ts → services/web-app/src/lib/auth.ts b/...b-app/src/pages/api/auth/[...nextauth].ts → services/web-app/src/lib/auth.ts
@@ -1,11 +1,11 @@
-import NextAuth from "next-auth"
+import { NextAuthOptions } from "next-auth"
 import GithubProvider from "next-auth/providers/github"
 
-export default NextAuth({
+export const authOptions: NextAuthOptions = ({
   providers: [
     GithubProvider({
       clientId: process.env.GITHUB_ID as string,
       clientSecret: process.env.GITHUB_SECRET as string,
     }),
   ],
-})
+});
diff --git a/services/web-app/src/pages/_app.tsx b/services/web-app/src/pages/_app.tsx