Merge branch 'remove-lucia'

README.md

@@ -8,7 +8,6 @@ For those wanting more hands on video walkthrough content that explains this cod
 
 Welcome to the WDC Next.js Starter Kit! This is a github template which contains the following technology we feel is a great starting point for any new SaaS product:
 
-- Authentication (Lucia)
 - Authorization
 - Subscription Management (Stripe)
 - Stripe Integration / Webhooks
@@ -122,8 +121,6 @@ When deplying to production, you want to set HOST_NAME to your FQDN, such as `ht
 
 ## Auth Setup
 
-TODO: link to lucia auth, talk about it
-
 ### Google Provider
 
 By default, this starter only comes with the google provider which you'll need to setup:

package.json

@@ -22,7 +22,8 @@
     "@aws-sdk/s3-presigned-post": "3.587.0",
     "@aws-sdk/s3-request-presigner": "3.587.0",
     "@hookform/resolvers": "3.4.2",
-    "@lucia-auth/adapter-drizzle": "1.0.7",
+    "@oslojs/crypto": "^1.0.1",
+    "@oslojs/encoding": "^1.1.0",
     "@radix-ui/react-alert-dialog": "1.0.5",
     "@radix-ui/react-avatar": "1.0.4",
     "@radix-ui/react-checkbox": "1.0.4",
@@ -55,7 +56,6 @@
     "fumadocs-mdx": "8.2.26",
     "fumadocs-ui": "11.3.1",
     "lodash": "4.17.21",
-    "lucia": "3.2.0",
     "lucide-react": "0.381.0",
     "next": "14.2.3",
     "next-mdx-remote": "5.0.0",

src/app/(coming-soon)/coming-soon.tsx

@@ -98,7 +98,7 @@ export function ComingSoon() {
             <li>🌑 ShadCN</li>
             <li>🌈 Tailwind CSS</li>
             <li>📝 Typescript</li>
-            <li>🔒 Authentication (Lucia-Auth) </li>
+            <li>🔒 Authentication (Artic and Oslo) </li>
             <li>🌐 Google & Github Login </li>
             <li>🔗 Magic Link Login </li>
             <li>👥 Role Based Authorization </li>

src/app/(landing)/_sections/features.tsx

@@ -46,7 +46,7 @@ export function FeaturesSection() {
             <CodeIcon /> Next.js 14 App Router
           </li>
           <li className={techClass}>
-            <LockIcon /> Authentication with Lucia-Auth
+            <LockIcon /> Authentication with Artic and Oslo
           </li>
           <li className={techClass}>
             <DollarSignIcon /> One-Off Payments with Stripe

src/app/(landing)/_sections/the-problem.tsx

@@ -33,7 +33,7 @@ export function TheProblemSection() {
           </p>
 
           <p className={cn(cellClass, "bg-blue-800")}>
-            3. But how will users register? reading through the lucia-auth docs
+            3. But how will users register? reading through the next-auth docs
             sucks. How do I figure out if someone is authenticated AND
             authorized to see that button? 🫠
           </p>

src/app/_header/actions.tsx

@@ -1,10 +1,9 @@
 "use server";
 
-import { lucia, validateRequest } from "@/auth";
+import { invalidateSession, validateRequest } from "@/auth";
 import { authenticatedAction } from "@/lib/safe-action";
 import { markNotificationAsReadUseCase } from "@/use-cases/notifications";
 import { revalidatePath } from "next/cache";
-import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
 import { z } from "zod";
 
@@ -27,12 +26,6 @@ export async function signOutAction() {
     redirect("/sign-in");
   }
 
-  await lucia.invalidateSession(session.id);
-  const sessionCookie = lucia.createBlankSessionCookie();
-  cookies().set(
-    sessionCookie.name,
-    sessionCookie.value,
-    sessionCookie.attributes
-  );
+  await invalidateSession(session.id);
   redirect("/signed-out");
 }

src/app/conditional-header.tsx

@@ -19,7 +19,7 @@ import { ModeToggle } from "@/components/mode-toggle";
 import Link from "next/link";
 import { applicationName } from "@/app-config";
 import { Button } from "@/components/ui/button";
-import { Session } from "lucia";
+import { type Session } from "@/db/schema";
 
 export function ConditionalHeader({
   session,

src/app/dashboard/settings/security/actions.ts

@@ -1,19 +1,14 @@
 "use server";
 
-import { lucia } from "@/auth";
+import { invalidateUserSessions } from "@/auth";
 import { authenticatedAction } from "@/lib/safe-action";
-import { cookies } from "next/headers";
+import { deleteSessionTokenCookie } from "@/lib/session";
 import { redirect } from "next/navigation";
 
 export const invalidateUserSessionsAction = authenticatedAction
   .createServerAction()
   .handler(async ({ input, ctx }) => {
-    lucia.invalidateUserSessions(ctx.user.id);
-    const sessionCookie = lucia.createBlankSessionCookie();
-    cookies().set(
-      sessionCookie.name,
-      sessionCookie.value,
-      sessionCookie.attributes
-    );
+    await invalidateUserSessions(ctx.user.id);
+    deleteSessionTokenCookie();
     redirect("/sign-in");
   });

src/app/dashboard/settings/security/logout-button.tsx → src/app/dashboard/settings/security/logout-all-devices-button.tsx

@@ -6,7 +6,7 @@ import { LogOut } from "lucide-react";
 import { useServerAction } from "zsa-react";
 import { invalidateUserSessionsAction } from "./actions";
 
-export function LogoutButton() {
+export function LogoutAllDevicesButton() {
   const { execute, isPending } = useServerAction(invalidateUserSessionsAction);
 
   return (

src/app/dashboard/settings/security/page.tsx

@@ -1,5 +1,5 @@
 import { ConfigurationPanel } from "@/components/configuration-panel";
-import { LogoutButton } from "./logout-button";
+import { LogoutAllDevicesButton } from "./logout-all-devices-button";
 
 export default async function SecurityPage() {
   return (
@@ -11,7 +11,7 @@ export default async function SecurityPage() {
         </p>
 
         <div className="w-fit">
-          <LogoutButton />
+          <LogoutAllDevicesButton />
         </div>
       </div>
     </ConfigurationPanel>

src/app/users/[userId]/profile-header.tsx

@@ -3,14 +3,14 @@ import { getCurrentUser } from "@/lib/session";
 import { headerStyles, pageTitleStyles } from "@/styles/common";
 import { btnIconStyles, btnStyles } from "@/styles/icons";
 import { getUserProfileUseCase } from "@/use-cases/users";
-import { UserId } from "lucia";
 import { SquareUser } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 import { FollowButton } from "./follow-button";
 import { isFollowingUserUseCase } from "@/use-cases/following";
 import { UnfollowButton } from "./unfollow-button";
 import { cn } from "@/lib/utils";
+import { UserId } from "@/use-cases/types";
 
 export async function ProfileHeader({ userId }: { userId: UserId }) {
   const user = await getCurrentUser();

src/app/users/[userId]/profile-tabs.tsx

@@ -1,9 +1,8 @@
 "use client";
 
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { cn } from "@/lib/utils";
 import { tabStyles } from "@/styles/common";
-import { UserId } from "lucia";
+import { UserId } from "@/use-cases/types";
 import Link from "next/link";
 import { usePathname } from "next/navigation";