gib/convex-monorepo
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Get password auth working.

Browse Source
This commit is contained in:
Gabriel Brown
2026-03-20 17:41:19 -05:00
parent 81e6a5aaa6
commit a8bb610be7
6 changed files with 57 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
apps/next/src/app/(auth)/sign-in/page.tsx
View File

@@ -252,24 +252,27 @@ const SignIn = () => {
<Tabs <Tabs
defaultValue={flow} defaultValue={flow}
onValueChange={(value) => setFlow(value as 'signIn' | 'signUp')} onValueChange={(value) => setFlow(value as 'signIn' | 'signUp')}
className='items-center' className='items-center flex-col'
> >
<TabsList className='py-6'> <TabsList>
<TabsTrigger <TabsTrigger
value='signIn' value='signIn'
className='cursor-pointer p-6 text-2xl font-bold' className='cursor-pointer py-2 px-6 text-2xl font-bold'
> >
Sign In Sign In
</TabsTrigger> </TabsTrigger>
<TabsTrigger <TabsTrigger
value='signUp' value='signUp'
className='cursor-pointer p-6 text-2xl font-bold' className='cursor-pointer py-2 px-6 text-2xl font-bold'
> >
Sign Up Sign Up
</TabsTrigger> </TabsTrigger>
</TabsList> </TabsList>
<TabsContent value='signIn'> <TabsContent
<Card className='bg-card/50 min-w-xs sm:min-w-sm'> value='signIn'
className='min-h-[560px] items-center flex flex-row'
>
<Card className='bg-card/50 min-w-xs sm:min-w-sm py-10'>
<CardContent> <CardContent>
<Form {...signInForm}> <Form {...signInForm}>
<form <form

2
apps/next/src/app/layout.tsx
View File

@@ -42,7 +42,7 @@ const RootLayout = ({
domain={env.NEXT_PUBLIC_SITE_URL} domain={env.NEXT_PUBLIC_SITE_URL}
customDomain={env.NEXT_PUBLIC_PLAUSIBLE_URL} customDomain={env.NEXT_PUBLIC_PLAUSIBLE_URL}
> >
<html lang='en'> <html lang='en' suppressHydrationWarning>
<body <body
className={`${geistSans.variable} ${geistMono.variable} antialiased`} className={`${geistSans.variable} ${geistMono.variable} antialiased`}
> >

3
apps/next/src/components/layout/auth/profile/user-info.tsx
View File

@@ -53,7 +53,7 @@ export const UserInfoForm = ({
const userProvider = usePreloadedQuery(preloadedProvider); const userProvider = usePreloadedQuery(preloadedProvider);
const providerMap: Record<string, string> = { const providerMap: Record<string, string> = {
unknown: 'Provider', unknown: 'Provider',
authentik: 'Gib\'s Auth' authentik: 'Gib\'s Auth',
}; };
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
@@ -168,4 +168,3 @@ export const UserInfoForm = ({
</> </>
); );
}; };

2
apps/next/src/components/layout/header/index.tsx
View File

@@ -28,7 +28,7 @@ export default function Header(headerProps: ComponentProps<'header'>) {
alt='Convex Monorepo' alt='Convex Monorepo'
width={50} width={50}
height={50} height={50}
className='invert dark:invert-0' className='invert dark:invert-0 w-15'
/> />
<span <span
className={`mb-3 hidden font-extrabold lg:inline lg:text-5xl ${kanitSans.className}`} className={`mb-3 hidden font-extrabold lg:inline lg:text-5xl ${kanitSans.className}`}

4
packages/backend/convex/custom/auth/providers/usesend.ts
View File

@@ -8,7 +8,7 @@ export default function UseSendProvider(config: EmailUserConfig): EmailConfig {
id: 'usesend', id: 'usesend',
type: 'email', type: 'email',
name: 'UseSend', name: 'UseSend',
from: 'Study Buddy <admin@techtracker.gbrown.org>', from: 'Convex Monorepo <admin@convexmonorepo.gbrown.org>',
maxAge: 24 * 60 * 60, // 24 hours maxAge: 24 * 60 * 60, // 24 hours
async generateVerificationToken() { async generateVerificationToken() {
@@ -23,7 +23,7 @@ export default function UseSendProvider(config: EmailUserConfig): EmailConfig {
async sendVerificationRequest(params) { async sendVerificationRequest(params) {
const { identifier: to, provider, url, theme, token } = params; const { identifier: to, provider, url, theme, token } = params;
//const { host } = new URL(url); //const { host } = new URL(url);
const host = 'TechTracker'; const host = 'Convex Monorepo';
const useSend = new UseSend( const useSend = new UseSend(
process.env.USESEND_API_KEY!, process.env.USESEND_API_KEY!,

89
packages/ui/src/theme.tsx
View File

@@ -1,24 +1,24 @@
'use client'; 'use client';
import type { ComponentProps } from 'react'; import type { ComponentProps } from 'react';
import { useEffect, useState } from 'react';
import { Moon, Sun } from 'lucide-react'; import { Moon, Sun } from 'lucide-react';
import { ThemeProvider as NextThemesProvider, useTheme } from 'next-themes'; import { ThemeProvider as NextThemesProvider, useTheme } from 'next-themes';
import { Button, cn } from '@gib/ui'; import {
Button,
cn,
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from '@gib/ui';
const ThemeProvider = ({ const ThemeProvider = ({
children, children,
...props ...props
}: ComponentProps<typeof NextThemesProvider>) => { }: ComponentProps<typeof NextThemesProvider>) => {
const [mounted, setMounted] = useState(false); return <NextThemesProvider {...props}>{children}</NextThemesProvider>
useEffect(() => {
setMounted(true);
}, []);
if (!mounted) return null;
return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
}; };
interface ThemeToggleProps { interface ThemeToggleProps {
@@ -27,44 +27,41 @@ interface ThemeToggleProps {
} }
const ThemeToggle = ({ size = 1, buttonProps }: ThemeToggleProps) => { const ThemeToggle = ({ size = 1, buttonProps }: ThemeToggleProps) => {
const { setTheme, resolvedTheme } = useTheme(); const { setTheme } = useTheme();
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
if (!mounted) {
return (
<Button {...buttonProps}>
<span style={{ height: `${size}rem`, width: `${size}rem` }} />
</Button>
);
}
const toggleTheme = () => {
if (resolvedTheme === 'dark') setTheme('light');
else setTheme('dark');
};
return ( return (
<Button <DropdownMenu>
variant='outline' <DropdownMenuTrigger asChild>
size='icon' <Button
{...buttonProps} variant="outline"
onClick={toggleTheme} size="icon"
className={cn('cursor-pointer', buttonProps?.className)} {...buttonProps}
> className={cn('cursor-pointer', buttonProps?.className)}
<Sun >
style={{ height: `${size}rem`, width: `${size}rem` }} <Sun
className='scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90' style={{ height: `${size}rem`, width: `${size}rem` }}
/> className='scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90'
<Moon />
style={{ height: `${size}rem`, width: `${size}rem` }} <Moon
className='absolute scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0' style={{ height: `${size}rem`, width: `${size}rem` }}
/> className='absolute scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0'
</Button> />
); <span className="sr-only">Toggle theme</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => setTheme("light")}>
Light
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("dark")}>
Dark
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("system")}>
System
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
}; };
export { ThemeProvider, ThemeToggle, type ThemeToggleProps }; export { ThemeProvider, ThemeToggle, type ThemeToggleProps };