From 9416bbaa057b8599895bda6400aacfa5452ec75a Mon Sep 17 00:00:00 2001 From: Stevan Freeborn <65925598+StevanFreeborn@users.noreply.github.com> Date: Sat, 9 Sep 2023 20:05:10 -0500 Subject: [PATCH] feat: wire up clerk + Add convex provider with clerk + Add clerk provider + Add account page + Add login page + Add sign up page + Add clerk middleware + Add Navbar component --- .vscode/settings.json | 3 ++- convex/auth.config.js | 10 ++++++++ src/app/account/[[...account]]/page.tsx | 9 +++++++ src/app/layout.tsx | 21 ++++++++++++++--- src/app/login/[[...login]]/page.tsx | 9 +++++++ src/app/signup/[[...signup]]/page.tsx | 9 +++++++ src/components/Navbar.tsx | 31 +++++++++++++++++++++++++ src/middleware.ts | 9 +++++++ src/providers/index.tsx | 25 ++++++++++++++++++++ 9 files changed, 122 insertions(+), 4 deletions(-) create mode 100644 convex/auth.config.js create mode 100644 src/app/account/[[...account]]/page.tsx create mode 100644 src/app/login/[[...login]]/page.tsx create mode 100644 src/app/signup/[[...signup]]/page.tsx create mode 100644 src/components/Navbar.tsx create mode 100644 src/middleware.ts create mode 100644 src/providers/index.tsx diff --git a/.vscode/settings.json b/.vscode/settings.json index 5a586b3..8aad976 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,4 @@ { - "css.lint.unknownAtRules": "ignore" + "css.lint.unknownAtRules": "ignore", + "cSpell.words": ["nextjs", "signup"] } diff --git a/convex/auth.config.js b/convex/auth.config.js new file mode 100644 index 0000000..970257a --- /dev/null +++ b/convex/auth.config.js @@ -0,0 +1,10 @@ +const config = { + providers: [ + { + domain: process.env.CLERK_JWT_ISSUER_DOMAIN, + applicationID: 'convex', + }, + ], +}; + +export default config; diff --git a/src/app/account/[[...account]]/page.tsx b/src/app/account/[[...account]]/page.tsx new file mode 100644 index 0000000..b468c61 --- /dev/null +++ b/src/app/account/[[...account]]/page.tsx @@ -0,0 +1,9 @@ +import { UserProfile } from '@clerk/nextjs'; + +export default function AccountPage() { + return ( +
+ +
+ ); +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index bc65fb5..39a7902 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,3 +1,6 @@ +import Navbar from '@/components/Navbar'; +import ConvexProvider from '@/providers'; +import { ClerkProvider } from '@clerk/nextjs'; import type { Metadata } from 'next'; import { Inter } from 'next/font/google'; import './globals.css'; @@ -14,8 +17,20 @@ export default function RootLayout({ children: React.ReactNode; }) { return ( - - {children} - + + + + + +
{children}
+ + + + ); } diff --git a/src/app/login/[[...login]]/page.tsx b/src/app/login/[[...login]]/page.tsx new file mode 100644 index 0000000..dad3ce0 --- /dev/null +++ b/src/app/login/[[...login]]/page.tsx @@ -0,0 +1,9 @@ +import { SignIn } from '@clerk/nextjs/app-beta'; + +export default function LoginPage() { + return ( +
+ +
+ ); +} diff --git a/src/app/signup/[[...signup]]/page.tsx b/src/app/signup/[[...signup]]/page.tsx new file mode 100644 index 0000000..5715451 --- /dev/null +++ b/src/app/signup/[[...signup]]/page.tsx @@ -0,0 +1,9 @@ +import { SignUp } from '@clerk/nextjs'; + +export default function SignUpPage() { + return ( +
+ +
+ ); +} diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx new file mode 100644 index 0000000..d82212f --- /dev/null +++ b/src/components/Navbar.tsx @@ -0,0 +1,31 @@ +import { SignedIn, SignedOut, UserButton } from '@clerk/nextjs'; +import Link from 'next/link'; + +export default function Navbar() { + return ( + + ); +} diff --git a/src/middleware.ts b/src/middleware.ts new file mode 100644 index 0000000..a29eb28 --- /dev/null +++ b/src/middleware.ts @@ -0,0 +1,9 @@ +import { authMiddleware } from '@clerk/nextjs'; + +export default authMiddleware({ + publicRoutes: [], +}); + +export const config = { + matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'], +}; diff --git a/src/providers/index.tsx b/src/providers/index.tsx new file mode 100644 index 0000000..584a3f3 --- /dev/null +++ b/src/providers/index.tsx @@ -0,0 +1,25 @@ +'use client'; + +import { useAuth } from '@clerk/nextjs'; +import { ConvexReactClient } from 'convex/react'; +import { ConvexProviderWithClerk } from 'convex/react-clerk'; +import { ReactNode } from 'react'; + +const CONVEX_URL = process.env.NEXT_PUBLIC_CONVEX_URL; + +if (CONVEX_URL === undefined) { + throw Error('NEXT_PUBLIC_CONVEX_URL is undefined'); +} + +const client = new ConvexReactClient(CONVEX_URL); + +export default function ConvexProvider({ children }: { children: ReactNode }) { + return ( + + {children} + + ); +}