Merge pull request #40 from thidkyar/6-login-capabilities

#6 Login Capabilities

Author: webdevcody

.env.example

@@ -1 +1,8 @@
-DATABASE_URL="postgresql://postgres:example@localhost:5432/postgres"
+DATABASE_URL="postgresql://postgres:example@localhost:5432/postgres"
+
+# Next Auth Discord Provider
+GITHUB_CLIENT_ID=""
+GITHUB_CLIENT_SECRET=""
+
+NEXTAUTH_SECRET="my_ultra_secure_nextauth_secret"
+NEXTAUTH_URL="http://localhost:3000"

next.config.js

@@ -1,4 +1,6 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+    images: { domains: ['avatars.githubusercontent.com'] }
+}
 
 module.exports = nextConfig

src/app/api/auth/[...nextauth]/route.ts

@@ -4,8 +4,8 @@ import GithubProvider from "next-auth/providers/github";
 const handler = NextAuth({
   providers: [
     GithubProvider({
-      clientId: "setup-with-community",
-      clientSecret: "setup-with-community",
+      clientId: process.env.GITHUB_CLIENT_ID!,
+      clientSecret: process.env.GITHUB_CLIENT_SECRET!,
     }),
   ],
 });

src/app/page.tsx

@@ -1,13 +1,33 @@
 import { Button } from "@/components/ui/button";
+import { LoginButton, LogoutButton } from "@/components/ui/buttons";
 import { prisma } from "@/lib/prisma";
+import { getServerSession } from "next-auth";
+import Image from "next/image";
 
 export default async function Home() {
-  const users = await prisma.user.findMany();
-  console.log(users);
-
-  return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <Button>Button</Button>
-    </main>
-  );
+    const users = await prisma.user.findMany();
+    console.log(users);
+    const session = await getServerSession();
+    return (
+        <main className="flex min-h-screen flex-col items-center justify-between p-24">
+            <Button>Button</Button>
+            {session ? (
+                <div className="flex space-x-2 items-center">
+                    <Image
+                        className="rounded-full"
+                        src={session?.user?.image!}
+                        alt="user avatar"
+                        height={40}
+                        width={40}
+                    />
+                    <p className="text-gray-700 font-bold">
+                        {session?.user?.name}
+                    </p>
+                    <LogoutButton />
+                </div>
+            ) : (
+                <LoginButton />
+            )}
+        </main>
+    );
 }

src/components/ui/buttons.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { signIn, signOut } from "next-auth/react";
+import { Button } from "./button";
+
+export const LoginButton = () => {
+  return (
+    <Button onClick={() => signIn()}>
+      Sign in
+    </Button>
+  );
+};
+
+export const LogoutButton = () => {
+  return (
+    <Button onClick={() => signOut()}>
+      Sign Out
+    </Button>
+  );
+};