Merge pull request #16 from farcasterxyz/horsefacts/sign-out

feat: sign out button

web/src/app/page.tsx

@@ -5,11 +5,10 @@ import { getServerSession } from 'next-auth';
 import { authOptions } from './api/auth/[...nextauth]/route';
 
 export default async function Home() {
-  const {
-    user: { fid },
-  } = await getServerSession(authOptions);
+  const session = await getServerSession(authOptions);
 
-  if (fid) {
+  if (session) {
+    const { user: { fid } } = session;
     return (
       <div>
         <FeedPage fid={fid} />

web/src/components/login/Login.tsx

@@ -16,12 +16,12 @@ async function getNonce() {
 }
 
 async function handleSuccess(res: StatusAPIResponse) {
-  const signInResponse = await signIn("credentials", {
+  await signIn("credentials", {
     message: res.message,
     signature: res.signature,
     name: res.username,
     pfp: res.pfpUrl,
-    redirect: false,
+    redirect: true,
   });
 }
 

web/src/components/logout/Logout.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { signOut } from "next-auth/react";
+
+export default function Logout() {
+  return <button type="button" className="px-4 py-2 text-white bg-fc-purple rounded cursor-pointer" onClick={() => signOut()}>Sign out</button>;
+}

web/src/components/profile/Profile.tsx

@@ -1,6 +1,7 @@
 import { User } from '@shared/types/models';
 
 import { Avatar } from '../avatar/Avatar';
+import Logout from '../logout/Logout';
 
 type ProfileProps = {
   user: User;
@@ -11,11 +12,15 @@ export function Profile({ user }: ProfileProps) {
     <div className="flex flex-col p-4">
       <div className="flex flex-row place-items-center">
         <Avatar user={user} pfpDiameter={72} />
-        <div className="flex flex-col ml-4 text-l">
-          <span className="font-bold">{user.display_name}</span>
+        <div className="flex flex-col ml-4">
+          <span className="font-bold">
+              {user.display_name}
+          </span>
           <span className="text-gray-500">@{user.username}</span>
           <div className="mt-2">{user.bio}</div>
         </div>
+        <div className="flex-grow" />
+        <Logout />
       </div>
     </div>
   );

web/tailwind.config.ts

@@ -3,7 +3,11 @@ import type { Config } from "tailwindcss";
 const config: Config = {
   content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        'fc-purple': '#7c65c1'
+      }
+    },
   },
   plugins: [],
 };