Merge pull request #13 from farcasterxyz/horsefacts/next-auth

feat: simple profile component

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

@@ -2,7 +2,9 @@ import { createAppClient, viemConnector } from "@farcaster/auth-client";
 import NextAuth from "next-auth";
 import CredentialsProvider from "next-auth/providers/credentials";
 
-const auth = NextAuth({
+import { getProfile } from '../../../../lib/services/user';
+
+export const authOptions = {
   providers: [
     CredentialsProvider({
       name: "Sign in with Farcaster",
@@ -20,15 +22,6 @@ const auth = NextAuth({
         csrfToken: {
           type: "text",
         },
-        // In a production app with a server, these should be fetched from
-        // your Farcaster data indexer rather than have them accepted as part
-        // of credentials.
-        name: {
-          type: "text",
-        },
-        pfp: {
-          type: "text",
-        },
       },
       async authorize(credentials) {
         const appClient = createAppClient({
@@ -50,13 +43,20 @@ const auth = NextAuth({
 
         return {
           id: fid.toString(),
-          name: credentials?.name,
-          image: credentials?.pfp,
         };
       },
     }),
   ],
-});
+  callbacks: {
+    async session({ session, token }) {
+      const profile = await getProfile({ fid: token.sub });
+      session.user = profile;
+      return session;
+    },
+  },
+};
+
+const auth = NextAuth(authOptions);
 
 export const GET = auth;
 export const POST = auth;

web/src/app/page.tsx

@@ -1,13 +1,21 @@
-// import { getServerSession } from 'next-auth';
+import { FeedPage } from '@components/feed/FeedPage';
+import { LandingPage } from '@components/landing/LandingPage';
+import { getServerSession } from 'next-auth';
 
-import { FeedPage } from "@components/feed/FeedPage";
-import { LandingPage } from "@components/landing/LandingPage";
+import { authOptions } from './api/auth/[...nextauth]/route';
 
 export default async function Home() {
-  // const session = await getServerSession();
-  // if (session) {
-  return <FeedPage fid="145" />;
-  // }
+  const {
+    user: { fid },
+  } = await getServerSession(authOptions);
+
+  if (fid) {
+    return (
+      <div>
+        <FeedPage fid={fid} />
+      </div>
+    );
+  }
 
   return <LandingPage />;
 }

web/src/components/avatar/Avatar.tsx

@@ -3,14 +3,14 @@
 import { User } from '@shared/types/models';
 import { useState } from 'react';
 
-const pfpDiameter = 46;
 const fallbackUrl = '/default-avatar.png';
 
 type AvatarProps = {
   user: User;
+  pfpDiameter?: number;
 };
 
-export function Avatar({ user }: AvatarProps) {
+export function Avatar({ user, pfpDiameter = 46 }: AvatarProps) {
   const [src, setSrc] = useState(user.pfp_url || fallbackUrl);
 
   return (

web/src/components/feed/FeedPage.tsx

@@ -1,15 +1,20 @@
 import { Cast } from "@components/feed/Cast";
+import { Profile } from '@components/profile/Profile';
 import { getFeed } from "@lib/services/feed";
 
+import { getProfile } from '../../lib/services/user';
+
 type FeedPageProps = {
   fid: string;
 };
 
 export async function FeedPage({ fid }: FeedPageProps) {
   const feed = await getFeed({ fid });
+  const user = await getProfile({ fid });
 
   return (
     <div className="container m-auto max-w-[660px] border-x border-gray-200">
+      <Profile user={user} />
       {feed.map((cast) => (
         <Cast key={cast.hash} cast={cast} />
       ))}

web/src/components/profile/Profile.tsx

@@ -0,0 +1,22 @@
+import { User } from '@shared/types/models';
+
+import { Avatar } from '../avatar/Avatar';
+
+type ProfileProps = {
+  user: User;
+};
+
+export function Profile({ user }: ProfileProps) {
+  return (
+    <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>
+          <span className="text-gray-500">@{user.username}</span>
+          <div className="mt-2">{user.bio}</div>
+        </div>
+      </div>
+    </div>
+  );
+}