added clerk auth and sign in page

wizelineacademy · Apr 3, 2024 · 1e25a3a · 1e25a3a
1 parent a0ce393
commit 1e25a3a
Show file tree

Hide file tree

Showing 8 changed files with 603 additions and 9 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Inter, Poppins } from "next/font/google";
 import "./globals.css";
 import dynamic from "next/dynamic";
+import { ClerkProvider } from "@clerk/nextjs";
 
 // const inter = Inter({ subsets: ["latin"] });
 
@@ -26,11 +27,10 @@ export default function RootLayout({
   // if the current route is login or register, we don't want to show the nav bar
 
   return (
-    <html lang="en">
-      <body className={poppins.className}>
-        <Navbar />
-        {children}
-      </body>
-    </html>
+    <ClerkProvider>
+      <html lang="en">
+        <body className={poppins.className}>{children}</body>
+      </html>
+    </ClerkProvider>
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,6 +1,9 @@
+import NavigationBar from "@/components/NavigationBar";
+
 export default function Home() {
   return (
     <main className="h-dvh w-dvw bg-white">
+      <NavigationBar />
       <a href="/login"> Login </a>
     </main>
   );

diff --git a/app/sign-in/[[...sign-in]]/page.tsx b/app/sign-in/[[...sign-in]]/page.tsx
@@ -0,0 +1,9 @@
+import { SignIn } from "@clerk/nextjs";
+
+export default function Page() {
+  return (
+    <div className="grid h-screen w-screen place-items-center bg-gradient-to-r from-primary to-primary-light">
+      <SignIn redirectUrl="/" />
+    </div>
+  );
+}
diff --git a/app/sign-up/[[...sign-up]]/page.tsx b/app/sign-up/[[...sign-up]]/page.tsx
@@ -0,0 +1,9 @@
+import { SignUp } from "@clerk/nextjs";
+
+export default function Page() {
+  return (
+    <div className="grid h-screen w-screen place-items-center bg-gradient-to-r from-primary to-primary-light">
+      <SignUp />
+    </div>
+  );
+}
diff --git a/components/NavigationBar.jsx b/components/NavigationBar.jsx
@@ -1,4 +1,5 @@
 "use client";
+import { UserButton } from "@clerk/nextjs";
 import { usePathname } from "next/navigation";
 
 const NavigationBar = () => {
@@ -10,6 +11,7 @@ const NavigationBar = () => {
   return (
     <nav className="flex items-center justify-between bg-white p-4 ">
       <h1 className="text-3xl font-bold text-primary">FEEDBACK FLOW</h1>
+      <UserButton afterSignOutUrl="/sign-in" />
       <div>
         <a className="mx-2" href="/login">
           Login

diff --git a/middleware.ts b/middleware.ts
@@ -0,0 +1,7 @@
+import { authMiddleware } from "@clerk/nextjs";
+
+export default authMiddleware({});
+
+export const config = {
+  matcher: ["/((?!.+.[w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
+};