Merge pull request #1 from bercivarga/feature/auth

Add auth with Clerk
bercivarga · Mar 8, 2024 · fd7c7b6 · fd7c7b6
2 parents 68a5a04 + 2a2632f
commit fd7c7b6
Show file tree

Hide file tree

Showing 13 changed files with 674 additions and 43 deletions.
diff --git a/app/(auth)/layout.tsx b/app/(auth)/layout.tsx
@@ -0,0 +1,20 @@
+import Link from "next/link";
+
+export default function AuthLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <div>
+      <nav className="absolute left-0 top-0 w-full p-6 text-center text-white">
+        <Link href="/">
+          <span className="text-2xl font-bold">Home</span>
+        </Link>
+      </nav>
+      <main className="flex min-h-screen items-center justify-center bg-slate-900">
+        {children}
+      </main>
+    </div>
+  );
+}
diff --git a/app/(auth)/sign-in/[[...sign-in]]/page.tsx b/app/(auth)/sign-in/[[...sign-in]]/page.tsx
@@ -0,0 +1,5 @@
+import { SignIn } from "@clerk/nextjs";
+
+export default function SignInPage() {
+  return <SignIn redirectUrl={"/dashboard"} />;
+}
diff --git a/app/(auth)/sign-up/[[...sign-up]]/page.tsx b/app/(auth)/sign-up/[[...sign-up]]/page.tsx
@@ -0,0 +1,5 @@
+import { SignUp } from "@clerk/nextjs";
+
+export default function SignUpPage() {
+  return <SignUp />;
+}
diff --git a/app/(marketing)/layout.tsx b/app/(marketing)/layout.tsx
@@ -0,0 +1,7 @@
+export default function MarketingLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return <>{children}</>;
+}
diff --git a/app/(marketing)/page.tsx b/app/(marketing)/page.tsx
@@ -0,0 +1,42 @@
+import { auth } from "@clerk/nextjs";
+import { Metadata } from "next";
+import Link from "next/link";
+
+import { Button } from "@/components/ui/button";
+
+export const metadata: Metadata = {
+  title: "CF Showcase Project",
+  description: "Made for CLEVER°FRANKE by @berci.dev",
+};
+
+export default function Home() {
+  const { userId } = auth();
+
+  return (
+    <main className="flex min-h-screen items-center justify-center">
+      <div className="flex flex-col gap-4 p-6 md:items-center md:text-center">
+        <h2>
+          Welcome to the
+          <br /> CF Showcase
+        </h2>
+        <p>Sign in or sign up in order to explore the app.</p>
+        <div className="flex gap-2">
+          {userId ? (
+            <Link href="/dashboard">
+              <Button>To dashboard</Button>
+            </Link>
+          ) : (
+            <>
+              <Link href="/sign-in">
+                <Button>Sign in</Button>
+              </Link>
+              <Link href="/sign-up">
+                <Button variant="outline">Sign up</Button>
+              </Link>
+            </>
+          )}
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/app/dashboard/layout.tsx b/app/dashboard/layout.tsx
@@ -0,0 +1,21 @@
+import { UserButton } from "@clerk/nextjs";
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <div className="flex h-screen">
+      <aside className="flex h-full w-64 flex-col justify-between bg-indigo-100 p-6">
+        <div>
+          <span>TODO: Add sidebar menu</span>
+        </div>
+        <div>
+          <UserButton afterSignOutUrl="/" />
+        </div>
+      </aside>
+      {children}
+    </div>
+  );
+}
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
@@ -0,0 +1,15 @@
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Dashboard",
+  description: "Start working on your ideas here.",
+};
+
+export default function Home() {
+  return (
+    <main>
+      <h1>Dashboard</h1>
+      <p>hi</p>
+    </main>
+  );
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,5 +1,6 @@
 import "@/styles/globals.css";
 
+import { ClerkProvider } from "@clerk/nextjs";
 import { Archivo_Black, Inter } from "next/font/google";
 import { twMerge } from "tailwind-merge";
 
@@ -22,16 +23,18 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <body
-        className={twMerge(
-          bodyFont.variable,
-          displayFont.variable,
-          "antialiased"
-        )}
-      >
-        {children}
-      </body>
-    </html>
+    <ClerkProvider>
+      <html lang="en">
+        <body
+          className={twMerge(
+            bodyFont.variable,
+            displayFont.variable,
+            "antialiased"
+          )}
+        >
+          {children}
+        </body>
+      </html>
+    </ClerkProvider>
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
diff --git a/middleware.ts b/middleware.ts
@@ -0,0 +1,18 @@
+import { authMiddleware } from "@clerk/nextjs";
+
+export default authMiddleware({
+  // Routes that can be accessed while signed out
+  publicRoutes: [
+    /^(?!\/dashboard).*/, // Match routes that don't start with "/dashboard"
+  ],
+  // Routes that can always be accessed, and have
+  // no authentication information
+  // ignoredRoutes: ["/no-auth-in-this-route"],
+});
+
+export const config = {
+  // Protects all routes, including api/trpc.
+  // See https://clerk.com/docs/references/nextjs/auth-middleware
+  // for more information about configuring your Middleware
+  matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
+};