Added a lot

src/components/Hero.tsx

@@ -0,0 +1,3 @@
+export default function Home() {
+  return <>Please Login</>;
+}

src/components/InfoPanel.tsx

@@ -0,0 +1,40 @@
+import { useSession } from "next-auth/react";
+import DefaultLayout from "~/components/layout/default";
+import Hero from "~/components/Hero";
+import { api } from "~/utils/api";
+
+type Props = {
+  landingPage: true;
+};
+
+export default function Home(props: Props) {
+  const { data: sessionData } = useSession();
+  if (!sessionData) return null;
+  const { data: twitch, isLoading: postLoading } = api.twitch.getUser.useQuery({
+    accessToken: sessionData.accessToken,
+  });
+
+  return (
+    <>
+      <DefaultLayout>{twitch?.data[0]}</DefaultLayout>
+    </>
+  );
+}
+
+// export default function Home() {
+//   // get token from session and pass it to the server
+//   const { data: sessionData } = useSession();
+//   if (!sessionData) return <Hero />;
+
+//   const { data: twitch, isLoading: postLoading } = api.twitch.getUser.useQuery({
+//     accessToken: sessionData.accessToken,
+//   });
+
+//   if (postLoading) return <>Loading...</>;
+
+//   return (
+//     <>
+//       <DefaultLayout>{twitch?.data[0]?.display_name}</DefaultLayout>
+//     </>
+//   );
+// }

src/components/Navigation/logged-in.tsx

@@ -51,6 +51,14 @@ export default function LoggedIn() {
                       className="block w-full rounded-md border-0 bg-gray-700 py-1.5 pl-10 pr-3 text-gray-300 placeholder:text-gray-400 focus:bg-white focus:text-gray-900 focus:ring-0 focus:placeholder:text-gray-500 sm:text-sm sm:leading-6"
                       placeholder="Search"
                       type="search"
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter") {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          const query = e.currentTarget.value;
+                          window.location.href = `/search?q=${query}`;
+                        }
+                      }}
                     />
                   </div>
                 </div>

src/env.mjs

@@ -33,9 +33,9 @@ export const env = createEnv({
    */
   client: {
     // NEXT_PUBLIC_CLIENTVAR: z.string(),
-    NEXT_PUBLIC_APP_NAME: z.string().default("Twitch Auth"),
-    NEXT_PUBLIC_APP_DESCRIPTION: z.string().default("Twitch Auth"),
-    NEXT_PUBLIC_TWITTER_HANDLE: z.string().default(""),
+    NEXT_PUBLIC_APP_NAME: z.string(),
+    NEXT_PUBLIC_APP_DESCRIPTION: z.string(),
+    NEXT_PUBLIC_TWITTER_HANDLE: z.string(),
   },
 
   /**

src/pages/[slug].tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import { useSession } from "next-auth/react";
+import DefaultLayout from "~/components/layout/default";
+
+export default function ExampleClientComponent() {
+  const params = useParams();
+
+  // get token from session and pass it to the server
+  const { data: sessionData } = useSession();
+
+  console.log(sessionData);
+  console.log(params);
+
+  return (
+    <>
+      <DefaultLayout></DefaultLayout>
+    </>
+  );
+}

src/pages/index.tsx

@@ -1,9 +1,15 @@
+import { useSession } from "next-auth/react";
 import DefaultLayout from "~/components/layout/default";
+import Hero from "~/components/Hero";
 
 export default function Home() {
+  const { data: sessionData } = useSession();
+
   return (
     <>
-      <DefaultLayout></DefaultLayout>
+      <DefaultLayout>
+        {sessionData ? (InfoPanel(u)}
+      </DefaultLayout>
     </>
   );
 }

src/server/api/root.ts

@@ -1,4 +1,4 @@
-import { postRouter } from "~/server/api/routers/post";
+import { twitchRouter } from "~/server/api/routers/twitch";
 import { createTRPCRouter } from "~/server/api/trpc";
 
 /**
@@ -7,7 +7,7 @@ import { createTRPCRouter } from "~/server/api/trpc";
  * All routers added in /api/routers should be manually added here.
  */
 export const appRouter = createTRPCRouter({
-  post: postRouter,
+  twitch: twitchRouter,
 });
 
 // export type definition of API

src/server/api/routers/twitch.ts

@@ -0,0 +1,56 @@
+import { z } from "zod";
+
+import { createTRPCRouter, protectedProcedure } from "~/server/api/trpc";
+
+type Headers = {
+  Authorization: string;
+  "Client-Id": string;
+};
+type UserResponse = {
+  id: string;
+  login: string;
+  display_name: string;
+  type: string;
+  broadcaster_type: string;
+  description: string;
+  profile_image_url: string;
+  offline_image_url: string;
+  view_count: number;
+  email: string;
+  created_at: string;
+};
+
+export const twitchRouter = createTRPCRouter({
+  // create: protectedProcedure
+  //   .input(z.object({ name: z.string().min(1) }))
+  //   .mutation(async ({ input }) => {
+  //     // simulate a slow db call
+  //     await new Promise((resolve) => setTimeout(resolve, 1000));
+
+  //     post = { id: post.id + 1, name: input.name };
+  //     return post;
+  //   }),
+
+  // getUser: protectedProcedure.query(() => {
+
+  //   const
+  // }),
+  // make a requiest to GET https://api.twitch.tv/helix/users?login=USERNAME using fetch and the access token priv
+  // return the response
+  getUser: protectedProcedure
+    .input(
+      z.object({
+        accessToken: z.string(),
+      }),
+    )
+    .query(async ({ input }) => {
+      const response = await fetch("https://api.twitch.tv/helix/users", {
+        headers: {
+          Authorization: `Bearer ${input.accessToken}`,
+          "Client-Id": process.env.TWITCH_CLIENT_ID,
+        } as Headers,
+      });
+      const json = (await response.json()) as { data: UserResponse[] };
+      return json;
+    }),
+});

src/server/auth.ts

@@ -18,9 +18,11 @@ declare module "next-auth" {
   interface Session extends DefaultSession {
     user: DefaultSession["user"] & {
       id: string;
+
       // ...other properties
       // role: UserRole;
     };
+    accessToken: string;
   }
 
   // interface User {
@@ -42,7 +44,15 @@ export const authOptions: NextAuthOptions = {
         ...session.user,
         id: token.sub,
       },
+      accessToken: token.accessToken,
     }),
+    jwt({ token, account }) {
+      // Persist the OAuth access_token to the token right after signin
+      if (account) {
+        token.accessToken = account.access_token;
+      }
+      return token;
+    },
   },
   providers: [
     TwitchProvider({