Stevan/conve-x
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: wire up clerk

Browse Source 
+ Add convex provider with clerk
+ Add clerk provider
+ Add account page
+ Add login page
+ Add sign up page
+ Add clerk middleware
+ Add Navbar component
This commit is contained in:
Stevan Freeborn
2023-09-09 20:05:10 -05:00
parent 8025858815
commit 9416bbaa05
9 changed files with 122 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.vscode/settings.json
Vendored
+2 -1
View File
@@ -1,3 +1,4 @@
{
"css.lint.unknownAtRules": "ignore"
"css.lint.unknownAtRules": "ignore",
"cSpell.words": ["nextjs", "signup"]
}
convex/auth.config.js
+10
View File
@@ -0,0 +1,10 @@
const config = {
providers: [
{
domain: process.env.CLERK_JWT_ISSUER_DOMAIN,
applicationID: 'convex',
},
],
};
export default config;
src/app/account/[[...account]]/page.tsx
+9
View File
@@ -0,0 +1,9 @@
import { UserProfile } from '@clerk/nextjs';
export default function AccountPage() {
return (
<main className='flex flex-col items-center'>
<UserProfile />
</main>
);
}
src/app/layout.tsx
+17 -2
View File
@@ -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 (
<html lang='en'>
<body className={inter.className}>{children}</body>
<ClerkProvider
publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}
>
<ConvexProvider>
<html
lang='en'
className='w-full h-full'
>
<body className={`w-full h-full flex flex-col ${inter.className}`}>
<Navbar />
<div className='p-4'>{children}</div>
</body>
</html>
</ConvexProvider>
</ClerkProvider>
);
}
src/app/login/[[...login]]/page.tsx
+9
View File
@@ -0,0 +1,9 @@
import { SignIn } from '@clerk/nextjs/app-beta';
export default function LoginPage() {
return (
<main className='flex flex-col items-center'>
<SignIn appearance={{ elements: { card: 'shadow-md' } }} />
</main>
);
}
src/app/signup/[[...signup]]/page.tsx
+9
View File
@@ -0,0 +1,9 @@
import { SignUp } from '@clerk/nextjs';
export default function SignUpPage() {
return (
<main className='flex flex-col items-center'>
<SignUp />
</main>
);
}
src/components/Navbar.tsx
+31
View File
@@ -0,0 +1,31 @@
import { SignedIn, SignedOut, UserButton } from '@clerk/nextjs';
import Link from 'next/link';
export default function Navbar() {
return (
<nav className='flex items-center justify-between p-5 shadow-md'>
<ul className='flex items-center gap-4'></ul>
<ul className='flex items-center gap-4'>
<SignedIn>
<li>
<UserButton
showName
userProfileMode='navigation'
userProfileUrl='/account'
signInUrl='/login'
afterSignOutUrl='/'
/>
</li>
</SignedIn>
<SignedOut>
<li>
<Link href='/login'>Sign in</Link>
</li>
<li>
<Link href='/signup'>Sign up</Link>
</li>
</SignedOut>
</ul>
</nav>
);
}
src/middleware.ts
+9
View File
@@ -0,0 +1,9 @@
import { authMiddleware } from '@clerk/nextjs';
export default authMiddleware({
publicRoutes: [],
});
export const config = {
matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'],
};
src/providers/index.tsx
+25
View File
@@ -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 (
<ConvexProviderWithClerk
client={client}
useAuth={useAuth}
>
{children}
</ConvexProviderWithClerk>
);
}