feat: use latest's auth api

OrJDev · Oct 8, 2024 · a6e45df · a6e45df
1 parent 0681403
commit a6e45df
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 89 deletions.
diff --git a/.changeset/yellow-foxes-happen.md b/.changeset/yellow-foxes-happen.md
@@ -0,0 +1,5 @@
+---
+"create-jd-app": patch
+---
+
+feat: use latest's auth api
diff --git a/src/helpers/packages.ts b/src/helpers/packages.ts
@@ -11,7 +11,7 @@ const packages = {
     "@solid-mediakit/prpc": "^1.3.3",
     "@solid-mediakit/prpc-plugin": "^1.3.4",
     // authjs
-    "@solid-mediakit/auth": "^2.1.6",
+    "@solid-mediakit/auth": "^3.0.0",
     "@solid-mediakit/auth-plugin": "^1.1.4",
     "@auth/core": "0.35.0",
     "@auth/prisma-adapter": "^2.6.0",

diff --git a/template/index/with-auth-prpc-tw.tsx b/template/index/with-auth-prpc-tw.tsx
@@ -1,6 +1,6 @@
-import { type VoidComponent, Suspense, Show } from "solid-js";
 import { A } from "@solidjs/router";
-import { createSession, signOut, signIn } from "@solid-mediakit/auth/client";
+import { useAuth } from "@solid-mediakit/auth/client";
+import { type VoidComponent, Match, Switch } from "solid-js";
 import { helloQuery } from "~/server/hello/hello.queries";
 
 const Home: VoidComponent = () => {
@@ -38,9 +38,7 @@ const Home: VoidComponent = () => {
           <p class="text-2xl text-white">
             {hello.data ?? "Loading pRPC query"}
           </p>
-          <Suspense>
-            <AuthShowcase />
-          </Suspense>
+          <AuthShowcase />
         </div>
       </div>
     </main>
@@ -50,30 +48,32 @@ const Home: VoidComponent = () => {
 export default Home;
 
 const AuthShowcase: VoidComponent = () => {
-  const session = createSession();
+  const auth = useAuth();
   return (
     <div class="flex flex-col items-center justify-center gap-4">
-      <Show
-        when={session().status === "authenticated"}
-        fallback={
+      <Switch fallback={<div>Loading...</div>}>
+        <Match when={auth.status() === "authenticated"}>
+          <div class="flex flex-col gap-3">
+            <span class="text-xl text-white">
+              Welcome {auth.session()?.user?.name}
+            </span>
+            <button
+              onClick={() => auth.signOut({ redirectTo: "/" })}
+              class="rounded-full bg-white/10 px-10 py-3 font-semibold text-white no-underline transition hover:bg-white/20"
+            >
+              Sign out
+            </button>
+          </div>
+        </Match>
+        <Match when={auth.status() === "unauthenticated"}>
           <button
-            onClick={() => signIn("discord", { redirectTo: "/" })}
+            onClick={() => auth.signIn("discord", { redirectTo: "/" })}
             class="rounded-full bg-white/10 px-10 py-3 font-semibold text-white no-underline transition hover:bg-white/20"
           >
             Sign in
           </button>
-        }
-      >
-        <span class="text-xl text-white">
-          Welcome {session().data?.user?.name}
-        </span>
-        <button
-          onClick={() => signOut({ redirectTo: "/" })}
-          class="rounded-full bg-white/10 px-10 py-3 font-semibold text-white no-underline transition hover:bg-white/20"
-        >
-          Sign out
-        </button>
-      </Show>
+        </Match>
+      </Switch>
     </div>
   );
 };
diff --git a/template/index/with-auth-prpc.tsx b/template/index/with-auth-prpc.tsx
@@ -1,7 +1,7 @@
 import styles from "./index.module.css";
-import { type VoidComponent, Suspense, Show } from "solid-js";
 import { A } from "@solidjs/router";
-import { createSession, signOut, signIn } from "@solid-mediakit/auth/client";
+import { useAuth } from "@solid-mediakit/auth/client";
+import { type VoidComponent, Match, Switch } from "solid-js";
 import { helloQuery } from "~/server/hello/hello.queries";
 
 const Home: VoidComponent = () => {
@@ -39,9 +39,7 @@ const Home: VoidComponent = () => {
           <p class={styles.showcaseText}>
             {hello.data ?? "Loading pRPC query"}
           </p>
-          <Suspense>
-            <AuthShowcase />
-          </Suspense>
+          <AuthShowcase />
         </div>
       </div>
     </main>
@@ -51,30 +49,30 @@ const Home: VoidComponent = () => {
 export default Home;
 
 const AuthShowcase: VoidComponent = () => {
-  const session = createSession();
+  const auth = useAuth();
   return (
     <div class={styles.authContainer}>
-      <Show
-        when={session().status === "authenticated"}
-        fallback={
+      <Switch fallback={<div>Loading...</div>}>
+        <Match when={auth.status() === "authenticated"}>
+          <span class={styles.showcaseText}>
+            Welcome {auth.session()?.user?.name}
+          </span>
           <button
-            onClick={() => signIn("discord", { redirectTo: "/" })}
+            onClick={() => auth.signOut({ redirectTo: "/" })}
+            class={styles.loginButton}
+          >
+            Sign out
+          </button>
+        </Match>
+        <Match when={auth.status() === "unauthenticated"}>
+          <button
+            onClick={() => auth.signIn("discord", { redirectTo: "/" })}
             class={styles.loginButton}
           >
             Sign in
           </button>
-        }
-      >
-        <span class={styles.showcaseText}>
-          Welcome {session()?.data?.user?.name}
-        </span>
-        <button
-          onClick={() => signOut({ redirectTo: "/" })}
-          class={styles.loginButton}
-        >
-          Sign out
-        </button>
-      </Show>
+        </Match>
+      </Switch>
     </div>
   );
 };
diff --git a/template/index/with-auth-tw.tsx b/template/index/with-auth-tw.tsx
@@ -1,6 +1,6 @@
-import { type VoidComponent, Suspense, Show } from "solid-js";
 import { A } from "@solidjs/router";
-import { createSession, signOut, signIn } from "@solid-mediakit/auth/client";
+import { useAuth } from "@solid-mediakit/auth/client";
+import { type VoidComponent, Match, Switch } from "solid-js";
 
 const Home: VoidComponent = () => {
   return (
@@ -32,9 +32,7 @@ const Home: VoidComponent = () => {
             </div>
           </A>
         </div>
-        <Suspense>
-          <AuthShowcase />
-        </Suspense>
+        <AuthShowcase />
       </div>
     </main>
   );
@@ -43,30 +41,32 @@ const Home: VoidComponent = () => {
 export default Home;
 
 const AuthShowcase: VoidComponent = () => {
-  const session = createSession();
+  const auth = useAuth();
   return (
     <div class="flex flex-col items-center justify-center gap-4">
-      <Show
-        when={session().status === "authenticated"}
-        fallback={
+      <Switch fallback={<div>Loading...</div>}>
+        <Match when={auth.status() === "authenticated"}>
+          <div class="flex flex-col gap-3">
+            <span class="text-xl text-white">
+              Welcome {auth.session()?.user?.name}
+            </span>
+            <button
+              onClick={() => auth.signOut({ redirectTo: "/" })}
+              class="rounded-full bg-white/10 px-10 py-3 font-semibold text-white no-underline transition hover:bg-white/20"
+            >
+              Sign out
+            </button>
+          </div>
+        </Match>
+        <Match when={auth.status() === "unauthenticated"}>
           <button
-            onClick={() => signIn("discord", { redirectTo: "/" })}
+            onClick={() => auth.signIn("discord", { redirectTo: "/" })}
             class="rounded-full bg-white/10 px-10 py-3 font-semibold text-white no-underline transition hover:bg-white/20"
           >
             Sign in
           </button>
-        }
-      >
-        <span class="text-xl text-white">
-          Welcome {session().data?.user?.name}
-        </span>
-        <button
-          onClick={() => signOut({ redirectTo: "/" })}
-          class="rounded-full bg-white/10 px-10 py-3 font-semibold text-white no-underline transition hover:bg-white/20"
-        >
-          Sign out
-        </button>
-      </Show>
+        </Match>
+      </Switch>
     </div>
   );
 };
diff --git a/template/index/with-auth.tsx b/template/index/with-auth.tsx
@@ -1,7 +1,7 @@
 import styles from "./index.module.css";
-import { type VoidComponent, Suspense, Show } from "solid-js";
 import { A } from "@solidjs/router";
-import { createSession, signOut, signIn } from "@solid-mediakit/auth/client";
+import { useAuth } from "@solid-mediakit/auth/client";
+import { type VoidComponent, Match, Switch } from "solid-js";
 
 const Home: VoidComponent = () => {
   return (
@@ -33,9 +33,7 @@ const Home: VoidComponent = () => {
             </div>
           </A>
         </div>
-        <Suspense>
-          <AuthShowcase />
-        </Suspense>
+        <AuthShowcase />
       </div>
     </main>
   );
@@ -44,30 +42,30 @@ const Home: VoidComponent = () => {
 export default Home;
 
 const AuthShowcase: VoidComponent = () => {
-  const session = createSession();
+  const auth = useAuth();
   return (
     <div class={styles.authContainer}>
-      <Show
-        when={session().status === "authenticated"}
-        fallback={
+      <Switch fallback={<div>Loading...</div>}>
+        <Match when={auth.status() === "authenticated"}>
+          <span class={styles.showcaseText}>
+            Welcome {auth.session()?.user?.name}
+          </span>
           <button
-            onClick={() => signIn("discord", { redirectTo: "/" })}
+            onClick={() => auth.signOut({ redirectTo: "/" })}
+            class={styles.loginButton}
+          >
+            Sign out
+          </button>
+        </Match>
+        <Match when={auth.status() === "unauthenticated"}>
+          <button
+            onClick={() => auth.signIn("discord", { redirectTo: "/" })}
             class={styles.loginButton}
           >
             Sign in
           </button>
-        }
-      >
-        <span class={styles.showcaseText}>
-          Welcome {session()?.data?.user?.name}
-        </span>
-        <button
-          onClick={() => signOut({ redirectTo: "/" })}
-          class={styles.loginButton}
-        >
-          Sign out
-        </button>
-      </Show>
+        </Match>
+      </Switch>
     </div>
   );
 };