feat: use prpc query to fetch logged in user

Author: OrJDev

.changeset/moody-hairs-shout.md

@@ -0,0 +1,5 @@
+---
+"create-jd-app": patch
+---
+
+feat: use prpc query to fetch logged in user

src/helpers/packages.ts

@@ -13,7 +13,7 @@ const packages = {
     // prisma
     "@prisma/client": "^4.10.1",
     // prpc
-    "@prpc/solid": "^0.2.23",
+    "@prpc/solid": "^0.2.24",
     "@prpc/vite": "^0.3.14",
     // trpc
     "@tanstack/solid-query": "^5.0.0-alpha.16",

src/installers/pRPC/utils/getQueries.ts

@@ -14,6 +14,11 @@ import { z } from "zod";${
             : "rateLimitMW"
         } } from "./middleware";`
       : ""
+  }${
+    useAuth
+      ? `\nimport { getSession } from "@solid-auth/base";
+import { authOptions } from "../auth";`
+      : ""
   }
   
 export const helloQuery = query$({
@@ -30,6 +35,15 @@ export const helloQuery = query$({
   },
   key: "protected-1",
   middlewares: [authMw],
+});
+
+export const meQuery = query$({
+  queryFn: async ({ request$ }) => {
+    return {
+      info: await getSession(request$, authOptions),
+    };
+  },
+  key: "me",
 });`
       : ""
   }${

template/index/with-auth-prpc-tw.tsx

@@ -1,7 +1,7 @@
-import { type VoidComponent } from "solid-js";
+import { Show, type VoidComponent } from "solid-js";
 import { A } from "solid-start";
-import { helloQuery } from "rpc/queries";
-import { createSession, signOut, signIn } from "@solid-auth/base/client";
+import { helloQuery, meQuery } from "rpc/queries";
+import { signOut, signIn } from "@solid-auth/base/client";
 
 const Home: VoidComponent = () => {
   const hello = helloQuery(() => ({
@@ -50,29 +50,28 @@ const Home: VoidComponent = () => {
 export default Home;
 
 const AuthShowcase: VoidComponent = () => {
-  const sessionData = createSession();
+  const session = meQuery();
   return (
-    <div class="flex flex-col items-center justify-center gap-4">
-      <p class="text-center text-2xl text-white">
-        {sessionData().status === "authenticated" && (
-          <span>
-            Logged in as{" "}
-            {sessionData().data?.user?.name ?? sessionData().data?.user?.email}
-          </span>
-        )}
-      </p>
-      <button
-        class="rounded-full bg-white/10 px-10 py-3 font-semibold text-white no-underline transition hover:bg-white/20"
-        onClick={() => {
-          if (sessionData().status === "authenticated") {
-            void signOut();
-          } else {
-            void signIn("github");
-          }
-        }}
-      >
-        {sessionData().status === "authenticated" ? "Sign out" : "Sign in"}
-      </button>
-    </div>
+    <Show when={session.data}>
+      <div class="flex flex-col items-center justify-center gap-4">
+        <p class="text-center text-2xl text-white">
+          {session.data?.info && (
+            <span>Logged in as {session.data.info?.user?.name}</span>
+          )}
+        </p>
+        <button
+          class="rounded-full bg-white/10 px-10 py-3 font-semibold text-white no-underline transition hover:bg-white/20"
+          onClick={() => {
+            if (session.data?.info) {
+              void signOut().then(() => session.refetch());
+            } else {
+              void signIn("github");
+            }
+          }}
+        >
+          {session.data?.info ? "Sign out" : "Sign in"}
+        </button>
+      </div>
+    </Show>
   );
 };

template/index/with-auth-prpc.tsx

@@ -1,8 +1,8 @@
 import styles from "./index.module.css";
-import { type VoidComponent } from "solid-js";
+import { type VoidComponent, Show } from "solid-js";
 import { A } from "solid-start";
-import { helloQuery } from "rpc/queries";
-import { createSession, signOut, signIn } from "@solid-auth/base/client";
+import { helloQuery, meQuery } from "rpc/queries";
+import { signOut, signIn } from "@solid-auth/base/client";
 
 const Home: VoidComponent = () => {
   const hello = helloQuery(() => ({
@@ -51,29 +51,28 @@ const Home: VoidComponent = () => {
 export default Home;
 
 const AuthShowcase: VoidComponent = () => {
-  const sessionData = createSession();
+  const session = meQuery();
   return (
-    <div class={styles.authContainer}>
-      <p class={styles.showcaseText}>
-        {sessionData().status === "authenticated" && (
-          <span>
-            Logged in as{" "}
-            {sessionData().data?.user?.name ?? sessionData().data?.user?.email}
-          </span>
-        )}
-      </p>
-      <button
-        class={styles.loginButton}
-        onClick={() => {
-          if (sessionData().status === "authenticated") {
-            void signOut();
-          } else {
-            void signIn("github");
-          }
-        }}
-      >
-        {sessionData().status === "authenticated" ? "Sign out" : "Sign in"}
-      </button>
-    </div>
+    <Show when={session.data}>
+      <div class={styles.authContainer}>
+        <p class={styles.showcaseText}>
+          {session.data?.info && (
+            <span>Logged in as {session.data.info?.user?.name}</span>
+          )}
+        </p>
+        <button
+          class={styles.loginButton}
+          onClick={() => {
+            if (session.data?.info) {
+              void signOut().then(() => session.refetch());
+            } else {
+              void signIn("github");
+            }
+          }}
+        >
+          {session.data?.info ? "Sign out" : "Sign in"}
+        </button>
+      </div>
+    </Show>
   );
 };